VUE
shimh_凉茶
把工作中遇到的问题总结一下,与己方便,与人方便
展开
-
Vue用query传值,布尔值变字符串问题
用this.$route.query传值,true和false会转成string类型,导致Boolean值失效。可用eval() 函数进行转换。原创 2024-01-26 16:01:22 · 1036 阅读 · 0 评论 -
js实现web页面扫描二维码(html5-qrcode)
js实现web页面扫描二维码(html5-qrcode)原创 2023-02-07 16:36:29 · 4214 阅读 · 0 评论 -
vite全局批量获取文件内容 globEager
例如在vite+avue3前端工程中,在每个模块单独陪你路由,然后通过一个总的router js文件集中调取所有文件模块的文件内容原创 2023-01-13 15:53:12 · 1200 阅读 · 0 评论 -
飞书小程序调用图片预览功能(图片+pdf)
使用飞书小程序提供的API预览功能只能预览普通图片如果想实现打开pdf需要调用下载和打开文件两个方法原创 2023-01-13 15:19:54 · 1023 阅读 · 0 评论 -
输入金额校验(数字非负数保留2位不四舍五入)
输入金额,限制只能输入非负数,保留2位小数,且不四舍五入原创 2022-12-12 09:37:10 · 833 阅读 · 0 评论 -
axios 应用级二次封装
axios应用级二次封装,放上去就能开发了原创 2022-11-16 09:39:29 · 202 阅读 · 0 评论 -
vue跳转路由进度条nprogress
vue跳转路由进度条原创 2022-08-12 16:03:15 · 250 阅读 · 0 评论 -
less方案实现主题切换 window.less.modifyVars
less方案实现主题切换 window.less.modifyVars原创 2022-07-01 15:01:51 · 3827 阅读 · 6 评论 -
微前端 阿里qiankun
微前端 阿里乾坤的官网和demo原创 2022-06-27 10:00:00 · 380 阅读 · 0 评论 -
递归删除数组中指定数据
递归删除数组中指定数据需求未想把菜单中隐藏的菜单项删掉,需要通过标识递归查找并删除vue项目可以直接粘贴至methods里使用memuList(arr){ if(arr.length>0){ for(let i = arr.length-1; i>=0; i--) { if(!!arr[i].hidden){ arr.splice(i,1); } else if(!!arr[i].children){原创 2022-05-07 19:23:13 · 701 阅读 · 0 评论 -
el-table拖拽之sortablejs
el-table拖拽之sortablejs可实现行拖拽和列拖拽代码简单易懂无冗余原创 2022-03-23 09:15:42 · 4292 阅读 · 3 评论 -
无缝滚动组件 vue-seamless-scroll 的使用
1.安装npm install vue-seamless-scroll --save2.代码块html<vue-seamless-scroll :data="dataList" :class-option="seamlessScrollOption" class="seamless" @ScrollEnd="ScrollEnd"> <ul> <li v-for="(item, index) in dataList"原创 2021-11-28 13:20:58 · 253 阅读 · 0 评论 -
VUE中el-input阻止冒泡防止触发父级事件
@click.stop.native后面如果不执行函数或语句就不用跟 ‘=’ 号了原创 2021-09-02 14:43:56 · 3496 阅读 · 0 评论 -
vue-cli3打包构建js,css使用hash解决缓存问题
1.webpack中hash、chunkhash、contenthash区别hash: 如果都使用 hash 的话,因为这是工程级别的,即每次修改任何一个文件,所有文件名的hash至都将改变。所以一旦修改了任何一个文件,整个项目的文件缓存都将失效。chunkhash: 根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保原创 2021-06-21 18:01:32 · 2801 阅读 · 0 评论 -
el-checkbox 全选数组对象
注意v-model选中的是id列表, 这里取的是label中的值<template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" > 全选 </el-checkbox> <div style="margin: 15px 0;"></div> &l.原创 2021-01-15 09:56:10 · 1184 阅读 · 0 评论 -
js实现打印 print.js
如果单纯实现打印整个窗口, window.print() 就能实现,但是我们往往要打印一个区域或者说一个div块由于print打印的是整个窗体,所以我们要把打印区域变成窗体,所以我们需要一个库,来实现这些事下面介绍 2种 方式使用print.js库实现打印第一种: (可加上样式)安装npm install print-js --save引入import print from 'print-js'使用–html部分<div> <p>test prin.原创 2020-12-25 15:53:32 · 4035 阅读 · 0 评论 -
axios获取的文本流无法使用问题
遇到个需求,axios请求的文本流post或get请求,拿出来的流都无法使用,使用form直接html标签请求是没问题的,但是不能自定义文件名,需要a标签的方式传入文本流和文件名实现下载解决responseType 设置为 ‘blob’这是关键一步this.$axios({ url, // 设定文本流形式responseType: 'blob' })设置完加载出来的文本流就可以正常使用了...原创 2020-12-03 09:45:24 · 399 阅读 · 0 评论 -
element el-radio 点击触发两次问题
解决:// html<el-radio-group v-model="radio" @click.native="click"> <el-radio :label="1" >备选项</el-radio> <el-radio :label="2">备选项</el-radio></el-radio-group>// jsclick(ev){ if (ev.target.tagName === "INPUT原创 2020-11-18 15:06:06 · 614 阅读 · 0 评论 -
el-select获取选中的对象
1.value设置为选中的item对象2.设置 value-key<el-select v-model="value" filterable placeholder="请选择" value-key="id" @change="changeSel"> <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item"></el-option></el-selec原创 2020-09-23 23:36:25 · 3986 阅读 · 0 评论 -
vue 中el-card点击事件失效解决
click后面加 .native@click="open(0)//替换为@click.native="open(0)@click.native 的作用:给组件绑定原生事件原创 2020-09-11 17:51:33 · 1792 阅读 · 0 评论 -
vue props 属性值接受多个类型
vue props 属性值接受多个类型直接上代码:someData: { type: Array | Object, default () { return [] }}...如果我们自己写不限制类型的props,可以使用数组的形式props:['someData']但是有时我们做已经搭好的框架,里面组件比较成熟都能直接用,但是发现别人写的组件里限制了类型,这时候我们由于业务需求想扩展组件功能增加一些类型,这时我们就需要用到第一种方法了希望这篇帖子能帮到你!...原创 2020-09-08 16:57:14 · 9613 阅读 · 3 评论 -
VUE 组件重新渲染(组件重载)的3种方式
VUE 组件重新渲染(组件重载)的3种方式我们在开发过程中页面状态变化时,有时会需要一部分组件重新渲染,让这些组件里的生命周期重新走一遍下面提供 3种 方式1.使用 v-ifv-if可以实现 true (加载)和false(卸载)// html <CompTable ref="CompTable" v-if="tableShow"/>// jsdata() { return { tableShow: true, }}method: { // 触发更新事件原创 2020-09-08 13:13:54 · 35422 阅读 · 14 评论 -
vue实现页面跳转过渡效果 transition
vue实现页面跳转过渡效果当我们做移动端页面的页面跳转时,不想让页面跳转的那么生硬,所以需要添加过渡效果html部分(name=“fade” 这是关键一步,fade 是自定义class名的一个标识)<transition name="fade"> <keep-alive> <router-view></router-view> </keep-alive></transition>css部分(fade-ente原创 2020-08-03 12:28:40 · 2021 阅读 · 0 评论 -
el-row文字换行后实现整行自动撑开
el-row文字换行后实现整行自动撑开element-ui 使用el-row展示param数据时,经常会有返回值文本过长,导致文字换行把单元格撑开,这事如果不设置任何属性,会导致lable单元格和值单元格高度不统一实现单元格高度自适应需要在 el-row 设置 type=“flex” 属性就可以了<el-row type="flex"> <el-col :span="6">姓名:</el-col> <el-col>张三</el-col&原创 2020-07-27 19:06:37 · 4169 阅读 · 2 评论 -
js编辑器插件中实现sql格式化 sql-formatter
js编辑器插件中实现sql格式化 sql-formatter一个需求,编辑器中返回sql语句,产品要求凡是sql格式的语句必须进行格式化要知道这个格式化插件是个单独的插件,并不是原本编辑器中的一个方法1.首先下载插件npm install --save sql-formatter2.使用// 先引入import sqlFormatter from 'sql-formatter';// 使用例子const oldValue = 'SELECT * FROM users';const原创 2020-05-14 19:12:15 · 6289 阅读 · 2 评论 -
el-select 默认值显示value不显示label问题
el-select 默认值显示value不显示label问题在做编辑页面时需要取到列表项数据回显默认值在做select回显的时候遇到了这个问题明明拿到的值和value中的值一样但是就是不转换成label这种情况一般出现在value为数字的情况原因是返回的数字和el-option选框里value值的类型对应不上一个是 Numer 一个是 String所以就不转换了检查一下统一类...原创 2019-09-27 18:07:31 · 9385 阅读 · 0 评论 -
vue devtool 安装-最简步骤
vue devtool 安装-最简步骤vue devtool是chrome的一个调试VUE项目的插件如果使用的话需要单独安装扩展安装完 打开F12控制台就会显示 vue 调试项安装 vue devtool 过程分为三步:1.下载2.改参数3.配置到浏览器1.下载下载地址: https://github.com/vuejs/vue-devtools先执行:npm instal...原创 2019-09-12 10:48:45 · 2197 阅读 · 3 评论 -
VUE 深度监听
VUE 深度监听在vue中通过watch进行值的动态监听值变化的时候会触发回调函数用来处理所需业务默认情况下在改变量首次加载的时候是不触发回调函数的如果想在 首次加载的时候就触发需要设置 一个参数 immediate而如果你监听的不是一个值而是一个对象那么你需要进行 深度监听实现 深度监听需要 设置参数 deep使用方式看下面例子watch: { // 这是监听作用域 ...原创 2019-09-11 11:57:58 · 193 阅读 · 0 评论 -
CSS scoped下的深度作用选择器
CSS scoped下的深度作用选择器在vue中css作用域中如果添加 scoped 属性那这些样式就 只能作用于当前组件不能直接操作子组件的样式比如<template> <div id="app"> <el-input v-model="text" class="text-box"></el-input> </d...原创 2019-08-22 18:27:13 · 314 阅读 · 0 评论 -
vue数组更新问题
vue数组更新问题vue 包含的数组操作方法(变异方法)将会触发视图更新push() 从数组末端添加项pop() 从数组末端删除项shift() 从数组头部删除项unshift() 从数组头部添加项splice(index,num) 删除 ,num希望删除元素的数量sort() 排序reverse() 反转vue 不能检测变动的数组情况有 两个1.利用索引直接设置...原创 2019-08-01 21:02:11 · 404 阅读 · 0 评论 -
VUE 兄弟组件通信
VUE 兄弟组件通信首先VUE并没有给兄弟组件直接通信封装任何方法,如果是兄弟组件或者更复杂的组件之间传值我们可以使用VUEX进行状态管理但是有一次取58同城面试问我如果不用VUEX,兄弟组件怎么传值我当时比较紧张,一下子有点蒙我回答的是使用mixins方式,双方传入一个公共js在公共js中定义一个数据对象进行通信(这个方案我当时也不十分确定,面试官当时听我说完好像也是有点儿懵,假装...原创 2019-07-17 21:21:10 · 283 阅读 · 0 评论