vue
小灰灰城堡
萌萌的小灰灰
展开
-
vue-cli本地预览打包文件
vue预览本地打包文件原创 2022-06-02 10:48:21 · 650 阅读 · 1 评论 -
坑:el-tree复选框动态禁用时,默认勾选的数据不显示
①:首先保证el-tree的树形结构进行递归遍历使用的是this.$set添加disable属性。②:保证default-checked-keys是根节点不是父节点(大坑)原创 2022-02-28 19:35:18 · 1700 阅读 · 2 评论 -
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 · 623 阅读 · 0 评论 -
解决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 · 3158 阅读 · 1 评论 -
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 · 862 阅读 · 1 评论 -
flex布局时el-table不能自适应问题
改变布局方式:使用float:left代替flex也可以参考下面的这个博客,大家试下https://blog.csdn.net/YongChao_bms/article/details/103293607原创 2021-11-14 15:01:19 · 948 阅读 · 0 评论 -
el-table嵌套表单并添加表单验证
注意事项:①:el-form标签要放在table的外面②:表格绑定的数据要作为表单的属性columnAggreForm: { column_type: "text", agg_type: "yes", //表格数据 agg_columns: [{ guid: this.getGuid(),原创 2021-11-14 14:54:18 · 2540 阅读 · 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 · 583 阅读 · 0 评论 -
切换el-select时显示的问题
前言:今天遇到个头大的问题,就是动态切换el-select组件返显问题。上图吧,一图胜万语。这个问题我想了大半天,不断的调试找问题。晚上偶然间看到了一个博客,感觉和我的问题相似。就看了下,果然啊,一语惊醒梦中人。就试了下,果然可以。心里爽啊。分析下原因吧:(注意,下面中的截图中el-select中的key之前是没有的,这是我修改后的)再来看个效果,我在代码input加个属性。看看到底是不是复用了。上面这个两个截图证明了,vue果然将input复用了!既...原创 2021-08-30 20:56:47 · 1014 阅读 · 3 评论 -
VSCode设置与删除代码模板(vue和react为例)
前言:在我们做开发中,免不了会偷个懒,节省自己的写代码的时间。想通过一些快捷键直接把想要的模板对象创建出来。今天给大家详细的写下,在VSCode中怎样去设置代码模板。步骤:①:找到VSCode里的左上角的文件,然后点击,找到列表里的首选项,在首选项里会看到用户代码片段②:然后进行设置,自己的代码片段。下面我以react为例进行解释。(直接从上面第②步开始)大家如果想看Vue的可...原创 2020-01-06 20:59:14 · 6544 阅读 · 2 评论 -
G2 AntV图表第一次初始化图形不能自适应问题(默认canvas大小为100px)
前言:今天在用g2做图表的时候,弄个柱状图第一次怎么也不能自适应,想了好久。找到两种方法,分享给大家。先解释为什么canvas没有按照容器大小自适应呢,而是默认100px呢?原因:这是因为没有找到元素的大小所以画了个基础约定的大小100px。看到这里就知道这么做了吧。这肯定是在图表渲染的时候。这是容器还没进行创建完毕,这才导致100px的大小。解决办法:①:this.$nextTick进行解决 mounted(){ this.$nextTick((原创 2021-01-28 20:34:24 · 2037 阅读 · 3 评论 -
el-slider中实现视频播放拖拽时,获取不到当前拖拽位置时间
前言:今天搞视频播放,添加视频进度条以及拖拽进度条实现播放对应视频功能。实现进度条还好,直接在el-slider上绑定一个值就行。当视频播放时更新绑定的值就能实现进度条的效果。可是TMD的,拖拽功能浪费了我大半天。el-silder上提供的change方法确实实现了拖拽,但是由于视频播放延迟,当我拖拽的放开鼠标的时候,视频还在播放,这样就导致了我得到的拖拽时间被覆盖了,进度条又回到拖拽之前位置了。所以我想办法解决这问题,在网上看了一些方法,说是在el-slider上绑定moseup事件,监听鼠标抬起原创 2020-11-24 19:08:41 · 1600 阅读 · 3 评论 -
去掉高德地图左下角的logo和文字
在你所需要的地方添加下面样式 .amap-logo{ display: none; opacity:0 !important; } .amap-copyright { opacity:0; }我用的vue直接添加到index.html文件夹下了(全局生效)原创 2020-11-22 09:34:58 · 4979 阅读 · 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 · 3821 阅读 · 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 · 1414 阅读 · 0 评论 -
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 · 765 阅读 · 0 评论 -
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 · 15483 阅读 · 0 评论 -
坑: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 · 1898 阅读 · 0 评论 -
vue-cli3打包文件路径问题
前言:打包文件出现这个问题:说是文件找不到,可以看下路径注意:‘/‘指的是项目的根目录 ,’./‘指的是当前目录。vue打包默认是根目录,解决这个办法就在vue.config配置(vue-cli3的)vue-cli2的应该配置在config文件夹/index.js文件,这样配置路径assetsPublicPath:'./'...原创 2020-10-09 10:17:29 · 2243 阅读 · 0 评论 -
ValidationError: webpack Dev Server Invalid Options options should NOT have additional properties
前言:今天重启项目的时候,突然出现了这个错误,节前还是好的,过了几天假期,程序自己死机了?不应该啊,耐心的找了找问题,看了下自己的配置,突然注意到节前我配置打包时加了个东西,把这个东西放错位置了,很是尴尬。配置错了,错误就出现了下面的结果...原创 2020-10-09 09:48:33 · 8266 阅读 · 2 评论 -
vue刷新当前页面或者当前组件
前言:很多时候我们会遇到页面刷新,传统的刷新会使页面一片白,带来很不好的体验,vue中为我们提供了一个provide和inject,可以在项目中巧妙的使用。使用步骤:①:router-view挂载②:在router-view所在组件中写上如下代码③:在其他组件中调用完毕!...原创 2020-09-24 20:27:03 · 1438 阅读 · 0 评论 -
父组件向子组件传值(静态文件里的变量)绑定不到form表单
前言:今天在封装弹框组件的时候,遇到了一个坑,做了新增,查看,修改三个功能,就想把它封装成一个组件,以方便以后使用。下面看截图,跟更清楚。添加功能的效果图(效果图举例):下面说下问题:就是我点击确定的时候,本应该让我填写的数据获取到,可得到的却是为空的对象。渲染是问题的,就是你拿不到填写数据,,但是如果在父组件的mounted中将传递子组件的数据加载就可以,但是这样就不是动态传值了,封装也没意义了。给你们看下我解决办法:就一个给子组件加上条件渲染v-if因为父组件加载的时候子原创 2020-09-24 20:14:59 · 614 阅读 · 0 评论 -
vue/cli 3版本 打包去掉soucemap文件
前言:一般正常打包会出现下面的这么多文件,其实生产环境下我们不要的那个 js.map文件的,这次就遇到客户上传Map文件过大,必须去掉Map文件解决办法:productionSourceMap: false; // 在vue.config.js文件中加上这个就可以了截图:...原创 2020-09-24 17:44:46 · 2217 阅读 · 0 评论 -
element-ui中Dropdown下拉菜单触发点击的2种使用方法
原创 2020-09-16 09:36:31 · 5657 阅读 · 0 评论 -
设置el-progress渐变背景色
前言:前天做个修改element-ui背景色的需求,要改成渐变色,看了看官方文档也没提供这个属性,这我就头大了,查询了好多资料,才知道,修改成渐变的要修改原生的代码。因为element-ui中的环形进度条使用的svg,想要修改背景色,需要修改svg中path的sth的stroke属性。步骤:①:拷贝代码,在官方解析的代码中添加defs标签,id为blue②:修改path中的stroke的值stroke="url(#blue)"。具体介绍如下:先来看下未修改环形进度条的效果和使用el-原创 2020-09-06 14:00:51 · 8901 阅读 · 5 评论 -
七夕奉上,拿走不谢:vue router.beforeEach() 出现死循环解决方案(Maximum call stack size exceeded)
前言:今天做vue路由遇到了一个问题,想了好久。经过不断的查资料和分析代码终于解决了。先展示下报错:意思就是堆栈满了,溢出了。分析原因之前先了解下next()和next('xxxx')看完这个你就会恍然大悟next()表示路由成功,直接进入to路由,不会再次调用router.beforeEach()next('/login')表示路由拦截成功,重定向至login,会再次调用router.beforeEach()再看代码:看完后不明白,可能兄弟你要喝点六个核桃,哈哈!ro..原创 2020-08-25 14:23:18 · 1313 阅读 · 0 评论 -
vue中nextTick的用法
什么是nextTick:官方文档介绍:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。说白了就是在数据变化后立即进行获取或者操作dom(此时dom还未渲染)vue的Dom更新是有一定的策略的。当你操作数据发生改变了,虽然vue是数据驱动dom改变,但是你当前的数据改变了,它并不会立即执行更新dom操作,而是等该事件中所有的数据都改变的才会去执行操作,所以更改了一个数据然后立即对该数据绑定的dom操作,可能是得不到想要的结果,而nextTick就原创 2020-08-24 15:46:58 · 561 阅读 · 0 评论 -
Vue中this.$set的使用
一、什么是this.$set,实现了什么功能this.$set向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新,用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如this.myObject.newProperty = 'hi'),你会发现vue官网是vue.set。这个this.$set()和它有什么关系呢?咱先说this.$set(),因为他们俩的区别就涉及原理问题。二、使用this.$set对象中使用:三个参数:this.$set("改.原创 2020-08-04 19:53:33 · 689 阅读 · 0 评论 -
判断一个对象中是否具有某个属性和这个对象是否为空
关键方法:hasOwnProperty代码: if(this.$route.query.hasOwnProperty('orderRepayStatus')){ this.replyShowStatus=false }else{ this.replyShowStatus=true }效果图:原创 2020-08-03 20:17:54 · 1098 阅读 · 0 评论 -
搭建vue(cli2)脚手架
什么是Vue脚手架:vue-cli就是Vue的脚手架工具,它帮助我们搭建基本的开发环境,好比架子搭建好了,利用它可以生产目录结构,本地调试及代码部署等,这就节省了我们的时间。搭建步骤:(注意:node的版本在6.0以上,避免版本低出错)①:找到项目放的文件夹。②:打开文件夹,鼠标点击空白处,shift+鼠标右击,运行powershell(记得先以管理员的身份运行)这是没有以管理员身份运行的报错以管理员身份运行后输入下面的命令:(然后输入A或者Y 回车)...原创 2020-06-30 12:00:38 · 291 阅读 · 0 评论 -
vue中动态绑定本地图片:src的坑
前言:前端开发中,有时候我们要使用本地图片,今天我就入坑了。在保证路径的正确下,动态绑定就是不会加载图片。效果图解决办法:两种①:②:看网上说的还可以使用@进行找到根路径,我试了好多次不行(报错)--希望大佬们请教下:我感觉不是我路径问题啊就这这样:...原创 2020-06-30 10:40:57 · 2080 阅读 · 1 评论 -
js或者vue中删除一个对象的某一个属性
前言:在开发中,无论是前端还是后端都需要对对象的属性进行操作,今天在项目中就用到了对对象的属性的删除,具体如下:上图:解决办法:方法①:使用原生的js的delete删除方法方法②:在vue中使用this.$delete('对象','删除的属性').效果图:...原创 2020-06-30 09:26:52 · 6412 阅读 · 0 评论 -
Vuex的详解和基本使用介绍
前言:在进行真正介绍Vuex时先给大家引入几个原创 2020-03-25 15:12:08 · 260 阅读 · 0 评论 -
Vue按需导入lazy-load懒加载无效解决办法
前言:今天做Vue项目实现图片懒加载的时候,按需导入可是没效果。查了好多资料都不行。我就试试 全部导入mint-ui。果然可以啦,神奇。解决办法:将Mint-UI全部导入。(我也不知道什么原因。有哪位大神知道或者能解决按需导入的没出效果的问题。请指教下小弟)...原创 2020-03-20 11:00:24 · 2294 阅读 · 0 评论