分类：VUE

2020
10-08

vue中解决拖拽改变存在iframe的div大小时卡顿问题

vue中解决拖拽改变存在iframe的div大小时卡顿问题 写在最前针对于在vue中实现拖拽改变两左右个div大小的方式，请查看上一篇文章《vue中实现拖动调整左右两侧div的宽度》。此文章主要针对于实际应用中需要拖拽改变大小的组件中使用iframe框架时存在明显卡顿的问题，比如这样，右侧div中使用了一个iframe组件，导致实际操作中出现两个问题，一个是拖不动，另外一个是无法根据鼠标移动，快速响应，甚至在监听鼠标的按下和松开事件上都有明显的卡顿问题。如果去除右侧iframe框架，则没... 继续阅读 >
2020
10-08

vue中实现拖动调整左右两侧div的宽度的示例代码

vue中实现拖动调整左右两侧div的宽度的示例代码 写在最前最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样这是我最终的实现效果还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下博客，《vue拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》，而我只是针对于他们提供的代码，加了亿点点自己所需要的细节。实现原理如上图所示，我们需要将要实现此功能的页面划... 继续阅读 >
2020
10-08

在vue中实现禁止回退上一步,路由不存历史记录

在vue中实现禁止回退上一步,路由不存历史记录 在有些情况下，我们不想往路由里添加历史记录。（vue的项目，vue-router中不想存历史记录）根据vue官网提供的，楼主总结了一下，主要有以下几种方案：根据官网的解释。声明式路由和编程式路由都是添加新的记录，同时vue还提供了replace来替换路由记录，从而实现路由不存历史记录的情况，以下是楼主总结的几种方法：1、声明式路由2、编程式3、原生js实现楼主晚上回去看了一下<js高程>，原生实现替换路由，不记录历史记录的方法wind... 继续阅读 >
2020
10-08

vue中el-input绑定键盘按键(按键修饰符)

vue怎么写键盘事件vue允许将按键值作为修饰符来使用，如监听回车事件，有两种写法，如下代码：<inputtype="text"@keyup.13="console.log($event)"></input><inputtype="text"@keyup.enter="console.log($event)"></input>但要注意的是：当我们在在el-input采用如上两种写法时，他是不生效的。el-input监听不到键盘事件,原因是element-ui是封装组件，所以el标签属于自定义标签，因此触发不了键盘事件。解决办法：加上.native原... 继续阅读 >
2020
10-08

解决VUE-Router 同一页面第二次进入不刷新的问题

解决VUE-Router 同一页面第二次进入不刷新的问题 最近正好遇到一个问题，修改用户的头像，修改后再进入用户主页，发现改了之后即使数据变了。。页面也不会重新渲染。。。下面提供几种解决方案来给予大家参考：1.可以在刷新的页面定义一个参数,这样每次都会渲染出不同的页面：route实例化命名配置：{//用户信息path:'/accountDetail/:randKey',name:'accountDetail',component:accountDetail,meta:{requiresAuth:true}},跳转的地方配置：varchars=['0... 继续阅读 >
2020
10-08

vue element 关闭当前tab 跳转到上一路由操作

vue element 关闭当前tab 跳转到上一路由操作 方法一this.$store.dispatch('delVisitedViews',this.$route);this.$router.go(-1);方法二this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item=>item.path===this.$route.path),1)this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length-1].path)补充知识：vue+element解决点击table列表的从详情或修改页面跳转路... 继续阅读 >
2020
10-08

基于 Vue 的 Electron 项目搭建过程图文详解

基于 Vue 的 Electron 项目搭建过程图文详解 Electron应用技术体系推荐目录结构demo（项目名称）├─.electron-vue（webpack配置文件）│└─build.js（生产环境构建代码）|└─dev-client.js（热加载相关）│└─dev-runner.js（开发环境启动入口）│└─webpack.main.config.js（主进程配置文件）│└─webpack.renderer.config.js（渲染进程配置文件）│└─webpack.web.config.js├─build（是文件打包使用的）│└─win-unpacked/││├─locales（... 继续阅读 >
2020
10-08

解决vue 给window添加和移除resize事件遇到的坑

在vue项目中需要监听window窗口变化来时时计算图片的高度，于是就加了一个监听事件；确实监听到了，但是在离开当前页面进入其他页面改变窗口大小时发现window还是处于监听状态，即移除监听事件并没有生效。//之前的写法，这样写移除监听事件无效mounted(){window.addEventListener('resize',()=>{'改变窗口大小时需要做的处理'});},beforeDestroy(){window.removeEventListener("resize");}后来查找... 继续阅读 >
2020
10-08

在vue中created、mounted等方法使用小结

created：html加载完成之前，执行。执行顺序：父组件-子组件mounted：html加载完成后执行。执行顺序：子组件-父组件methods：事件方法执行watch：watch是去监听一个值的变化，然后执行相对应的函数。computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值exportdefault{name:"draw",data(){//定义变量sourcereturn{source:newol.source.Vector({wrapX:false}),}},props:{... 继续阅读 >
2020
10-08

解决vue的touchStart事件及click事件冲突问题

解决vue的touchStart事件及click事件冲突问题 一、问题：今天遇到这样问题，给某个元素同时绑定touchStart及click事件后，若在移动设备上，当你点击时，会依次出发这两个事件。因为移动端设备上的click事件触发是会延迟300ms，所以touchStart事件会先触发后再触发click事件。这样导致每次都要执行两次，这样毫无意义。这里提醒下，PC是无法识别touch相关事件二、解决方式（1）preventDefault方法通过使用preventDefault方法（阻止元素默认事件行为的发生）来解决。在touchstar... 继续阅读 >
2020
10-08

解决Vue 移动端点击出现300毫秒延迟的问题

1.安装模块cnpminstallfastclick-S2.在main.js中引入，并绑定到bodyimportFastClickfrom'fastclick'FastClick.attach(document.body);当better-scroll和fastclick冲突的不能点击的时候：<slider><divv-for="iteminrecommends"><a:href="item.linkUrl"rel="externalnofollow"><!--当better-scroll和fastclick冲突的不能点击的时候，只需要加上class="needsclick",图片就可以被点击了，解决冲突的问题-->... 继续阅读 >
2020
10-08

解决Vue中的生命周期beforeDestory不触发的问题

分享一句很有用的经验：给router-view加了个keep-alive导致组件缓存了，所以不会触发beforeDestory和destoryed结束！补充知识：vuexactions正确使用vue-resource的方式(Errorinmountedhook:"TypeError:Cannotreadproperty'get'ofu)场景.SPA中使用vuex初始化一项数据,在vuex的actions中需要使用vue-resource使用的方式是actions:{setTaskList:function(store){leturl='http://zhihu.carsonlius_liu.cn/ap... 继续阅读 >
2020
10-08

vue 清空input标签 中file的值操作

template中：<inputtype="file"ref="pathClear"@change="onUpload"name="file"id="file">methods中：onUpload(){this.$refs.pathClear.value=''},补充知识：将inputfile的选择的文件清空的两种解决方案上传文件时,选择了文件后想清空文件路径，搜索了一下，用两种方法解决第一种varobj=document.getElementById(‘fileupload');obj.select();document.selection.clear();第二种varobj=document.getElementById(‘fi... 继续阅读 >
2020
10-08

Vue-resource安装过程及使用方法解析

1、安装npminstallvue-resource--save2、在main.js中添加importVueResourcefrom'vue-resource'//全局注册Vue.use(VueResource)3、vue-resource发送请求a）对象参数，post请求this.$http.post('http://127.0.0.1:8081/getUserByParam',{userName:this.username,sex:this.sex}).then((response)=>{}）b）get请求this.$http.get('http://127.0.0.1:8081/getUserById',{params:{id... 继续阅读 >
2020
10-08

vue中destroyed方法的使用说明

vue中destroyed方法的使用说明 我们从destroyed的字面意思可知，中文意为是“销毁”的意思，当我们离开这个页面的时候，便会调用这个函数(具体可以看看vue的的生命周期)，我们常用来销毁一些监听事件及定时函数，例如：//销毁监听事件destroyed(){window.removeEventListener('resize',this.resizeWin)}从上函数可知，当用户离开页面的时候便会销毁监听事件。补充知识：vue页面刷新时，执行了哪些生命周期——谨慎使用beforeDestroy和destroyed先来回顾一下... 继续阅读 >