vue
违规昵称001
这个作者很懒,什么都没留下…
展开
-
vue 生成二维码插件 vue-qr使用方法
【代码】vue 生成二维码插件 vue-qr使用方法。原创 2023-02-21 17:47:41 · 732 阅读 · 0 评论 -
vue 实现自由拖拽功能组件 vuedraggable 使用
vue 实现自由拖拽功能 vuedraggable组件原创 2022-12-27 18:33:21 · 608 阅读 · 0 评论 -
vue使用lodash 节流防抖
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时 假设设置防抖两秒,点击一次,在两秒内再点击第二次,就会重新计这两秒,(就像王者里面的回城)相当于两秒内的最后一次点击生效。原文链接:https://blog.csdn.net/Technology_hands/article/details/126684261。参考链接:https://blog.csdn.net/Technology_hands/article/details/126684261。,两秒内点击的其他次数不生效。原创 2022-11-18 18:37:46 · 3079 阅读 · 0 评论 -
element ui中使用 mixin.scss文件(单文件使用,多文件使用)
1.首先新建mixin文件mixin.scss//滚动条样式@mixin scrollbar($width, $border-radius) { overflow-y: auto; scrollbar-width: thin; &::-webkit-scrollbar { width: $width; } &::-webkit-scrollbar-thumb { border-radius: $border-radius; box-sha原创 2022-04-28 14:58:51 · 644 阅读 · 0 评论 -
axios配置 request中添加token
有时候会遇到后台无法自动将token写入浏览器的情况,此时就需要前端手动携带token1、首先在登陆之后在localStorage中存储token值localStorage.setItem('token')2.然后在axios配置文件里做配置axios.interceptors.request.use( config => { if (localStorage.getItem('token')) { // 如果后台要token这么写: config.hea原创 2022-04-10 18:04:15 · 8961 阅读 · 0 评论 -
js 数组实现上移下移功能
arr:[]数组index:当前item所在下标//上移if (arr.length > 1 && index !== 0) { var temp = arr[index - 1]; //上移:当前item与上一个交换位置 arr[index - 1] = arr[index]; arr[index] = temp; }//下移if( arr.length > 1 && index != arr.length - 1 ) {原创 2022-04-01 18:38:00 · 612 阅读 · 0 评论 -
element-ui vue input输入框自动获取焦点聚焦
有时候会遇到要输入框自动获取焦点的情况,解决如下:方法一:步骤:1.在script中写directives,注册一个全局的自定义指定 v-focus directives: { focus: { inserted: function(el) { el.querySelector("input").focus(); } } },2.在input框直接使用<el-input ... v-focus></el-.原创 2022-02-28 14:50:59 · 5139 阅读 · 0 评论 -
vue element-ui 键盘输入enter键 触发事件
因为有时候会遇到因为有父级的影响事件不生效的情况,所以需要加.native<el-input class="input-new-tag" v-model="item.nameValue" size="mini" placeholder="请输入名称" :maxlength="20" v-focus @keyup.enter.native="nameConfirm(item)" > </el-input>有时候层级过多,各元素相互影响原创 2022-02-28 14:37:44 · 2614 阅读 · 0 评论 -
js 将秒格式化为 时分秒
picTime(val) { var hh = parseInt(val/3600); if(hh<10) hh = "0" + hh; var mm = parseInt((val-hh*3600)/60); if(mm<10) mm = "0" + mm; var ss = parseInt((val-hh*3600)%60); if(ss<10) ss = "0" + ss; var length..原创 2022-02-22 15:44:18 · 592 阅读 · 0 评论 -
vue 滚动定位、锚点跳转 到指定元素位置scrollIntoView
html<div v-for="(item,index) in xx" :key="index" :id="'audioTime1'+ Object.values(item)[1]"></div>滚动方法 // 滚动 goAnchor(selector) { // console.log(selector) // console.log(this.$el) //id的形式 this.$el.querySelector原创 2022-01-11 18:08:44 · 1980 阅读 · 0 评论 -
vue 数组、对象的循环渲染
1.数组循环渲染<div v-for="(item,i) in arr" :key="i"></div>//item:数组每一项//i:数组下标,从0开始2.对象的循环渲染<div v-for="(item, key, i) of object" :key="i"></div>//item: 对象的每一项的value值//key: 对象每一项的key值//对象循环下标,0开始...原创 2022-01-07 18:09:03 · 1811 阅读 · 0 评论 -
js保留n位小数 不四舍五入
formatDecimal(num, decimal) { num = num.toString() let index = num.indexOf('.') if (index !== -1) { num = num.substring(0, decimal + index + 1) } else { num = num.substring(0) } return parseFloat(num).toFixed(原创 2022-01-07 11:23:39 · 704 阅读 · 0 评论 -
vue 给某个div设置回到顶部
1.对某个div设置了滚动,想要回到顶部的情况这种情况下一定要找到是在哪个元素下设置的overflow滚动,就在哪个元素下加方法一.在当前页面无法使用ref获取元素时候,可以使用jq简单实现:1.安装jq,引入jqimport $ from 'jquery'2.在对应触发时间里写滚动效果$(".el-main").animate({ scrollTop: 0 }, 100);方法二.对设置了滚动的元素加ref然后进行设置this.$refs.xxx.scrollTop = 02.原创 2021-12-23 18:44:19 · 2805 阅读 · 1 评论 -
vue 查看大图插件 vue-photo-preview
图片小图的状态太过模糊,所以需要一个放大查看的工具,vue-photo-preview试了一下很好用使用方法:1.安装:npm install vue-photo-preview --save2.使用:首先在main.js中引入import preview from 'vue-photo-preview';import 'vue-photo-preview/dist/skin.css';Vue.use(preview);然后直接使用<img :src="areaMajorArt原创 2021-12-09 16:23:26 · 1387 阅读 · 0 评论 -
element-ui el-select 超出用...表示
如图所示,el-select 组件中当内容过长,想要选择框中的内容省略,用…表示,.el-input__inner{ padding: 0 20px 0 10px; border: 1px solid #DCDFE6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: normal; white-space: nowrap; }写了如上代码发现只有.原创 2021-09-23 10:42:30 · 3276 阅读 · 4 评论 -
element-ui 被el-tooltip包裹的标题,点击跳转后 回到原页面不消失的处理(弹出后不消失)
图1:图2:bug场景:如上图1所示,标题只展示一行,外层包裹tooltip,鼠标移入展示全部,当点击标题时,新打开一个详情页面。当从详情页面再切换到原列表页面时,tooltip仍然停留,没有消失,只有在页面有其他行为时才消失。测试提出了这个bug,最终我找到一个解决方法解决elementui el-tooltip,在弹框之后再次出现的问题参考这个方法成功解决了问题代码如下:1.新建clearTabIndex.jsconst vueClearIndex = {}/** 解决tool原创 2021-09-23 10:30:52 · 4266 阅读 · 5 评论 -
elementui 日期选择器 el-date-picker 设置当前日期的月份在最后面,不显示下个月
如上图所示,当前日期是8月份,需求要求9月份就不要显示了,不友好,并且当前日期后面的不可点击效果如下图:需要设置default-value默认值代码如下:<el-date-picker v-model="date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" pref.原创 2021-08-30 14:32:57 · 2664 阅读 · 0 评论 -
关于前端视频下载我踩过的坑
1.项目框架:vue2.需求:项目需要下载大的视频文件3.视频下载踩坑日记方法1. 遇到这个需求我首先用a标签去模拟一个点击事件想通过这种方式来实现点击下载let link = document.createElement('a'); //创建a标签link.href = url //添加链接link.download = url.split('/')[url.split('/').length -1] // // 给文件加下载文件的名字document.body.appendChild(原创 2021-08-11 14:29:48 · 3487 阅读 · 3 评论 -
elementui el-autocomplete 当输入建议调用了接口后为空时,输入建议的下拉框一闪而过然后为空,去掉这个状态的解决方法
如图所示,要实现在没有数据的时候就不要闪下面这个加载中,解决方法步骤:1.el-autocomplete自带的属性 debounce(输入建议的去抖延时),把它设为02.写自定义样式让所有下拉列表隐藏:.el-autocomplete-suggestion{display:none;}3.在querySearch函数中让数据不为空的下拉列表显示(实现方法是通过自定义class名,然后让指定的class显示)代码如下 <el-autocomplete pop.原创 2021-06-11 09:51:43 · 5647 阅读 · 1 评论 -
echarts 宽度写成百分比后只显示100px的问题
vue项目里用到了echarts,但是发现渲染出来的宽度只有100px,设置的100%宽度不生效后来找了很久的原因,发现是因为配合使用了 element-ui的tabs切换导致的,tab下的内容默认是display:none,所以echarts的父级宽度为0,就默认是100px了尝试了好几种解决办法,最终我的解决方案是写了一个空的100%宽度的div在tabs外面,这样能保证在渲染的时候这个div的宽度有了,然后再通过dom操作的方式将echarts的宽度绑定到这个div上,这样就能起到100%宽度的效原创 2021-06-11 09:35:56 · 1571 阅读 · 0 评论 -
vue项目上线后请求接口url自动拼上了本地ip地址
原因一开始忘了加http://导致的,加上就好了原创 2021-06-11 09:23:51 · 3433 阅读 · 0 评论 -
vue 引入js文件中的方法,在html中使用报错的问题
1.创建了一个common.js2.引入到vue文件中3.在html使用它4.发现报错5.解决报错,只需要在methods中声明一下它原创 2021-05-21 10:13:59 · 1098 阅读 · 0 评论 -
node-sass安装总报错的问题
node-sass 的安装命令npm install node-sass --save-dev尝试了很多种办法,安装淘宝镜像等等一系列操作都不行比如:npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install node-sass --save-dev//安装淘宝镜像 npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-原创 2021-04-07 15:28:30 · 3695 阅读 · 2 评论 -
vue项目(vue-cli3搭建的)每次启动端口都会增加1的问题
最近发现我的项目(vue-cli3搭建)每次重新执行 npm run serve 启动端口都会自增1,查了网上的原因才发现原来端口被占用了,原来的服务没有真正的被关闭,解决方法:执行 netstat -aon|findstr “8080” 查看端口是否被占用 如果被占用说明服务没有真正被关闭1.打开任务管理器,手动关闭node任务(我的解决办法)再次执行 netstat -aon|findstr “8080”,就正常了2.portfinder的问题(没试过)执行npm install port原创 2021-04-02 14:21:32 · 1642 阅读 · 1 评论