;

vue提供了watch方法,用于监听实例内data数据的变化。通常写法是: new Vue({ data: { count: 10, blog:{ title:’my-blog’, categories:[] } }, watch: { count: function (newval, oldVal) { console.log(`new: %s, old: %s`, newVal, oldVal); } } }) 上述情况里data中的count属性可以直接监听,但是如果需要监听的数据是对象内的某一属性值的变化,直接watch对象blog是检测不到变化的,这是因为blog这个对象的指向并没有发生改变。有几个解决方法 1.深度监测 new Vue({ data: { count: 10, blog:{ title:’my-blog’, categories:[] } }, watch: { blog:{ handler(newVal,oldVal){ console.log(`new: ${newVal}, old: ${oldVal}`); }, deep:true } } }) 里面的deep设为了true,这样的话,如果修改了这个blog中的任何一个属性,都会执行handler这个方法。不过这样会造成更多的性能开销,尤其是对象里面属性过…

Vue中watch对象内属性的方法 2 天前
;

<el-table-column type="selection" :selectable=’checkboxSelect’ width="120"></el-table-column> checkboxSelect (row, rowIndex) { if (rowIndex == 0) { return false // 禁用 }else{ return true // 不禁用 } }

el-table中type=’selection’的禁用 23 天前
;

1. <template> <el-select v-model="hotel" filterable :filter-method="filterHotel" placeholder="请选择" clearable @clear="hotelClear"> <el-option v-for="item in options" :key="item.hotelcode" :label="item.hotelname" :value="item.hotelcode"> <span>{{ item.hotelname }}</span> <span>/{{ item.hotelcode }}</span> </el-option> </el-select> </template> 2. hotel:”, options: [ { hotelname: ‘选项1’, hotelcode: ‘aaa’ }, { hotelname: ‘选项2’, hotelcode: ‘b…

el-select多字段搜索filter-method 24 天前
;

window.tinymce.init({ toolbar: [‘fontsizeselect’], fontsize_formats: ‘8px 10px 12px 14px 18px 24px 36px 72px 96px 140px 280px’ })

tinymce设置工具栏显示字体大小 29 天前
;

1. <template> <div res="box" @click="action($event,123)"></div> </template> 2. action(e,index){ let boxWidth = this.$refs.box.clientWidth // box的宽度 let screenLeft = e.pageX // 鼠标距离屏幕左侧的距离 let boxLeft = this.$refs.box.getBoundingClientRect().left // box距离屏幕左侧的距离 let overHalf = (screenLeft – boxLeft) > boxWidth / 2 // 鼠标位置是否超过了容器的一半 }

vue中判断鼠标是否超过了容器X轴一半 2021年8月13日
;

1.相关库 axios, vue-awesome-swiper 2.处理 npm install babel-polyfill –save npm install es6-promise –save 3.文件 main.js import Es6Promise from ‘es6-promise’ require(‘es6-promise’).polyfill() Es6Promise.polyfill() build/webpack.base.conf.js,enter下添加babel-polyfill entry: { "babel-polyfill":"babel-polyfill", app: ‘./src/main.js’ } 4.vue-awesome-swiper的处理 npm install –save vue-awesome-swiper@3.1.3 //指定版本,最新版不兼容旧浏览器 https://www.npmjs.com/package/vue-awesome-swiper

vue项目兼容安卓4.4的处理 2021年8月6日
;

1.场景描述 通过select选择的目标中有多个属性要拿出,此时需要给v-model指定某一个属性用于回显,list结构如下 list:[{id:1,name’a’,age:12},{id:2,name:’b’,age:15}], form:{ name:” } 2.模板部分 给value绑定item,然后v-mode部分指定value-key <el-select placeholder="请选择" v-model="form.name" value-key="name" @change="change"> <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item"></el-option> </el-select> 3.绑定change事件 change(e){ console.log(‘e=’,e) }

element中el-select绑定多个值的处理 2021年7月13日
;

前言 本文讲述的最佳实践是从日常业务中总结而出的,不一定适合所有项目。毕竟每个公司或个人的项目不同,最佳实践也会有所不同。但是可以从这篇文章借鉴吸收一点有用的东西,有问题的地方也欢迎大家积极吐槽指正。 为了避免出现 我这明明可以,你那怎么不行 的尴尬情况,这里列一下文章涉及到依赖的版本号。 ├── webpack 5.39.1 ├── webpack-cli 4.7.2 ├── node 12.8.0 ├── npm 6.10.2 正文 初始化项目 1. mkdir test-app && cd test-app 2. npm init 首先添加一个入口文件 /src/index.js 和 webpack 配置文件 webpack.config.js,现在我们的目录结构如下 test-app ├── src | └── index.js ├── package.json ├── webpack.config.js 安装 webpack npm install webpack webpack-cli -D 开始搞事情 在 src/index.js 中随便写点东西 class Test { constructor() { document.writeTest(‘hello world’) } } new Test() 先来打个包看…

webpack 最佳实践 2021年7月9日
;

1.代码 axios.get(`/ExcelExamLogByExamPlan?id=123`,{responseType: ‘blob’}).then(res => { const data = res.data const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})) const link = document.createElement(‘a’) link.style.display = ‘none’ link.href = url link.setAttribute(‘download’, ‘excel.xls’) document.body.appendChild(link) link.click() document.body.removeChild(link) }) 2.后记 文件下载后windows自带的excel打开始终提示格式类型错误,但是用wps可以打开,后来发现setAttribute部分设置把xlsx改为xls即可

axios下载excel表格流 2021年7月2日
;

1.文件路径 ./config/index.js 2.内容 这里我们对应了两个后端服务器,特殊的/api写在前面,通用的卸载后面 proxyTable: { ‘/api’:{ target:’http://abc.com:3101/’, changeOrigin: true, pathRewrite:{ ‘^/api’:” } }, ‘/’:{ target:’http://100.100.100.100:8001′, changeOrigin: true } } 页面内请求写法: axios.get(‘/api/list’) axios.get(‘/list’) 3.其他 配置保存后,记得重启npm开发环境,否子配置不会生效

vue脚手架配置代理proxyTable 2021年6月30日
;

watch:{ shroleid:{ immediate:true, handler(id){ this.getData(id) }} }

vue watch 第一次不触发 2021年6月28日
;

1.场景 btnB下的button位于btnB组件之中 2.点击btnA,触发btnB组件内的button的事件 <div ref="btnA" @click="clickA">直接点击</div> <div ref="btnB"> <button @click="clickB">被点击</button> </div> this.$refs.btnB.$el.firstChild.click()

vue中点击一个元素触发另一个元素的点击事件 2021年6月28日
;

<el-link class="link" type="warning" href="/static/商品资料导入文件.xlsx" download>下载excel模板(商品资料)</el-link> 文件实际存放路径public/static/商品资料导入文件.xlsx

Vue下载本地静态资源 2021年6月22日
;

1.说明 ‘Content-Type’为’multipart/form-data’ 数据添加使用new FormData() <input type="file" accept=".xlsx, .xls" @change="handleClick"> import axios from ‘axios’ handleClick(e){ const files = e.target.files const rawFile = files[0] let formData = new FormData() formData.append("files", rawFile) axios({ method: ‘post’, url: ‘/SZM/WuZiGuanLi/UpLoadWuZiImgExcel’, data: formData, headers: { ‘Content-Type’: ‘multipart/form-data’, ‘Authorization’: localStorage.getItem("authorization") } }) } 2.jquery上传文件 <form> <input type=&q…

axios文件上传 2021年6月22日
;

import axios from ‘axios’ const CancelToken = axios.CancelToken const requestMap = new Map() let lastUniqueCode = ” const apiAxios = axios.create({ baseURL:’/’, timeout:10000 }) apiAxios.interceptors.request.use(function (config) { const uniqueCode = config.method + config.baseURL + config.url lastUniqueCode = uniqueCode if(requestMap.get(uniqueCode)){ config.cancelToken = new CancelToken(cancel => cancel(‘请不要重复提交!’)) } else { config.cancelToken = new CancelToken(cancel => requestMap.set(uniqueCode, cancel)) } return config; }) apiAxios.interceptors.response.use(func…

axios.CancelToken防止重复发请求 2021年6月18日
;

<div class="editor-slide-upload" :class="multiple==false&&imgCount>0?’disabled’:”"></div> 方法一 icon可以是变量也可以是常亮,isLike只能是字符串,是类名,且likeClass为true时才有 <i :class="[icon,{‘isLike’:likeClass}]"></i> 方法二: classB和classC都是类名,都是字符串 <i :class=" { classB: true, classC: isC }"></i> 方法三: class绑定一个三元表达式 <i :class=" isRed?’class1′, ‘class2’ "></i>

vue根据条件动态添加类名 2021年6月17日
;

.disabled /deep/ .el-upload–picture-card { display: none; }

element修改组件样式 2021年6月17日
;

1.修改需要显示的标签与值 <el-cascader :show-all-levels="false" v-model="cascaderData" :options="mainItemsOne" :props="{children:’twocountytown’,label:’name’,value:’code’,checkStrictly:true}" @change="handleChange" ref="cascader"> </el-cascader> 2.获取选中列的其它值 let codetype = this.$refs.cascader.getCheckedNodes()[0].data.codetype 3.递归处理,设置某一属性不可选中 treeFix (tree) { tree.forEach(item=>{ if(item.codetype==’3′){ item.disabled = true } if(item.twocountytown){ this.treeFix(item.twocountytown) } }) }

el-cascader级联选择器的使用 2021年6月12日
;

父created–>子created–>子mounted–>父mounted

vue中父子组件中生命周期函数顺序 2020年6月17日
;

unpkg是一个快速的全球内容交付网络,适用于npm上的所有内容。 语法:unpkg.com/:package@:version/:file 例子: 使用固定版本: unpkg.com/react@16.7.0/umd/react.production.min.js unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js 使用version范围 unpkg.com/react@^16/umd/react.production.min.js 如果省略文件路径(即使用“裸”URL),则unpkg将提供unpkg字段指定的文件,或者回退到。 package.json main unpkg.com/jquery 在URL的末尾附加一个以查看包中所有文件的列表。 unpkg.com/lodash/

unpkg的cdn引用 2019年12月11日
;

this.$message.closeAll()

element关闭message 2019年11月24日
;

1.问题描述 默认情况,v-html中的class并不生效 2.原因 scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.解决的话把scoped属性去掉就行了 2.解决方案 类名前添加>>> 参考链接:https://blog.csdn.net/weixin_42412046/article/details/80804285

vue中v-html使用样式 2019年11月22日
;

1.子元素中checkbox绑定的v-model属性如果在初始化时候没有值,会导致后面值无法选中,所以如果checkbox绑定的值为后期添加,就需要在list渲染之前进行添加

element checkbox 全选功能失效 2019年11月9日
;

1.问题描述 chrome和edge都正常,ie11中打开一片空白,控制台报错 2.处理步骤 安装babel-polyfill问题依旧 所有的函数写法fn(){}改为fn:function(){}问题依旧 main.js中挨个注释所有的第三方组件发现是一个库导致

vue2项目在ie11中显示空白 2019年11月8日