20230911 H5跳转到小程序,监听从小程序返回事件,执行刷新动作
// 监听页面显示隐藏
export const onPageShow = (callback) => {
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
console.log("监听页面显示");
callback();
}
if (document.visibilityState === "hidden") {
console.log("监听页面隐藏");
const removeBtn = document.createElement("button");
removeBtn.onclick = () => {
window.removeEventListener("visibilitychange");
};
}
});
};
import { onPageShow } from "@/utils/index";
onPageShow(async () => {
getTaskListData();
});
20230907 长按图片识别二维码实现方案,监听长按事件,关闭弹窗
<img @touchstart="start">
const start = async () => {
setTimeout(function () {
gzhDialog.value = false;
},500)
};
20220822 elementUI v-for 对象数组 输入框不能输入下拉框无法选择
this.$set(OriginData(Array/Object), key/index, tragetData);
this.$set(this.data,'btns',[])
三个参数:
1、源数据,可以是数组或者对象
2、修改的目标, 数组时下标、对象是key
3、替换的新数据
20210928 vue常用的修饰符
.trim v-model修饰符 自动过滤首尾空白字符 <input v-model.trim="msg">{{msg}}
.lazy v-model修饰符 将input事件改为change事件 <input v-model.lazy="msg">{{msg}}
.number 将输入值转为数值类型 <input type="number" v-model.number="msg">{{typeof(msg)}}
.stop 事件修饰符 阻止事件冒泡 <button @click.stop="doThis"></button>
.once 事件修饰符 事件将只触发一次 <button @click.once="agree"></button>
.enter 键盘修饰符 监听键盘事件有动作时触发<input @keyup.enter="submit">
.native 在父组件中给子组件绑定一个原生的事件 就将子组件变成普通的HTML标签
20210601 proxy配置代理遇到的一个问题
proxy: {
'/api': {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true,
pathRewrite: {
'^/api': 'api'
}
},
'/close': {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true,
pathRewrite: {
'^/close': ''
}
}
}
后台接口中有 api 前缀 无论是开发环境还是编译后的包 都不影响
后台接口中不存在close 开发环境 会进入代理 并将close移除掉 无影响
但是编译后的包 进入不到代理 请求接口回加上close前缀 导致接口404
20210511 require不存在的文件时如何避免报错
this.bankList = res.data.filter((item, index) => {
try {
item.bankBgUrl = require('@/assets/images/bank/'+item.bankName+'.png')
}
catch(err){
item.bankBgUrl = require('@/assets/images/bank/默认银行卡.png')
}
return item
});
20210429 移除el-form表单校验
this.$refs[formName].clearValidate();
20210312 修饰符native和sync的区别
- 组件上使用原生事件不生效时,只要加上native就可以了。例如:<hello @focus.native="fn1"></hello>
- sync主要用于子组件要修改prop数据的一种语法糖,其作用是简化子组件自身想改变自身的数据。
20210201 ios端微信浏览器里keepAlive不生效的问题
1.在需要keepAlive的页面路由里配置对应的saveSrollTop:true(缓存滚动条位置)
2.用scrollBehavior处理滚动位置(滚动到之前存好的位置)
export default new Router({
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
if (from.meta.saveSrollTop) {
from.meta.savedPosition = document.documentElement.scrollTop || document.body.scrollTop;
}
return {x: 0, y: to.meta.savedPosition || 0};
}
},
20210201 vant轮播图滑动时为什么触发了click事件
这种情况通常是由于项目中引入了fastclick库导致的。fastclick的原理是通过 Touch 事件模拟出 click 事件,而 Swipe 内部默认会阻止 touchmove 事件冒泡,干扰了 fastclick 的判断,导致出现这个问题。将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。
20210201 h5视频组件配置封面和禁止默认全屏播放
<video controls :playsinline='true' :src="module.videoUrl" :poster="module.videoCover"></video>
20210129 移动端页面滚动到指定位置
document.getElementById("page").scrollIntoView();
20210113 uniapp获取当前页面路由及参数
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
let curRoute = routes[routes.length - 1].route; //获取当前页面路由
let curParam = routes[routes.length - 1].options; //获取路由参数
20201229 vue框架中定义全局的方法
// 在main.js中
Vue.prototype.toPage = function(path, query) {
router.push({
path: path,
query: query,
});
};
// 在页面中
this.toPage("/takeOutResult", {});
20201215 v-for列表数组使用下标赋值页面无更新 修改数组对象下数组对象值不更新
this.secondList = this.secondList.slice()
20201104 filter过滤器的使用
首先过滤器分为全局过滤器和局部过滤器,其主要用途是对页面数据进行批量处理。简化单个处理的繁琐操作逻辑,例如日期格式的处理等。
过滤器的使用
-
先注册,后使用
-
组件内
filters:{ 过滤器名: fn }
fn 内通过 return 返回最终的数据 -
全局
Vue.filter('过滤器名',fn)
fn 内通过 return 返回最终的数据 -
使用
{{ 数据 | 过滤器名 }}
过滤器的功能函数
-
声明
function(data,argv1,argv2...){}
-
第一个参数是传入的要过滤的数据,即调用时管道符左边的内容。
-
第二个参数开始往后就是调用过滤器的时候传入的参数。
<p v-for="(item,index) in 4">{{index|myFilter('xxx')}}</p>
filters:{
myFilter(value,value2){
return value+value2;
},
},
20201104 watch和computed的区别是什么
watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:
当某一个数据发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。
computed是一个计算的属性,可以对数据处理得到一个新的state,而watch是对原有的state做异步改变。
computed计算出来的的属性无需定义可以直接在dom中使用,该操作简化了模板中太多声明式的逻辑。
watch和computed各自处理的数据关系场景不同,watch擅长处理的场景:一个数据影响多个数据时;computed擅长处理的场景:一个数据受多个数据影响时。总结:如果页面数据需要经过复杂计算就用 computed,如果一个数据需要被监听并且对其他数据做一些操作就用 watch。
input type="text" v-model="aaa"> <span>{{bbb}}</span>
<p v-for="(item,index) in 4">{{ccc(index)}}</p>
data() {
return {
aaa:'张三',
bbb:'',
}
},
watch: {
aaa:function(){
this.bbb = this.aaa;
},
},
computed:{
ccc:function() {
return function(e){
return e*2 + this.aaa;
}
}
},
20201104 enum枚举的理解和使用
个人理解:更像是一个常量数组,本质就是键值对的形式,用于取值被限定在一定范围内的场景,比如一周只能有七天等。
枚举使用 enum
关键字来定义:enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}。
枚举成员会默认被赋值为从 0
开始递增的数字,同时也会对枚举值到枚举名进行反向映射。字符串枚举不会进行反向映射。
当然也可以手动赋值,未手动赋值的枚举项会接着上一个枚举项递增。
如果未手动赋值的枚举项与手动赋值的重复了,TypeScript 是不会察觉到这一点的,但反向取值的是时候是会被覆盖掉的。
20201104 vue如何自定义指令
官方解释:对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
尝试理解:指令中封装了一些 DOM 行为,对于页面和数据更为方便的输出,这些操作就叫做指令。
vue常用内置指令:v-bind、v-model、v-if、v-show、v-else、v-for、v-html、v-text、v-on等。
自定义指令提供了五个勾子函数:bind、inserted、update、componentUpdated、unbind。
自定义指令分为:全局指令、局部指令。还包含:带参数的自定义指令。
参考文章:
自定义指令 — Vue.js
Vue自定义指令及使用 - sugar_coffee - 博客园
[vue]使用自定义指令实现表单校验_让勤奋成为习惯-CSDN博客_vue 自定义指令表单验证
20201019 elementUI只能选最近12周和前三个月
// 禁用周
pickerOptions2: {
disabledDate: (time) => {
// 上周周日 = 当前日期-当前周几
var current = (new Date().getTime())-24*60*60*1000*(new Date().getDay())
// 12周以前周日 = 当前时间 - 12周时间
let week12 = 24 * 60 * 60 * 1000*7*12;
let week12Ago = current-week12;
// 禁用大于上周周日的部分 和小于12周以前的部分
return time.getTime() > current || time < week12Ago
},
firstDayOfWeek:1, // 设置从周一开始
},
// 禁用月
pickerOptions: {
disabledDate: (time) => {
// 获取前三个月时间
let date1 = new Date();
date1.setMonth(date1.getMonth()-2);
let year1=date1.getFullYear();
let month1=date1.getMonth();
month1 =(month1<10 ? "0"+month1:month1);
let three = (year1.toString()+'-'+month1.toString());
// 禁用三个月前 和当月之后
let min = new Date(three).getTime()
var current = new Date()
return time.getMonth() >= current.getMonth() || time < min
},
},
20200929 在有多个echarts图表的vue页面中 首次进入页面会滚到中间 处理方法
document.querySelector('.report').scrollIntoView({ behavior: 'smooth' })
20200922 在router-link上添加click事件会被拦截无效,需要加.native修饰符
20200921 做@input时,使用传统input标签,输入汉字时可能会出现接口调用多次的情况,可改用el-input标签,避免问题产生。例:资讯搜索
20200910 vue多层循环,动态改变数据后渲染的很慢或者不渲染
可在动态改变数据的方法 第一行加上 this.$forceUpdate(); 例如:
foldComment(row:any){
this.$forceUpdate();
this.commentInfo.commentList.map(function(item:any) {
if(item.commentId==row.commentId){
item.isShowMoreComment = !item.isShowMoreComment
return item;
}
})
}
20200909 el-table高度自适应
:maxHeight="tableHeight"
tableHeight:window.innerHeight-300
20200907 blur事件优先于click事件问题
可采用mousedown来代替click
20200811 vue中局部页面滚动到最底部
this.$nextTick(() => {
let tablePar = this.$refs["container"];
tablePar.scrollTop = tablePar.scrollHeight;
});
20200805 elementUI文本域自适应高度并且给最大行数
<el-input type="textarea" :autosize="{maxRows:4}"></el-input>
20200804 如何修改el-table文本超出show-overflow-tooltip的显示宽度
<style lang="scss"> .el-tooltip__popper{ max-width:50% } </style>
20200730 在vue的template结构里面使用moment日期格式化组件需要再data里面返回一下
cnpm i moment --save
import moment from 'moment'
data() {
return {
moment,
<template slot-scope="scope">
<span>{{moment(scope.row.updatedDate).format('YYYY-MM-DD')}}</span>
</template>
20200728 el-table行内嵌入el-input做当行修改时 启用禁用通过配置disabled属性无效 可能是因为该属性不是原有的 可通过先配置属性再赋表格数据的方式来解决
if (res.code === 200) {
let list = res.data;
this.recordList = list.map(function(item) {
item.disabled = true;
return item;
})
}
20200707 vue如何获取上一个返回页面的路由
beforeRouteEnter(to, from, next) {
next(vm=>{
// 这里的vm指的就是vue实例,可以用来当做this使用,赋值需用vm
console.log(to)
console.log(from)
})
}
20200706 IP有端口号 域名不会有端口号 域名是解析过的
20200703 vue从详情页返回列表保存列表位置状态不变
router里面配置 meta: { keepAlive: true },
位置确实记录上了(加缓存,返回不刷新页面),弊端就是返回不触发created和mounted,
所以有些页面需要返回触发的东西都写在activated里面。
20200702 vue如何阻止事件冒泡
<div v-for="(item, index) in list" @click="handleClick">
<span @click.stop="handleClick2"></span>
</div>
20200701 vue的element上传图片成功回调参数传参数下标
:on-success="handleAvatarSuccess.bind(this,items.TagName)"
// 利用es5的bind函数! this是当前,items.TagName是携带的参数
handleAvatarSuccess (idx, res, file, name) {
console.log(res)
console.log(file)
console.log(idx)
console.log(name)
this.orderInfo['idx'] = URL.createObjectURL(file.raw)
},
<el-upload
:action="questionUploadFile"
:show-file-list="false"
:on-success="handleAvatarSuccess.bind(this,index,index2)"
:before-upload="beforeFileUpload"
:on-change="fileChange">
<img v-if="option.imageUrl" :src="option.imageUrl">
<i v-else class="el-icon-picture-outline" style="font-size: 20px;margin-right: 6px;margin-top: 4px;"></i>
</el-upload>
handleAvatarSuccess(index,index2,res,file) {
console.log(index,index2)
console.log(res)
console.log(file)
console.log(URL.createObjectURL(file.raw)) // 打印本地路径
if (res.code === 200) {
this.list[index].questionChoiceList[index2].imageUrl = res.data;
}
},
20200320 方法中如何同时传event和参数
<input type="file" name="file" @change="getImage($event,scope.$index)"/>
20200227 el-table表格出现抖动闪动情况
.el-table{
width:99.9%;
}
20200121 vue 报错:Cannot read property '_wrapper' of undefined
通常情况下是@click的方法没有在methods中定义,一个个去排查吧
20200117 el-select设置value为对象
普通的,如果直接传对象,会显示如下效果,解决办法:el-select加value-key属性唯一标识
<el-select
value-key="fundCode"
v-model="data.mainType"
default-first-option>
<el-option
v-for="item in fundList"
:label="item.fundName"
:value="item"
:key="item">
</el-option>
</el-select>
20200109 el-table勾选和取消勾选以及获取勾选的值
// 勾选和取消勾选 rows为数组 type为true或false
toggleSelection(rows,type) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row,type);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
// 获取勾选的值 拿到的是数组
handleSelectionChange(val) {
this.multipleSelection = val;
}
为什么vue组件中data必须是一个函数而不是对象
在new vue()中 data可以直接是一个对象
new Vue({
el: '#app',
template: `<div>{{name}}</div>`,
data: {
name: 'tony'
}
})
为什么在vue组件中 data必须是一个函数呢?
我们大致可以通过js原型链来对比下:
var Component = function() {};
Component.prototype.data = {
demo: 123
}
var component1 = new Component();
var component2 = new Component();
component1.data.demo = 456;
console.log(component2.data.demo); // 456
从上面可以看出,两个实例都引用同一个对象,其中一个改变的时候,另一个也发生改变。
每一个vue组件都是一个vue实例,通过new Vue()实例化,引用同一个对象。
如果data直接是一个对象的话,那么一旦修改其中一个组件的数据,其他组件相同数据就会被改变。
而data是函数的话,每个vue组件的data都因为函数有了自己的作用域,互不干扰。
多个路由指向同一个组件来回切换时不刷新问题
第一种.<router-view :key="$route.path">
第二种.组件页面中加watch监听 监听变化
export default {
watch: {
'$route' (to, from) {
console.log('to=' + to)
this.reload()
}
}
}
第三种.使用vue2.2中引入的beforeRouteUpdate导航守卫(原理同上者,方式略不同)
<template>
<router-view ></router-view>
</template>
export default {
beforeRouteUpdate (to, from, next) {
console.log('routeUpdate:to=' + to.fullPath + ';from=' + from.fullPath)
next()
}
}
elementUI tree树形控件选择了子节点如何同时获取父节点
this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys())
element-ui框架的el-dialog弹出框被遮罩层挡住了
解决办法:在el-dialog标签里添加 :modal-append-to-body='false'或append-to-body
编辑时表单中el-radio el-check无法点击选择的情况
form对象从row拿到的值没有包含当前属性 直接赋值的话就会出现这种情况
解决办法:用$set赋值 this.$set(this.form,'isMaxNums',this.form.IssueQuantity>10000?2:3);
2020.7.6再次遇到:self.$set(item,'radio',null); self.$set(item,'check',[]);
vue-cli项目build后 部署到服务器 css/js报404
修改config目录下index.js 里面的assetsPublicPath: '/' 为assetsPublicPath: './'
如何修改v-html内图片的或文字的样式
单独写一个style标签 加样式
vue-cli项目性能加载优化
1.vue-router路由懒加载(解决vue项目首次加载慢)
2.vue-cli代码包优化 屏蔽SourceMap(配置productionSourceMap: false)
vue页面数据更新后如何回滚到最顶部
刚开始用的scrollTo(0,0) 发现时灵时不灵 改进之后 先获取当前页面节点 再去滚动
document.getElementsByClassName('news_detail')[0].scrollTo(0,0);
elmentUI+vue实现多选框遍历数组对象
// 需要label的是整个对象 而不是具体的id或name
<template>
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="city in cities" :label="city" :key="city.id">{{city.cityName}}</el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data() {
return {
checkedCities: [{id: 1, cityName: '上海'}],
cities: [{id: 1, cityName: '上海'}, {id: 2, cityName: '北京'}]
};
}
};
</script>
// 以上写法 针对对象数组 有时候也无效 可用label去控制id 默认选中的checkedCities也给id数组
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="(city,index) in cities" :label="city.id" :key="index">{{city.name}}</el-checkbox>
</el-checkbox-group>