vue
Uncle_long
这个作者很懒,什么都没留下…
展开
-
VUE-CLI3全局引入less的变量
在使用Vue开发的过程中,通常会用到一些样式的全局变量,如果在每个组件中引入就太繁琐了,维护性也不好,因此全局引入是个不错的想法。下面以less为例,记录一下全局引入less变量的步骤:1、首先安装依赖在项目根目录的命令行工具里,执行以下命令。 1 npm i style-resources-loader vue-cli-plugin-style-resou...转载 2019-11-25 18:32:44 · 413 阅读 · 0 评论 -
Element UI 的el-input同时绑定@keyup.enter.native和@blur冲突
问题: el-input框同时绑定键盘事件和blur事件,造成两次提交Before:keyup事件触发后,blur同样会被触发,造成两次提交handleInputConfirm方法。<div class="keyword-content"> <el-input class="input-new-tag" v-i...转载 2019-11-21 17:45:28 · 3355 阅读 · 0 评论 -
Vue Drag and Drop
1.设置 div 元素允许拖拽draggable="true"2.设置元素拖拽开始事件@dragstart="drag(item.data)"<div style="border:1px solid green;" draggable="true" @dragstart="dragstart($event, item.data)" @dragend="dragend">...转载 2019-10-25 16:19:50 · 537 阅读 · 0 评论 -
element-ui 解决 table 里包含表单验证的问题!
https://www.cnblogs.com/Kummy/p/9470393.html转载 2018-12-20 19:50:14 · 4088 阅读 · 0 评论 -
vue数组中对象属性变化页面不渲染问题
// Vue.set Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice example1.items.splice(indexOfItem, 1, newValue)原创 2018-12-21 15:19:24 · 2022 阅读 · 0 评论 -
Vue中定义全局函数
方法一: //在mian.js中写入函数Vue.prototype.changeData = function (){ alert('执行成功');}//在所有组件里可调用函数this.changeData();方法二: // 写好自己需要的base.js文件exports.install = function (Vue, options) { Vue...原创 2019-01-21 16:11:59 · 705 阅读 · 0 评论 -
Vue项目中出现Loading chunk {n} failed问题的解决方法
由于项目里面用到了vue-router,vue-router的错误处理函数 onError 是不是能够捕获该错误呢?我们来看一下官方文档的说明:当在渲染一个路由的过程中,需要尝试解析一个异步组件时发生错误。 完全符合我们场景,所以在onError方法中我们实现如下代码:router.onError((error) => { const pattern = /Loading ...转载 2019-01-30 15:19:40 · 16686 阅读 · 6 评论 -
vue中自定义触屏事件,点击、滑动、左滑、右滑、下滑、上滑、长按
主要思路为,首先监听触屏事件touchstart这样可以获取用户点击屏幕的位置,然后监听touchend与touchmove事件这样可以获取用户触屏结束后的位置,这样就可以计算出用户在屏幕上滑动的方向。最后通过vue的自定义事件,将事件注册为全局的事件。、这样整个页面都可以使用触屏事件了。具体的代码为function vueTouch(el,binding,type){//触屏函数...转载 2019-03-26 08:50:06 · 5944 阅读 · 1 评论 -
NodeJs/Vue项目中对process.env的使用
NODE_ENV获取环境变量let env = app.get('env')let env = process.env.NODE_ENV//默认 NODE_ENV 为环境变量名称//可自行在 process.env 对象下定义需要使用的变量,在项目中可以根据//不同的 env 值设置 defaultUrl 或者其他值在webpack 打包的项目/Node JS项目中,可以安装 ...转载 2019-04-25 17:03:15 · 1543 阅读 · 0 评论 -
axios 上传显示进度
使用onUploadProgress实现let self = thisthis.axios.put(this.uploadUrl, this.files[0], { headers: { 'Content-Type': 'multipart/form-data' }, transformRequest: [function (data) { return d...转载 2019-07-24 14:31:12 · 762 阅读 · 0 评论 -
关于vue使用Element组件时v-for循环里的表单项验证的方法
这篇文章主要介绍了vue使用Element组件时v-for循环里的表单项验证方法,内容挺不错的,现在分享给大家,也给大家做个参考。 标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了。首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API...转载 2018-07-27 14:35:47 · 4497 阅读 · 4 评论 -
Vue 不能检测变动数组的情况
当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue当你修改数组的长度时,例如: vm.items.length = newLength 为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果, 同时也将触发状态更新:// Vue.setVue.set(example1.items...原创 2018-05-28 15:21:00 · 391 阅读 · 0 评论 -
vue keep-alive用法
1.基本用法vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗<keep-alive><component> <!-- 组件将被缓存 --></component></keep-alive>有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的在使用keep-aliv...原创 2018-03-22 17:14:35 · 894 阅读 · 0 评论 -
vue mapState的用法
import Vue from 'vue'import Vuex from 'vuex'import mutations from './mutations'import actions from './action'import getters from './getters'Vue.use(Vuex)const state = { userInfo: { phone...原创 2018-03-26 17:27:09 · 3654 阅读 · 0 评论 -
vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递。 首先需要在任意地方添加一个bus.js 在bus.js里面 写入下面信息1 import Vue ...转载 2018-04-03 10:04:14 · 215 阅读 · 0 评论 -
element-ui里,对于通过v-for渲染的el-form-item组件,使用自带的表单验证
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email" label="邮箱" :rules="[转载 2018-05-09 18:05:48 · 33022 阅读 · 4 评论 -
vue 修饰符sync
在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符,...转载 2018-05-17 10:03:44 · 793 阅读 · 0 评论 -
Vue中利用swiper实现自动轮播功能
前端工作中轮播图是必不可少的,最近一个项目需要在vue项目中插入轮播图,很多条数据显示n个,自动向上滚动,无缝连接,以前用过很多次swiper轮播插件,所以立马上手,以为手到擒来,结果。。。异步获取数据后初始化swipernew Vue({ el: "#networkWarningCounts", data: { ...原创 2018-05-25 11:52:04 · 2638 阅读 · 0 评论 -
解决vue-cli element-ui打包报错Unexpected token: operator (>)
1.问题描述我vue-cli写了项目,界面都是用element-ui写的,打包时报错:ERROR in assets/js/0.498ce690b229694d8858.js from UglifyJsUnexpected token: operator (>) [./~/element-ui/src/mixins/emitter.js:2,0][assets/js/0.498ce690b...转载 2018-05-16 14:36:26 · 6661 阅读 · 0 评论 -
vue 使用clipboard实现复制功能
在vue中使用clipboard.js 时候发现一个问题,如果移动端不是input或者button,则复制不成功,使用步骤如下1. 引入clipboard.js[html] view plain copynpm install clipboard --save 2. 在需要使用的组件中import[javascript] view plain copyimport Clipboard from ...转载 2018-06-04 14:20:07 · 2251 阅读 · 0 评论 -
路由元信息
我们在做网站登录验证的时候,可以使用到beforeEach 钩子函数进行验证操作,如下面代码 ,如果页面path为’/goodsList’,那么就让它跳转到登录页面,实现了验证登录。router.beforeEach((to, from, next) => { if (to.path === '/goodsList') { next('/login') } else ...转载 2018-03-22 16:46:56 · 205 阅读 · 0 评论