![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
天渺工作室
全栈工程师+设计师+业余音乐制作人
展开
-
el-select下拉框远程搜索且多选时,编辑需要回显的一个简单案例
前端业务开发中不管使用vue2~3,还是react,angular各种前端技术栈,经常会遇到这种业务。一个下拉框Select中,不仅需要需要**支持远程模糊搜索,还需要支持多选。并且在编辑时,还能正常把已经多选好的内容回显到Select中。**#### 用Vue3+ElementPlus+TS举一个简单的案例。原创 2024-04-21 02:04:10 · 1783 阅读 · 0 评论 -
Vue2和3中的插槽区别及其简单案例
Vue2和3中的插槽区别&插槽常用知识点温习和基本概念是一致的,也是匿名插槽、具名插槽、作用域插槽三种,只是基础语法有一些区别。下面让我们温习一下插槽的常用基础知识点。原创 2024-04-05 00:20:20 · 479 阅读 · 0 评论 -
SyntaxError: /xxxx.vue: Unexpected token, expected “,“,[object Promise]export { render, staticRende}
webpack have the same syntaxError: /.../xxx.vue: Unexpected token, expected "," (1:8) for ALL Vue 2 components in the project原创 2023-08-18 23:12:50 · 989 阅读 · 0 评论 -
Vue3中用自定义指令拦截点击事件,点击事件添加权限
Vue3中用自定义指令拦截点击事件,点击事件添加权限。某些应用场景会给点击事件添加权限,不存在权限就 拦截 点击事件(或触发其他业务事件),有权限就继续正常 触发 点击事件。如果用封装组件的方法,在使用三方UI库的情况下,封装成本过大,并不划算。原创 2023-02-12 23:08:39 · 1435 阅读 · 1 评论 -
event.path参数被浏览器删除,如何一劳永逸的解决
event.path参数被浏览器删除,如何一劳永逸的解决.event.path参最早从官方issue中可获知chromium内核团队早在21年就开始认为 Event.path 属于非标准 API,某些地方已经开始删除event.path数组参数了。2月初,Chrome(版本号109.0.5414.120)在一次升级中删除绑定点击等等部分事件中的Event.path数组参数,,将当前所有的冒泡一层一层 parentNode 元素收集起来。方法,但是根据网上的某些网友反馈也有可能返回空数组(暂未找到原因)。原创 2023-02-12 01:37:59 · 935 阅读 · 0 评论 -
To use this template, you must update following to modules:npm xxx should be xxx
To use this template, you must update following to modules: npm: should be >=原创 2023-01-04 00:02:05 · 398 阅读 · 0 评论 -
Failed to parse source for import analysis because the content contains invalid JS syntax
Vue3 在采用 compositionAPI 时候,Vite编译报错:[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.我遇到的报错原因是因为原创 2021-10-01 20:00:29 · 5287 阅读 · 0 评论 -
elementUI el-select获取点击项的整个对象item
在vue2引入elementUI之后,经常会遇到此类需求,el-select获取点击项的整个对象item,而不是默认的v-model 项目// 官方文档有 value-key="value" 的用法 https://element.eleme.cn/#/zh-CN/component/select#select-attributes案例<template> <div> <el-select v-model="value" value-key="v.原创 2021-06-28 22:59:10 · 8124 阅读 · 8 评论 -
vuex中更新对象或数组的值页面不更新的问题
在Vuex中,如果store中数据是数组或者是对象,操作之后,vuex 数值已经改变了,但页面展示的对应数值却没有改变。类似的情况,大部分出现在这几个场景state: { obj: { a:1, }, arr: [0,1,2]}1. 改变数组的某一项state.arr[0] = 1;2. 对象赋值新属性state.obj.b = 2;...解决方案优先使用Vue.set,使用JSON.p原创 2021-05-31 22:40:21 · 9072 阅读 · 8 评论 -
Iview Select filterable搜索“无匹配数据”一直显示,Iview Select filterable远程搜索“无匹配数据”显示异常
拓展https://blog.csdn.net/weixin_44132981/article/details/102607979?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-0&spm=1001.2101.3001.4242说实话,Iview UI真的挺坑的,官方文档什么都没说,当Iview UI中Select 加了filterable属性,在加了remote和:remote-method.原创 2021-05-27 23:39:16 · 1391 阅读 · 1 评论 -
IView Input禁止输入空格,IView v-model.trim修饰符失效,IView输入框禁止输入空格
和elementUI还不一样<!--IView UI里面 trim修饰符还不起作用 坑爹--><Input v-model.trim="value" placeholder="请输入..." @input="inputFun" style="width: 300px"></Input>解决方案...inputFun(e) { //$nextTick必须 this.$nextTick(() => { //正则过滤原创 2021-05-24 20:29:27 · 1711 阅读 · 0 评论 -
VueUncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/
vue router路由重定向导致的报错VueUncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/或者vue Uncaught Error: Redirected when going from “/*“ to “/*“废话不多说方法1:https://mp.csdn.net/editor/html/107813784这种解决方法可以是.原创 2021-05-10 21:36:14 · 4509 阅读 · 6 评论 -
vue element嵌套表单验证
在vue2搭配elementUI中,如果是动态表单中需要表单验证,官方文档的解决方法https://element.eleme.cn/#/zh-CN/component/form<el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key" :prop="'domains.' + index + '.va原创 2021-04-23 19:58:45 · 741 阅读 · 0 评论 -
vue ERROR in [copy-webpack-plugin] unable to locate ‘/xxx/xxxx‘ at ‘/xxx/xxxx‘
vue2的 npm run build 打包时报此错误log的情况下1.检查报错路径下是否有报错所指的文件夹2.没有的话 人工添加一个就OK人工添加此文件原创 2021-02-25 17:59:55 · 592 阅读 · 0 评论 -
vue element table树形数据表格点击折叠icon无效的原因
在vue2中使用element table表格树形数据折叠操作的时候,折叠icon箭头怎么点击都没有效果,出现这种情况 极有可能是以下情况树形表格table的数据源talbeData的问题//具体原因没有研究源代码,但是目前发现的主要原因就是此处的索引row-key导致的 ... tableData: [{ id: 1, date: '2016-05-02', name: '王小虎', addres..原创 2021-02-04 14:27:33 · 931 阅读 · 0 评论 -
Vue 集成高德地图 搜索提示POI下拉框点击偶尔失效的问题
在vue2中集成高德地图后,高德地图自带的'AMap.Autocomplete','AMap.PlaceSearch', 服务模块绑定的input 输入框收入关键字以后,提示内容出来以后,鼠标点击无效的现象出现类似的情况的主要原因就是使用input的时候,默认使用html最原始的自带input 标签<!--最好使用html原生的input标签--><input id="input_id" /><!--不要使用三方UI的输入框 比如element 的.原创 2021-02-03 16:55:26 · 1876 阅读 · 1 评论 -
vue项目引入三方字体
vue2项目引入三方字体注意:前提是字体文件没有问题新建一个放字体的文件font,放入字体文件,定义一个字体font.css@font-face { font-family:"庞门正道标题体"; /*注意 每次添加 format('embedded-opentype')都会出错 我没加这个为了兼容IE9的format*/ src: url("../font/庞门正道标题体.ttf") format('truetype') ; font-wei.原创 2020-11-12 15:28:37 · 1985 阅读 · 2 评论 -
vue echart图表打包后 图片不显示
遇到类似的情况,很大情况是echart 配置中因为图片引入路径的问题如今的框架,ng,vue,react 在打包编译的时候 都需要先用webpack 进行解析后再压缩打包,路径引入问题,一定要注意解决办法....//引入图片import echartMapLocation from "@/assets/images/echartMapLocation.png"import dbsBox from "@/assets/images/dbs_box.png"...//echa..原创 2020-11-08 00:58:01 · 683 阅读 · 0 评论 -
vue设置页面的高度100%
1.设置全局页面高度在vuecli init的默认工程里面,App.vue 页面中加//App.vue 页面中<style> html,body,#app{ height: 100%; background:rgba(38, 24, 49,.6);}</style>2.设置单个页面的高度100%用css3 的相对于视口的高度 vh<template> <div class="dataScreen...原创 2020-11-03 10:52:37 · 7771 阅读 · 0 评论 -
elementUI Tree 树形控件实现单选+获取树形控件单选框勾选内容
html部分<el-tree :data="data" show-checkbox node-key="id" ref="tree" check-strictly highlight-current @check-ch.原创 2020-10-27 17:25:11 · 1902 阅读 · 0 评论 -
vue3 Unsupported URL Type “npm:“: npm:vue-loader@^16.0.0-beta.7
vue3在新建工程的时候 报错 Unsupported URL Type "npm:": npm:vue-loader@^16.0.0-beta.7找了很多原因 最终发现 很多情况都是因为vue3的部分配置依赖需要npm高版本,最好直接升级6以上更新npm至最新的稳定版本npm install npm@latest -g或者npm install -g npm...原创 2020-10-11 02:57:53 · 1275 阅读 · 0 评论 -
npm : 无法加载文件 D:\nodejs\npm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 http://go.microsoft.com/fwlink
vue3项目启动的时候 遇到类似情况pm : 无法加载文件 D:\nodejs\npm.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 http://go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。最简单 也是最不影响其他环境的访问直接删除D:\nodejs\npm.ps1 改文件就OK...原创 2020-10-11 02:51:50 · 2070 阅读 · 0 评论 -
Vue 项目解决跨域问题
vue 项目中解决接口跨域的方法1.简单粗暴直接用jquery 的jsonp 来调用跨域跨域接口直接npm install vue-jsonp --save 安装依赖import Vuejsonp from'vue-jsonp;//实例化一次 ...Vue.use(Vuejsonp)...this.$jsonp.then((e)=>{});//其实这个插件就是用的jquery的jsonp 和用jquery 一样的 如果项目本身引用了jq 那就用jq 的ajax的jso原创 2020-09-10 15:10:48 · 371 阅读 · 0 评论 -
vue elementUI Uncaught (in promise) cancel的报错问题
this.$confirm 源代码方法是基于new Pormise 方法来操作的 方法末尾的catch 是不能删除的,需要存在抛出错误的地方this.$prompt('请输入分类名称', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/, inputErrorMessage: .原创 2020-08-18 19:49:03 · 942 阅读 · 0 评论 -
vue Uncaught Error: Redirected when going from “/*“ to “/*“ 路由报错
Uncaught Error: Redirected when going from "/*" to "/*"报类似的错 大部分因为触发了vue-router 路由导航重定向了简单的方法就是直接触发跳转的逻辑上,把error抛出来 this.$router.replace({ path: this.$route.path, query }) .catch(()=>{});//把error 抛出来扩展参考https://blog.c...原创 2020-08-05 14:03:40 · 9165 阅读 · 0 评论 -
vue工程添加echarts图表案例demo
1.安装echartsnpm install echarts --save2.可以在项目入口一如全局 也可以在局部页面引入 1.在单独页面引入import echarts from 'echarts' 2. 也可以在main.js 引入全局import echarts from 'echarts'//放入全局vue 对象中Vue.prototype.$echarts = echarts3.div容器<div id="main" styl...原创 2020-08-02 20:46:56 · 313 阅读 · 0 评论 -
vue elementUI table表格列动态渲染的案例(小坑)
整个表格动态渲染的列 列数肯定要是同步的tableHeader 变量取到动态渲染的列数数组...<el-table-column :label="item" v-for="(item, index) in tableHeader" :key="index"> <template slot-scope="scope"> {{tableData[scope.$index].payTypeAm原创 2020-07-14 11:52:43 · 2602 阅读 · 0 评论 -
Vue报错 property protocol of undefined
TypeError: Cannot read property 'protocol' of undefined抱这种错 有两种可能1.全局Axioshttps://blog.csdn.net/weixin_42707181/article/details/886880992.Axios 的http 请求地址有误 null 或者是undefined大部分情况下 就是这两种情况...原创 2020-06-17 11:43:07 · 488 阅读 · 0 评论 -
elementUI Table表格表头自定义
element UI 官方文档有一个:render-header 的方法 渲染自定义结构用的是 vue 的h函数 也就是render 函数写法 //html <el-table-column align="center" :render-header="renderHeader" > <template s...原创 2020-06-11 20:39:50 · 3099 阅读 · 0 评论 -
vue h函数 render函数写法案例
renderHeader(h,{column,$index}){ return h( 'div', {class:'', style:"padding-top:4px;" }, [ h('el-tooltip', { props:{ content:"若设置结算时间,每天实际统计时间:从结算时间起24小时为一...原创 2020-06-11 11:10:57 · 2834 阅读 · 0 评论 -
vue 监听对象某个属性 精简写法
直接上代码...'demo.sex':{ handler: function(newValue, oldValue) { ... }, },...这种写法newValue, oldValue 值是正确的 推荐这种写法原创 2020-06-08 18:47:10 · 446 阅读 · 0 评论 -
vue 项目添加echarts图表
1.安装echartsnpm install echarts --save2.可以在项目入口一如全局 也可以在局部页面引入 1.在单独页面引入import echarts from 'echarts' 2. 也可以在main.js 引入全局import echarts from 'echarts'//放入全局vue 对象中Vue.prototype.$echarts = echarts3.div容器<div id="main" styl...原创 2020-06-06 13:44:35 · 636 阅读 · 0 评论 -
vue项目中Keep-Alive 缓存页面中的初始化事件
created():在创建vue对象时,当页面渲染之前就触发 只会触发一次;activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等所以如果需要在KeepAlive 缓存中的页面中初始化就调用activated 生命周期来初始化...原创 2020-04-28 14:15:49 · 1215 阅读 · 0 评论 -
vue 多层组件相互嵌套的时候 数据源更新 dom没更新 彻底清除组件缓存
当项目中存在多层组件相互嵌套 组件存在严重缓存时this.$nextTick(() => {.....});不管用 this.$forceUpdate();不管用只能通过深拷贝浅拷贝数据源原理 上来操作this.tableData = JSON.parse(JSON.stringify(this.tableData))问题解决没有研究源码 很...原创 2019-06-24 20:57:28 · 2315 阅读 · 0 评论 -
elementUI 上传文件图片大小加了限制后 仍然上传了
https://blog.csdn.net/chanlingmai5374/article/details/80558444 看了这位老哥的说法 在看看文档 才发现自己没认真看文档<el-upload :beforeUpload="beforeAvatarUploadPdf" </el-upload>...原创 2019-06-21 11:27:00 · 3110 阅读 · 2 评论 -
elementUI el-date-picker 时间范围设置 固定时间段可选 配置
废话不多说 上代码<el-date-picker v-model="startTimeAndEndTime" @change='pickerTime' type="datetimerange" ...原创 2019-06-13 09:45:16 · 28928 阅读 · 4 评论 -
vue keep-alive 不生效 以及前进 后退 对数据刷新和保留缓存操作
因为项目Vue router 连续嵌套了好几层 首先检查keep-alive的 include 和including 属性是否应用正确include 是缓存包含including是缓存相反项目中嵌套了好几层keep-alive 那个页面需要缓存 应当给当前页面 父级最近的router 外面加keep-alive 而不是APP.vue 的最外层因为所做的项目中有很多 分页页面 分页...原创 2019-04-18 10:58:04 · 1967 阅读 · 0 评论 -
vue+element 点击按钮后 导致 刷新页面 致url中拼接 ? 或者拼接参数
vue+element 点击按钮后 导致 刷新页面 致url中拼接 ? 或者拼接参数element 自己的<el-form></el-form>标签中中自带的按钮是<el-button type="primary" class="fl_button" @click="onSubmit">保存</el-button>...原创 2019-03-30 19:06:08 · 1308 阅读 · 0 评论