分类：VUE

2020
11-01

浅谈Vue使用Cascader级联选择器数据回显中的坑

业务场景由于项目需求，需要对相关类目进行多选，类目数据量又特别大，业务逻辑是使用懒加载方式加载各级类目数据，编辑时回显用户选择的类目。问题描述使用Cascader级联选择器过程中主要存在的应用问题如下：1、由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显，如何自动全部加载已选择类目的相关节点数据；2、提前加载数据后，点击相应父级节点出现数据重复等；3、使用多个数据源相同的级联选择器，产生... 继续阅读 >
2020
11-01

Ant design vue中的联动选择取消操作

Ant design vue中的联动选择取消操作 项目中会遇到需求就是table表格中选中在侧边展示，侧边删除，table中选中取消的联动选中ui框架：Antdesignvue组件：table和taghtml中<templatev-for="tagindataType"><!--key不能使用index--><a-tag:key="tag.id"closable:afterClose="()=>deleteDataType(tag.id)">{{tag.title}}</a-tag></template><a-table:rowSelection="rowSelection()":columns="columns":dataSource="filterTypeData":pagination="p... 继续阅读 >
2020
11-01

Ant Design Vue table中列超长显示...并加提示语的实例

我就废话不多说了，大家还是直接看代码吧~<template><a-rowclass="a-left"><a-row><pclass="a-title">今日考勤状况</p><a-rowtype="flex"justify="space-around"><a-col:span="4"class="block"><h3>出勤状况总览</h3>{{cntAll.cnt}}/<spanstyle="color:#F0FF00">{{cntAll.exceptionCount}}</span></a-col><a-col:span="4"class="block"><h3>管理人员出勤状况</h3>{{cntLeader.cnt}}/<spanstyl... 继续阅读 >
2020
10-30

Vue使用CDN引用项目组件，减少项目体积的步骤

Vue项目打包后有的文件动辄几百KB或几M，这对一个前端项目的加载无疑是致命的。当你的服务器部署在阿里云或亚马逊，每秒只有100kb的加载速度时，页面的载入速度绝对让你崩溃。那么有什么办法可以在依旧是100kb/s的加载速度下让我们的页面快起来呢？CDN算是其中之一的解决办法。首先，我们要明白为什么我的Vue项目在打包后产生的文件会那么大。我们在最开始使用Vue的时候几乎所有组件、插件的引用都会放到项目主文件中进行... 继续阅读 >
2020
10-30

vue+swiper实现左右滑动的测试题功能

vue+swiper实现左右滑动的测试题功能 最近在做一个测试题，前后可以切换题目，点击按钮选择答案，选择答案的同时改变按钮的背景色，如下图所示：初始代码我用了vue和swiper。所有的题目是一个对象数组，通过v-for渲染：<swiperref="mySwiper":options="swiperOptions"><swiper-slidev-for="(item,index)inlistData":key="index"><divclass="question-box"><divclass="idx">-第{{index+1}}题-</div><divclass="question">{{item.question}}</d... 继续阅读 >
2020
10-30

解决vue侦听器watch,调用this时出现undefined的问题

解决vue侦听器watch,调用this时出现undefined的问题 watch侦听器中，我们要将新的值赋给this.a出错watch:{value:(newV,oldV)=>{this.a=newV;}}这里报错undefined，这里错误的原因是不能写成箭头函数。写成箭头函数后，this会取上下文，而不是组件里面的this了，正确写法为：watch:{value:function(newV,oldV){this.a=newV;}}如下图:看考链接：https://cn.vuejs.org/v2/api/#watchPS：好吧，虽然问题可以解决，但是具体为什么不能写成箭头函数，讲实话，我现在也不... 继续阅读 >
2020
10-30

vue video和vue-video-player实现视频铺满教程

vue video和vue-video-player实现视频铺满教程 网页放置视频播放器，我一般都是用video.js和它的插件vue-video-player一：Video.js需求：对于简单的视频播放需求来说，video.js足以胜任了。它可是支持HTML5和Flash的视频播放器呦。1：安装video.jsnpminstall-svideo.js2:在main.js文件中引入相关文件importVideofrom'video.js'import'video.js/dist/video-js.css'Vue.prototype.$video=Video3:在组件中使用<template><divclass="video_text"><videoid="myVideo"... 继续阅读 >
2020
10-30

解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况

解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况 需求：项目中需要开发一个导航栏，类似浏览器的导航，没有关闭的时候页面缓存，关掉之后，页面随之销毁。（如图）项目是使用Vue+Vue-Router+Vuex刚开始使用的方法是：关闭导航标签，直接调用对应的页面的$destory()方法，OK，可以实现关闭页面（下次再打开该页面，将初始化）的功能，但是遇到个问题：该页面将不再被缓存，也就是说切换导航tab时，页面将不断的被初始化！！！查了一下文档，找了度娘，没发现解决方法，又去请教... 继续阅读 >
2020
10-30

vue 通过 Prop 向子组件传递数据的实现方法

vue 通过 Prop 向子组件传递数据的实现方法 这是一个通过Prop向子组件传递数据的小例子。代码：<!DOCTYPEhtml><htmllang="zh-cmn-Hans"><head><metacharset="UTF-8"><title></title><style>*{margin:0;padding:0;text-decoration:none;}</style></head><body><divid="app"><!--数据的渲染--><ul><student-componentv-for="iteminstudents":student="item"></student-compon... 继续阅读 >
2020
10-30

vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作

前言最近在做一个精品课程后台管理系统，其中涉及文件上传和文件列表展示，我不想将他们写入一个组件，故分开两个组件实现，但由于上传文件需要时间，这时要是用户切换别的组件查看时，上传文件组件就销毁了，导致文件上传失败，所以需要采取keep-alive技术实现不销毁上传文件组件，同时也由于系统模块较多，所以需要多组件进行嵌套。问题：多组件嵌套下如何指定对应的一个或多个组件存活呢？*tips：要是对于Vue使用keep-alive的基... 继续阅读 >
2020
10-30

vue使用keep-alive实现组件切换时保存原组件数据方法

vue使用keep-alive实现组件切换时保存原组件数据方法 前言最近在做一个精品课程后台管理系统，其中涉及文件上传和文件列表展示，我不想将他们写入一个组件，故分开两个组件实现。问题：但由于上传文件需要时间，这时要是用户切换别的组件查看时，上传文件组件就销毁了，导致文件上传失败。追求效果：想利用keep-alive实现上传组件切换时仍继续上传文件，而其他组件则不会存活。使用keep-alive的过程普通方法：直接使用keep-alive<keep-alive><router-view/></keep-alive>效果：虽然... 继续阅读 >
2020
10-30

vue内置组件keep-alive事件动态缓存实例

vue内置组件keep-alive事件动态缓存实例 在App.vue文件中配置<keep-alive><router-viewv-if="$route.meta.keepAlive"></router-view></keep-alive><router-viewv-if="!$route.meta.keepAlive"></router-view>在路由中配置{path:'/backstage',component:resolve=>require(['@/views/backstage/my'],resolve),meta:{keepAlive:false}},{path:'/backstage/info',component:resolve=>require(['@/views/backstage/my/info'... 继续阅读 >
2020
10-30

Vue自定义表单内容检查rules实例

Vue自定义表单内容检查rules实例 先看个例子组件<el-form-itemlabel="手机号:"prop="phone_number"><el-inputv-model="formPerson.phone_number"></el-input></el-form-item>script中exportdefault{data(){varvalidateMobilePhone=(rule,value,callback)=>{if(value===''){callback(newError('负责人手机号不可为空'));}else{if(value!==''){varreg=/^1[3456789]\d{9}$/;if(!reg.test(value)){callba... 继续阅读 >
2020
10-30

vue3.0搭配.net core实现文件上传组件

在开发Web应用程序中，文件上传是经常用到的一个功能。在Jquery时代，做上传功能，一般找jQuery插件就够了，很少有人去探究上传文件插件到底是怎么做的。简单列一下我们要做的技术点和功能点使用技术客户端使用vue.js3.0，并使用vue3新增的功能:CompositionAPI,服务器使用asp.netcore功能点标签美化文件预览文件上传服务器接收文件文件选择美化在标准的html文件选择标签，是十分不美观的。大概就是下图的样子但是我... 继续阅读 >
2020
10-30

vue 函数调用加括号与不加括号的区别

写在前面：最近做的一个项目用是很久之前的，在维护项目中就无法使用vue等技术来操作，所以一些方法用的是原生来写的，在绑定点击方法时，方法名没加括号，就没生效，加了括号就生效了，当时有疑惑的点是在之前做vue的项目中，我记得不加括号也是完全可以的，于是就详细的查了一下。原生方法调用函数在script里写方法，不加括号的话就相当于得到的是这个函数体，是这个函数本身，并不会执行函数<body><div>函数调用是否要加括号... 继续阅读 >
2020
10-30

Vue时间轴 vue-light-timeline的用法说明

Vue时间轴 vue-light-timeline的用法说明 轻量的vue时间轴组件installnpminstallvue-light-timeline如果你使用的是yarnyarnaddvue-light-timelineusageimportLightTimelinefrom'vue-light-timeline';Vue.use(LightTimeline);<template><light-timeline:items='items'></light-timeline></template>exportdefault{data(){return{items:[{tag:'2019-02-12',content:'测试内容'},{tag:'2019-02-13',type:'circle',... 继续阅读 >