小灰灰城堡-CSDN博客

原创 vue-cli本地预览打包文件

vue预览本地打包文件

2022-06-02 10:48:21 727

原创（访问静态资源报错）net::ERR_CERT_AUTHORITY_INVALID

原因：在访问https协议的网址的时候，有时会出现标题所示的错误，原因在于https授信，当前验证不通过项目在登录后，叫后端更改了图片的地址，但是图片未正常显示，报错。解决办法：重新登录！！...

2022-04-24 17:21:45 1171

原创坑：el-tree复选框动态禁用时，默认勾选的数据不显示

①：首先保证el-tree的树形结构进行递归遍历使用的是this.$set添加disable属性。②：保证default-checked-keys是根节点不是父节点（大坑）

2022-02-28 19:35:18 1842 2

原创 vue+js拖拽进度条+计数器联动效果(可自定义值，复制代码直接可用)

直接上代码：封装slider的组件： <template> <div id="container" ref="outContainer"> <div class="innnerContainer" ref="innerContainer" :style="`width:${distance}px`"> <div class="block" ref="block" :style="`left:$...

2022-01-16 17:34:01 1416

原创 JSON.stringify()方法时报错 Converting circular structure

原因：对象间的属性存在相互引用解决办法：使用插件 circular-jsonnpm install circular-json -D 引入：import CircularJSON from 'circular-json'两个重要的方法（解析与反解析）：CircularJSON.parse('转换的值')CircularJSON.stringify('转换的值')完美解决！...

2022-01-12 20:56:30 688

原创 vue中安装postcss-pxtorem插件，Error: PostCSS plugin postcss-pxtorem requires PostCSS 8错误

原因：版本不合适，一般是版本太高解决办法：npm找对应的版本链接：https://www.npmjs.com/package/postcss-pxtorem

2021-12-28 11:56:07 1276

原创点击/焦点获取，控制元素与隐藏，点击显示元素时，获取不到选中的值

解决办法：使用setTimeout延迟隐藏代码：html://触发焦点显示div <el-input v-model="input" @focus="()=>this.isShowSearch=true" @blur="blurInput" size="small" placeholder="多个关键字段用|分割"></el-input>//div代码，点击获取值<div class="baseSearchOptionItem" v-for=

2021-11-14 16:01:36 255

原创解决clipboard.js在vue的弹窗组件中无效或者首次点击无效

解决办法：通过ref获取div元素代码： <el-button ref="copy" :data-clipboard-text="复制该文字" type="primary" @click="copyCode" size="small">复制</el-button>mounted(){ //mounted中初始化实例，解决第一次复制不触发问题 let copyDomTxt=this.$refs['copy'].$el

2021-11-14 15:41:48 3436 2

原创 node 启动项目出现eslint-disable-line报错

解决：node的版本问题。我系统默认是v15.12.0的，降到 v8.16.0就行了查看node版本和安装node 可以使用nvm工具

2021-11-14 15:36:15 794

原创 vue-cli4刷新报错：Uncaught SyntaxError: Unexpected token ＜

修改vue.config.jspublicPath:'/',//解决打包时css和js以及静态文件路径不正确问题

2021-11-14 15:23:50 817

原创 vue-cli4热更新失效问题

①：安装 webpack-dev-servernpm install --save-dev webpack-dev-server②：修改vue.config.js配置devServer: { port: 3033, host: "0.0.0.0", https: false, // https:{type:Boolean} open: true, // 配置自动启动浏览器 disableHostCheck: true, //webpack4.0 开启热

2021-11-14 15:15:09 928 1

原创 flex布局时el-table不能自适应问题

改变布局方式：使用float:left代替flex也可以参考下面的这个博客，大家试下https://blog.csdn.net/YongChao_bms/article/details/103293607

2021-11-14 15:01:19 1009

原创 el-table嵌套表单并添加表单验证

注意事项：①：el-form标签要放在table的外面②：表格绑定的数据要作为表单的属性columnAggreForm: { column_type: "text", agg_type: "yes", //表格数据 agg_columns: [{ guid: this.getGuid(),

2021-11-14 14:54:18 2614 2

转载 el-table和Sortable插件实现表格行列拖拽

①：安装Sortable插件：npm install sortablejs --save②：引入import Sortable from 'sortablejs'③：使用<template> <div style="width:800px"> <el-table :data="tableData" border row-key="id" align="left"> <el-tabl

2021-11-14 13:35:26 628

原创 mongodb配置远程连接

声明：服务器用的是window系统的步骤：① 进入到你安装的mongodb的bin文件夹下找到mongod.cfg文件，然后打开。②：找到里面的bindIp:在后面加上0.0.0.0(如下图) 保存③：新打开一个cmd(以管理员身份运行)进入到mongodb的bin文件夹执行下面这个命令更新配置（把下面的路径换成你的）mongod.exe --config "C:\Program Files\MongoDB\Server\5.0\bin\mongod.cfg" --insta.

2021-09-27 20:37:56 3278 2

原创 mac远程连接window服务器

一：去mac的APP store下载这个软件下载好后，打开。按着下面的步骤执行。以上的步骤就ok啦，就能看到自己的服务器界面了

2021-09-26 20:39:25 1576

原创 node-token生成(jsonwebtoken)和过期验证(express-jwt)采坑记录

前言：在做服务时token验证是必不可少的一环。今天搞node验证可谓是一波三折。先说踩得坑吧：在使用express-jwt插件验证token是否过期时，一直验证不通过，报401。服务端会提示：原因:就是前端要在token前面加上Bearer和空格。如图：接下来看下两个插件（时间有限我只简单的说）详细了解看下面jsonwebtoken：http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.ht..

2021-09-23 20:45:03 4725 5

原创切换el-select时显示的问题

前言：今天遇到个头大的问题，就是动态切换el-select组件返显问题。上图吧，一图胜万语。这个问题我想了大半天，不断的调试找问题。晚上偶然间看到了一个博客，感觉和我的问题相似。就看了下，果然啊，一语惊醒梦中人。就试了下，果然可以。心里爽啊。分析下原因吧：（注意，下面中的截图中el-select中的key之前是没有的，这是我修改后的）再来看个效果，我在代码input加个属性。看看到底是不是复用了。上面这个两个截图证明了，vue果然将input复用了！既...

2021-08-30 20:56:47 1080 3

原创 http状态码304缓存机制(强缓存和协商缓存-304)

http缓存机制

2021-08-24 21:02:55 13270 1

转载 JS数组和对象相互转换方法[实用]

数组转对象展开运算符 (...)这是一个简单快速的方法constarr=['one','two','three'];constobj={...arr};console.log(obj);//{0:'one',1:'tow',2:'three'}Objcet.assign(target, ...sources)将所有可枚举属性的值从一个或多个源对象分配到目标对象参数： target：目标对象、...sources：源对象返回值：目标对...

2021-03-18 11:26:47 5532

转载前端之浅谈浏览器的垃圾回收机制和内存泄露

JavaScript使用垃圾回收机制来自动管理内存。JS的回收机制分两种：1.标记清除 2.引用计数。各大浏览器常用的是前者。比如，Chrome浏览器限制的所能使用的内存极限（64位为1.4GB，32位为1.0GB），这就意味着浏览器将无法直接操作一些大内存对象。标记清除：　　定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。　　到目前为止，I

2021-03-18 10:17:11 645

原创将本地项目推送到远程git和创建新的分支

1，把脚手架git的删除2，打开github创建新的仓库（获取远程地址：例如：https://github.com/study/react.git）3，打开项目创建本地仓库（git init）4, 将代码添加本地存储缓存区（git add .）5，提交到控制区（git commit -m '提交信息'）6，使用远程地址（git remote add origin 远程地址）7，推送的远程master分支（git push origin master）8，创建远程新的dev分支（git che.

2021-03-17 19:27:33 466

原创 G2 AntV图表第一次初始化图形不能自适应问题（默认canvas大小为100px）

前言：今天在用g2做图表的时候，弄个柱状图第一次怎么也不能自适应，想了好久。找到两种方法,分享给大家。先解释为什么canvas没有按照容器大小自适应呢，而是默认100px呢？原因：这是因为没有找到元素的大小所以画了个基础约定的大小100px。看到这里就知道这么做了吧。这肯定是在图表渲染的时候。这是容器还没进行创建完毕，这才导致100px的大小。解决办法：①：this.$nextTick进行解决 mounted(){ this.$nextTick((

2021-01-28 20:34:24 2171 3

原创 js中连等号的魅力

前言：这几天闲来无事就看了看js的题，没想到js的坑太深了，每一个知识点都是考察基本功。今天下午遇到了一个有意思的题目，搞了好大会才吃透。在这里分享出来，说的不正确的地方请指正。题目来了：（这道题考察的就是对变量和值在堆栈中的存储以及变量指针的指向,还有就是运算符优先级）先把答案给大家：undified,{n:1,x:{n:2}} vara={n:1}varb=a a.x=a={n:2} console.log(a.x,b)可能有的小伙伴很疑惑为啥结果跟...

2020-12-24 20:54:47 816 1

原创 el-slider中实现视频播放拖拽时，获取不到当前拖拽位置时间

前言：今天搞视频播放，添加视频进度条以及拖拽进度条实现播放对应视频功能。实现进度条还好，直接在el-slider上绑定一个值就行。当视频播放时更新绑定的值就能实现进度条的效果。可是TMD的，拖拽功能浪费了我大半天。el-silder上提供的change方法确实实现了拖拽，但是由于视频播放延迟，当我拖拽的放开鼠标的时候，视频还在播放，这样就导致了我得到的拖拽时间被覆盖了，进度条又回到拖拽之前位置了。所以我想办法解决这问题，在网上看了一些方法，说是在el-slider上绑定moseup事件，监听鼠标抬起

2020-11-24 19:08:41 1746 3

原创去掉高德地图左下角的logo和文字

在你所需要的地方添加下面样式 .amap-logo{ display: none; opacity:0 !important; } .amap-copyright { opacity:0; }我用的vue直接添加到index.html文件夹下了（全局生效）

2020-11-22 09:34:58 5429 3

原创 el-form 表单手机号验证

利用form的rules属性中validator来实现自定义验证方法checkPhonelet checkPhone = (rule, value, callback) => { let reg = /^1[345789]\d{9}$/ if (!reg.test(value)) { callback(new Error('请输入11位手机号')) } else { callback() }}注意方法写的位置：.

2020-11-22 09:22:11 3884 1

原创时间戳和年月日时分秒相互转换

时间格式化：参数：1602753080174（时间戳）const getTimeStr = (time, isShort = false, interval = "-", formatStr = "YYYY-MM-dd hh:mm:ss") => { if (isNumber(time)) time = new Date(time); if (!isDate(time)) return ''; let format = isShort ? `YYYY${interval}MM${inte...

2020-11-22 09:09:25 1467

原创手机号脱敏

// 手机号脱敏('13912345678' 转换成 '139****5678') 第3位开始替换4个const telHide = num => { if (!num || num.length != 11) { return num } else { let data = num.replace(/(\d{3})\d{4}(\d*)/, '$1****$2') return data }}...

2020-11-22 09:07:38 1070

原创 vuex文件问题：vue中打包后cdn加载文件(Not Found)

一般情况下出现这种问题；看下cdn上是否具有这个文件（或者之前有，现在删除了），我的就是这个问题本来引入的是https://cdn.staticfile.org/vuex/3.4.0/vuex.min.js版本的vuex，可是打包后经过cdn后，报了下面这个错解决办法：上cdn上看下是否这个文件还存在cdn链接：https://staticfile.org/下面这个就是各个版本，vuex3.4.0的已经删了，所以项目才会报错...

2020-11-18 10:03:37 821

原创 Object.keys与Object.values方法之详解

一、语法①：Object.keys(obj)参数：要返回其枚举自身属性的对象返回值：一个表示给定对象的所有可枚举属性的字符串数组二、处理对象，返回可枚举的属性数组letperson={name:"张三",age:25,address:"深圳",getName:function(){}}console.log('输出对象的key')console.log(Object.keys(person))//["name","age...

2020-11-08 13:43:07 631 1

转载 el-popover 弹出框使用

转载：https://cloud.tencent.com/developer/section/1489903<template> <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> <el-button slot="reference">h

2020-11-02 20:30:05 15688

原创 git的分支基本操作（代码基本提交，分支合并，代码回滚，强制提交，暂存）

前言：习惯了可视化操作git,就把git命令忘得差不多了，但是有些东西还必须命令解决。今天就是遇到了分支合并，代码回滚和代码强制提交。可视化操作不来，只能用git命令操作。先一步步介绍：一：代码的基本提交：//添加到暂存区git add .git commit -m '提交的备注信息'//提交到pa_zf分支上git push -u origin pa_zf二：代码分支合并（下面以master和pa_zf两个分支为例，将pa_zf合并到master上）①：切换到你需要的分支

2020-11-02 19:00:35 1181

原创 react2.0以下以及2.0以上代理配置方式

前言：react版本不一样对各个配置也会不一样，今天在搞react的时候，就配置了一个代理，因为刚开始没注意版本问题一直报错。查了资料才知道。下面来看下吧。react2.0以下：（package.json下面这样配置）"proxy":{ "/api/**":{ "target":"http://m.kugo.com", "changeOrigin": true }}react2.0以及以上版本（package.json下面这样配置）//直接写你

2020-10-13 20:28:53 256 1

原创坑：vuex中的mutations不能使用return获取数据

import * as type from '../testMuation_type'const testData={ state:{ pInfo:[{testName:"测试人员",testAge:20}], title:"测试标题", decs:"测试描述" }, mutations:{ [type.GET_TEST]:(state)=>{ //console.log(state..

2020-10-10 20:16:44 1993

原创 react中兄弟组件的传值

前言：组件通信中除了父子组件，爷孙组件还有兄弟组件传值通信这都是在项目常用的。下面介绍下兄弟的传值。①：首先先安装events插件npm install events --save②：新建一个文件，然后引入events,相当于Vue里的Bus③：接受参数兄弟组件下面这样写法已经弃用了：改为下面的写法：④：触发监听事件传递参数的兄弟组件...

2020-10-10 20:15:07 1954 2

原创 react中context跨组件传值（爷孙组件等多组件深度传值）

前言：在做项目中免不了进行组件深度传值，比如爷孙组件以及更深。这是时候其实有两个办法的。就是类似下面的结构下面给大家介绍下方法①：传统的父子组件传值，一个传一个，这样虽然能实现但是很麻烦。②：就是react给我们提供了一个context，可以帮我们达到效果。context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。接下来看怎样使用。使用之前我们需要知道里面的几个东西①：childContextTypes(外层的组件使用的)②：ge

2020-10-10 19:57:36 1296

原创 react配置src根目录（绝对路径）

前言：做项目的时候需要引入很多文件，当引入文件路径的时候感觉写的路径很长，这就感到很难受了，万一在碰见哪个客户提出多加一层目录混蛋需求这就又要改。所以直接配置成绝对路径，管他加几个目录我找到的就是根路径。下面看下怎样配置吧：...

2020-10-10 19:32:21 4486 1

原创 react脚手架配置less

前言：react搞得很奇怪，既然脚手架里配置了sass语法，为什么不把less语法也配置进去。还让开发者自己配置下。言归正传：下面开始配置。①：安装lessnpm install --save less less-loader②：找到node_modules/react-scripts/config/webpack.config.js③：配置截图：代码：const lessRegex = /\.less$/;const lessModuleRegex = /

2020-10-10 19:22:14 507

原创 vue-cli3打包文件路径问题

前言：打包文件出现这个问题：说是文件找不到，可以看下路径注意：‘/‘指的是项目的根目录，’./‘指的是当前目录。vue打包默认是根目录，解决这个办法就在vue.config配置（vue-cli3的）vue-cli2的应该配置在config文件夹/index.js文件，这样配置路径assetsPublicPath:'./'...

2020-10-09 10:17:29 2307