vue相关
...
湾流~
这个作者很懒,什么都没留下…
展开
-
vue 音频播放功能
【代码】vue 音频播放功能。原创 2023-06-20 21:30:00 · 1616 阅读 · 0 评论 -
html2canvas 生成图片并将图片上传为网络链接
// 上传图片 videoFile(file) { let params = new window.FormData() let fileOfBlob = new File([file], new Date().getTime() + '.jpg') params.append('file', fileOfBlob) uploadImgFile( params).then(res => { console.log('上传结果', res原创 2022-09-24 17:51:29 · 1149 阅读 · 1 评论 -
vue 中使用节流和防抖(触发事件中&watch中使用)
/* * fun [function] 需要防抖的函数 * delay [number] 毫秒,防抖期限值 */export function debounce(fun, delay = 300) { let timer; return function () { let ctx = this let args = arguments if (timer) { clearTimeout(timer) } timer = setTimeout原创 2022-09-24 17:49:41 · 1656 阅读 · 0 评论 -
vue 使用keep-alive 让返回页面不重新刷新(页面缓存)(保持组件状态)
官方说明vue keep-alive 官方说明示例1.在路由配置页添加meta信息 { path: '/XXXXXXX', component: XXXXXX, meta:{ keepAlive:true //需要缓存的页面 }},2.在app.vue 中使用keep-alive包裹需要缓存页面的视图组件<keep-alive> <router-view v-if="$route.meta.keepAlive" /><原创 2022-04-21 17:21:40 · 3529 阅读 · 0 评论 -
vue 生成二维码并点击按钮下载功能
安装qrcode依赖npm install qecode页面部分<canvas id="qrcode" ref="qrcode" width="200" height="200"></canvas><a href="javascript:;" @click="downloadCode"> 下载二维码</a href="javascript:;"><script>import qrcode from "qrcode"; //引入qrc原创 2022-01-25 23:15:04 · 1159 阅读 · 0 评论 -
vue-cli 2.0/3.0+ vue build打包生成的文件中运行index.html报错Failed to load resource: net::ERR_FILE_NOT_FOUND 白屏
问题执行npm run build 生成的打包文件运行index.html 报错,上线不能正常显示内容解决办法vue-cli 2.0在build / webpack.prod.conf.js 文件 output参数配置 publicPath:’./’, 重新build即可vue-cli 3.0 及以上1.在vue.config.js 文件中 修改成 publicPath: ‘./’module.exports = { publicPath: './', //改成此路径 2.在原创 2022-01-10 23:29:04 · 782 阅读 · 0 评论 -
vue 一键复制粘贴文字功能
1/下载 clipboard 依赖npm install clipboard --save2/在功能页面写如下代码<template> <div style="margin:10px auto;" v-for="(item,index) in ringTemplete" :key="index" class="article" > <el-card class="box-card"> <h1>原创 2021-10-17 23:52:57 · 833 阅读 · 0 评论 -
js 电话号码脱敏,固话或移动号码或文字中夹杂的号码中间用*号替代
效果图处理代码98765432171//导出一个 desensitization 方法export function desensitization(strInfo){ let reg = /\d{7}/; //验证一个长度为7的整数 let str = strInfo; //将传入的包含电话号码的形参strInfo赋值给变量str let str2 = str.split('').reverse().join('') //数据翻转 为了使号码后三位是明码 let arr =原创 2021-08-22 00:07:20 · 1363 阅读 · 0 评论 -
vue 循环向数组里push进数据,视图没有更新
如下代码,将myringList里的数据循环遍历出来,子元素Type=7的,就将这个元素push进movieList数组的data属性中,这种方法数据视图是不会更新的this.myRingList.forEach(function(item){ if(item.Type==7){ this.movieList.data.push(item) }else{ this.musicList.data.push(item) }})这是可以创建原创 2021-08-15 23:15:04 · 3650 阅读 · 0 评论 -
vue 父组件使用sync修饰符直接获取子组件传来的值
子组件触发事件//事件名前加updatethis.$emit('update:showDialog', false) 父组件 sync修饰符<child :showDialog.sync="showDialog" /> //此时showDialog的值为子组件传来的值false原创 2021-04-22 23:41:22 · 333 阅读 · 0 评论 -
vue自定义指令在实际开发中的使用
创建一个文件来管理所有的自定义指令src/directives/index.js在src/directives/index.js文件中定义几个指令//改变文字颜色指令export const fontColor={ //dom元素节点 options包含传入的属性对象 inserted(dom,options){ dom.style.background=options.value }}// 改变文字大小指令export const fontSize = { inserted原创 2021-03-15 00:57:43 · 168 阅读 · 0 评论 -
vue图形验证码的生成和实现校验功能(附源码)
思路1.创建生成图形验证码的组件2.在main.js中全局注册图形验证码组件3.封装一个验证码校验的js文件4.使用vue.prototype实现验证码校验全局变量5.在表单页中 5.1 使用标签直接引入图形验证码组件 5.2 在onShow页面初次渲染完成生命周期中调用组件中生成验证码方法 5.3 点击提交表单函数中,调用判断封装函数,将用户输入信息作为实参传入,可以得到一个布尔返回值 5.4 返回值为false时,重新生成图形验证码1.创建生成图形验证码的组件com原创 2021-02-26 23:59:41 · 2068 阅读 · 0 评论