vue
文章平均质量分 51
沐子凡
简单不失真
展开
-
vue 根据不同条件切换多个class
vue 根据不同条件切换多个class需求:根据后台返回的数组长度显示不同数量的视频,比如我这边需要显示数量分别为:1个、2个、4个、6个四种不同数量的视频格式方法:利用vue的计算属性动态赋予不同类名数组格式为videolist:[ { id:1, video: 'https://ymr-test.oss-cn-hangzhou.aliyuncs.com/testVideo/be5a7186-1f7b-45b2-b843-4b6eb6e9d原创 2022-01-11 13:26:54 · 2395 阅读 · 0 评论 -
elementUI 动态增减表单并非空验证
elementUI 动态增减表单并添加了非空验证效果图如下后端返回详情接口样式动态表单验证关键在prop的对象一定是当前我们数据定义的,比如我的是headId:prop="‘dynamicItem.’ + index + ‘.heatId’":rules="{required: true,message: ‘请选择领导人’,trigger: ‘change’,}"所以总结起来的语法就是:prop="‘v-for绑定的数组.’ + index + ‘.v-model绑定的变量’"页面模块&原创 2022-01-10 10:31:27 · 896 阅读 · 0 评论 -
在quill编辑器中集成秀米和135编辑器
在quill编辑器中集成秀米和135编辑器需求说我们的编辑器太丑了,让添加秀米或者135这种好看的编辑器,好嘛,大工程,不敢怼需求只能开干因为我们项目里用的是quill的编辑器,秀米官网声明只支持ueditor内核的编辑器。如果项目里用的编辑器不是ueditor内核的,指定要加秀米135的功能,按照这个博主文章一路操作下来,还是很感谢期间博主的解答(该博主github仓库地址:https://github.com/font-size/quill-xiumi-135)这是做好之后的样子接下来的就是原创 2021-12-16 17:55:43 · 2222 阅读 · 1 评论 -
解决swiper首次加载不轮播的问题
解决swiper首次加载不轮播的问题这两天利用swiper做轮播图遇到了数据动态首次加载成功后轮播图不自动轮播的问题,查了一些其他的教程说改一下谷歌浏览器的配置就好了,这对程序猿而言很不严谨初始化的配置的轮播代码如下:页面代码如下<swiper ref="mySwiper" :options="swiper_opt_station" @setTransition="setTransition" > <swiper-slide class="swiper-slide"原创 2021-12-16 14:07:40 · 5051 阅读 · 0 评论 -
vue升级报Syntax Error: TypeError: Cannot read property ‘parseComponent‘ of undefined
vue升级报Syntax Error: TypeError: Cannot read property ‘parseComponent’ of undefined关于:将vue手动2.6.11改成2.6.14,重新安装依赖,在运行时报错原因:vue-template-compiler 升级版本后 parseComponent函数已被删除,导致 component-compiler-utils报错解决方案:修改packge.json文件,将vue-template-compiler和vue版本一致原创 2021-11-15 10:48:16 · 1035 阅读 · 0 评论 -
element-ui之级联选择器(Cascader)的使用详细教程
实现效果1.后端返回的json数据格式[ { "id": "2", "name": "北京市市辖区", "shortName": "北京", "level": 2, "parentId": "1", "childrenRegionVo": [ { "id": "105", "name": "石景山区",原创 2021-11-08 14:48:39 · 12890 阅读 · 1 评论 -
报错】\node_modules\node-sass: Command failed.
vue安装依赖时报错报错】\node_modules\node-sass: Command failed.解决办法:1.npm重新换个一下淘宝镜像npm install -g mirror-config-china --registry=http://registry.npm.taobao.org2.npm安装node-sassnpm install node-sass3.之前安装的记得卸载掉,如果没有可忽略这一步npm uninstall node-sass4.安装依赖npm原创 2021-08-12 13:19:40 · 13091 阅读 · 0 评论 -
js处理时间格式(时间格式化、获取上个月或者下个月日期、获取上周日期、获取指定日期的前一天后一天)
js+vue处理各种时间格式(时间格式化、获取上个月或者下个月日期、获取上周日期、获取指定日期的前一天后一天)首先引入了一个好用的时间插件npm install dayjs --save在需要的页面引入import dayjs from 'dayjs';// 时间戳 格式化export function formatDate(time) { if (time) { const date = new Date(time); const Y = `${date.getFull原创 2021-08-02 13:20:53 · 1625 阅读 · 0 评论 -
ElementUI的日期选择器对日期进行限制
一:需求每月的1日-8日可录入上个月的数据,8之后只能录入当月的数据。比如当前是9号,可选范围是当月的1号到当前的9号;比如当前是5号,可选范围是上个月的1号到当前的5号;二:条件限制需求理清了,需要安装个时间处理的小插件 npm install dayjs --save在需要的页面引入import dayjs from ‘dayjs’;三:代码实现限制需求理清了,需要安装个时间处理的小插件 npm install dayjs --save在需要的页面引入import dayjs fr原创 2021-07-15 18:13:49 · 505 阅读 · 0 评论 -
iview-admin 2.0 多环境配置打包
前提:iview-admin 2.1.0比起iview-admin 2.0.0,移除了config目录且将vue-cli升级到3.0。 所以可以使用vue-cli 3.0的环境变量和模式特性来支持多环境配置打包tip:要先明白development、test和production是NODE_ENV的默认环境变量,所以不要使用自定义NODE_ENV。通过配置不同的指令给项目设置不一样的环境配置。环境变量文件中各个属性的用途如下:NODE_ENV使用的是production的打包配置VUE_AP原创 2021-06-23 09:50:32 · 1796 阅读 · 0 评论 -
解决:VUE项目Avoided redundant navigation to current location问题
标题解决:VUE项目Avoided redundant navigation to current location的问题这是vue3.0路由重复点击导致的报错,不影响页面正常跳转但是对于程序员看到红色就难受的代码洁癖来讲还是忍受不了的解决方式1、查看router的版本是否为3.0,不是的话,在项目目录下运行 npm i vue-router@3.0 -S 或者 yarn add vue-router@3.0 -S 将vue-router改为3.0版本,也可以直接在package.json文件修改配原创 2021-06-09 21:50:41 · 1105 阅读 · 0 评论 -
vue 项目使用swiper插件
vue 项目使用swiper插件1.安装插件npm install vue-awesome-swiper -save 或者 yarn add vue-awesome-swiper2.在main.js中全局引入import 'swiper/dist/css/swiper.css'import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper) 3.在html模块添加<swiper :options="原创 2021-06-05 10:19:33 · 835 阅读 · 0 评论 -
vue3.0 pc端自适配方案
1.引入插件使用yarn或者npmyarn add px2rem-loader -Syarn add postcss-px2rem -Snpm install px2rem-loader -Snpm install postcss-px2rem -S2.vue3.0由于没有build配置文件,在根目录新建文件vue.config.js(用来解决跨域或者配置文件)const autoprefixer = require ('autoprefixer');// 引入等比适配插件const p原创 2021-05-13 16:16:13 · 1105 阅读 · 1 评论 -
vue-cli3.0 脚手架搭建项目
vue-cli3.0 脚手架搭建项目1.安装vue-cli3.0首先查看一下我们的vue版本需要先卸载掉旧版本 npm uninstall vue-cli -gnpm uninstall vue-cli -g安装3.0脚手架npm install -g @vue/cli# oryarn global add @vue/cli安装成功查看版本 vue-V如果出现安装失败或者提示errno 4048,是权限问题,使用管理员身份执行,记得重复2,3两步(多试几遍就好了)2.创建项目原创 2021-05-12 17:58:13 · 364 阅读 · 0 评论 -
iview+vue 省市区三级联动
iview+vue 省市区三级联动利用iview的下拉框实现三级联动功能省市区的所有数据是一个json文件。类似于这种格式的,自己可以在项目里引入(需要可以留言)话不多说上代码首先在data中定义初始化变量,我是为了方便将省市区的变量放到model对象里,然后定义addressOptions的数组接受省市区的所有数据,cityOptions是用来接受市的数组,countiesOptions是用来接收县或者区的数据,model: { provinceName:'',//省原创 2021-04-24 15:57:41 · 4135 阅读 · 28 评论 -
uniapp APP第一次下载进入首页前的用户服务协议和隐私政策的授权弹窗
uniapp APP第一次下载进入首页前的用户服务协议和隐私政策的授权弹窗app上应用市场里需要几个条件,需要第一次下载并进入首页前展示用户协议和隐私政策弹窗提醒, 以及在应用内版块有常驻入口(就是应用里有可以看到这个协议的版块), 登录或者注册页面也需要有同意服务协议和隐私政策的提醒.用户协议和隐私政策弹窗提醒:1.在uniapp项目manifest.json文件的源码视图中,找到app-plus2.在app-plus节点下,添加privacy "privacy" : {原创 2020-07-28 14:28:45 · 11801 阅读 · 24 评论 -
vue项目利用pdf.js预览pdf文件步骤及跨域问题
最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如vue-pdf(跨域以及分页会有很多问题)最后选择了pdf.js插件(兼容ie10及以上、谷歌、安卓,苹果),强烈推荐该插件,以下介绍用法1.首先去官网下载pdf插件,我这里用的是稳定版本官网地址:http://mozilla.github.io/pdf.js/getting_started/#download2.将整个文件...原创 2020-04-02 14:41:00 · 10787 阅读 · 6 评论 -
h5的vue项目vantUI--tab切换或者筛选条件时上拉加载不触发上拉load事件
最近利用vue和vantUI写h5的项目,遇到的问题总结:问题:vantUI–tab切换或者筛选条件时上拉加载不触发上拉load事件loading为false是加载中,finished为true是已结束状态,onLoad是执行函数(分页添加list的值)这是我的页面 created () { this.getDataList('COMPREHENSIVE', 0) //记得第一次...原创 2020-03-02 11:27:15 · 2205 阅读 · 2 评论