vue
文章平均质量分 56
紫菀檀ss
我不迷茫,因为我有方向。
展开
-
报错 - If you are using vue-loader@>=10.0, simply update vue-template-compiler...
昨天在拉代码下来安装依赖成功后,对项目进行编译启动,结果报错- vue@2.6.14 (E:\项目xxx-mobile\node_modules\vue\dist\vue.runtime.common.js)- vue-template-compiler@2.7.10 (E:\项目\xxx-mobile\node_modules\vue-template-compiler\package.json)原创 2023-02-15 16:04:59 · 11027 阅读 · 1 评论 -
vue3+ts - element-plus封装上传文件图片组件
近期做到的项目中有涉及到上传图片上传文件的需求,因为是pc管理后台,用到了element-plus框架,所以我也一起使用element-plus中的上传图片上传图片功能,并对它进行封装成一个组件,方便在多个地方使用。原创 2023-02-07 14:23:51 · 6467 阅读 · 2 评论 -
vue3+ts - wangeditor 富文本编辑器的使用
近期开发的一个项目有涉及到富文本编辑器的使用,所以在这里总结一下。对比了一下网络上的多种富文本框组件,发现wangeditor组件相对来说功能比较齐全也比较简单,所以在这里我分享一下这个的使用方法。原创 2023-02-06 17:31:07 · 5254 阅读 · 1 评论 -
vue3+ts - 折线图和柱状图综合使用
近期,在做项目的时候有涉及到柱状图和折线图共同放在一个图表里面的效果,所以在这里简单总结一下,有需要的朋友们可自行参考。原创 2023-02-06 16:20:34 · 895 阅读 · 0 评论 -
vue3+ts - 折线图的使用
近期,在做项目的时候有涉及到折线图的模块,所以在这里简单总结一下,有需要的朋友们可自行参考。说到折线图这种图形模块,我们很自然的就想到了echarts 插件了,里面有格式各样的图形效果,可供我们使用。原创 2023-02-06 16:07:13 · 1101 阅读 · 1 评论 -
vue/js - 关于 echarts - 柱状图的使用
近期,在做项目的时候有涉及到柱状图的模块,所以在这里简单总结一下,有需要的朋友们可自行参考。说到柱状图这种图形模块,我们很自然的就想到了echarts 插件了,里面有格式各样的图形效果,可供我们使用。原创 2022-11-07 11:49:20 · 516 阅读 · 0 评论 -
vue3.0 - 报错Uncaught ReferenceError: exports is not defined
今天遇到了一个很奇葩的问题,就是在使用vue3.0的router的时候出现了 exports is not defined 的报错,尝试了很多方法都无法解决,后面看到一位大佬的文章说可以尝试着给router安装下一个版本npm install vue-router@next -D,当前我用的是"vue-router": "^4.0.0",然后我安装之后就没有报错了,但是当我重新安装回 4.0.0 版本的时候,这个报错也不存在了,我还是没找到照成这个问题的原因所在。不过如果大家遇到了这个问题,可以通过我上原创 2022-02-14 14:27:27 · 7101 阅读 · 8 评论 -
vue - vuedraggable的使用以及处理兼容问题(拖拽无效问题)
在实现一个移动端项目的时候,根据产品需求,要实现一个既能增加删除又可以拖拽调换位置的效果,然后我使用了draggable组件,然后发现放到手机上的时候苹果(ios)手机可以正常使用,但是安卓手机(例如华为pro40)的有些是不可以正常拖拽、增加和删除,只能一开始正常操作两三个,然后后面就怎么点都没有什么反应。通过多次尝试和查找方法,最终找到了解决办法,我在这里总结一下。一、效果图二、拖拽及点击无效解决方法 只需要在设置handle属性就可以了,vuedraggable的文档中有说明 optio原创 2021-10-20 18:26:59 · 8069 阅读 · 5 评论 -
vue - 实现省市区的级联选择
最近要实现一个pc端的省市区级联选择效果,省市区的数据都是使用的本地数据,实现起来逻辑会有一点复杂,我在这里总结分享一下,希望对大家有所帮助。一、效果图二、实现逻辑我这里的实现逻辑是先通过省份来获取城市,然后通过城市来获取区县,街道因为不是固定的,所以让用户自己输入。获取对应市区的逻辑是:每个省份、城市、区县都有唯一的编码,然后省份编码的前两位跟城市是一样的,通过截取的方式来筛选出城市,然后城市的前四位编码跟区县的是一样的,也同样通过截取的方式来筛选出区县即可。因为pc端我是使用了elemen原创 2021-10-20 11:16:59 · 4496 阅读 · 3 评论 -
vue3 - 将 axios 等方法绑定到原型上供全局使用
今天来说说在vue3 中如何将像axios这样的方法绑定到vue原型上供全局使用。我们用过vue2.x 都知道,在vue2.x中是通 Vue.prototype 来绑定的,像这样Vue.prototype.$toast = Toast。在vue3中取消了Vue.prototype,推荐使用globalProperties来绑定,所以下面我分享一下使用方式谦代码。PS:这里以axios为例,大家可根据需要稍做修改。一、设置全局 在使用axios之前,要记得先安装axios,然后在main.js文件中原创 2021-08-31 16:50:06 · 989 阅读 · 0 评论 -
vue3 - 父子组件之间的传值
近期学习 vue3 的父子组件之间的传值,发现跟 vue2.x的父子组件之间的传值 并没有太大的区别,我这边总结一下,希望对大家有所帮助。一、父组件向子组件传值 父组件向子组件传值的时候,子组件是通过props来接收的,如果在子组件中要放到setup函数中使用的话,就要先通过props接收到传递过来的参数,然后以变量的形式将props传递到setup函数中使用。如下图所示:1、父组件传递方式2、子组件接收方式和使用3、效果图二、子组件向父组件传值 vue3中子组件向父组件传递值和原创 2021-08-31 11:35:04 · 11944 阅读 · 7 评论 -
vue3 - setup函数的使用(一)
这两天学习了一下setup函数的使用,学到了一些比较基础的使用,所以在这里总结记录一下。一、setup函数的特性1、setup函数在beforeCreate和created之前执行 setup函数执行于beforeCreate和created之前,也就是说setup函数里面无法使用data和methods方法中的数据。这里我们可以打印一下它们的执行顺序:由上图我们可以看出来setup函数比beforeCreate和created先执行。2、在setup函数中定义的变量和方法需要return原创 2021-08-27 17:05:48 · 6896 阅读 · 0 评论 -
vue - v-html的使用
近期在写需求的时候get到一个新的知识点,那就是使用 v-html 编译后台返回的富文本内容,使它可以正常显示到页面中。大家可能不知道,在富文本编辑的内容,最终都会变成了 标签+内容 的形式来保存的,所以在其它地方使用到这一内容的时候,它是以字符串的形式传递过来的,此时我们就需要用到 v-html 指令来将标签编译。一、举个例子 这里举例是使用jsp实现了后台管理系统富文本编辑器,然后需要将在富文本编辑器中的内容返回给前端在移动端进行显示,如下图: 后台接口返回的数据是这样的:以属性值的方原创 2021-08-26 14:03:47 · 1929 阅读 · 0 评论 -
vue - vue3和vue2.x的区别(三):路由的使用
今天来总结一下vue3和vue2.x的区别 - 路由的使用。用了很久的 vue2.x 之后再来使用 vue3 ,我们不难看出它们二者之间创建路由的方式是不一样的。一、安装 vue-router 在使用 vue-router 之前我们需要先安装一下依赖,要注意 vue2.x和vue3使用的依赖是不一样的,不然会报错 export 'createRouter' was not found in 'vue-router'// vue2.x的安装方式npm install vue-router --s原创 2021-08-25 14:53:24 · 1572 阅读 · 0 评论 -
vue - vue3与vue2.x的区别(二):创建Vue应用实例
今天总结一下vue3与vue2.x的区别之 创建Vue应用实例。在开发vue3的时候,大家会发现,vue3的创建Vue实例和vue2.x的其实是不一样的,vue2.x是使用 new Vue() 来实例化的,而vue3是用了Vue中的 createApp() 方法来实例化的。同时,它们在全局使用的框架注入方式也不一样,下面我来详细介绍一下。一、创建 vue3 应用实例 vue3 是通过使用 createApp() 这个API返回一个应用实例,它可以通过链条的方式继续调用其他的方法来实现全局使用。原创 2021-08-24 15:19:30 · 686 阅读 · 0 评论 -
vue - vue3与vue2.x的区别(一) :目录结构不一致
今天总结一下vue3与vue2.x的区别之目录结构不一致,相对的也造成了一些问题的存在,比如打包项目之后打开出现白屏现象。一、目录结构不一致 通过上图可以发现 vue3 的目录结构跟 vue2.x 还是有很大的区别的,特别明显可以看出 vue3 是没有 build 和 config 这两个配置文件夹的,然后 static文件夹 在vue3 变成了 public文件夹,它们同样都是用于存放静态文件。二、造成的问题及其解决方法 当我们直接打包项目之后,打开对应的html文件,我们会发现页面出现原创 2021-08-23 18:18:51 · 1827 阅读 · 0 评论 -
vue - 开始vue3项目的搭建
近期开始学习vue3,所以在这里记录一下,主要使用的是脚手架的方式搭建的项目。注意点:我这里是直接在vue2.x的基础上全局安装vue3脚手架的,达到vue2.x和vue3可以同时使用的效果,所以跟官网的安装介绍会有所不同。一、环境搭建1、安装node环境 版本需要在8.9以上,包括8.9版本。可以使用 node -v 检查自己安装的node版本。2、搭建脚手架 vue-cli3.0 (全局安装)npm install @vue/cli -g可以使用 vue -V 检查是否安装成功。原创 2021-08-23 16:22:59 · 622 阅读 · 2 评论 -
vue - keep-alive 的使用
当不希望组件被重新渲染影响使用体验,或者处于性能考虑,避免多次重复渲染降低性能,希望组件可以缓存下来,维持当前的状态,此时就可以用到 keep-alive 组件。keep-alive 主要用于保留组件状态或避免重新渲染。 我们可以看到的现象:如果没有使用keep-alive组件,则在页面回退时仍然会重新渲染页面,触发 created 钩子,使得用户体验并不好。当然,使用这个组件的前提时页面的数据是保持不变的,不需要重新请求接口对数据进行更新。 keep-alive的生命周期:初次进入原创 2021-08-04 11:39:00 · 207 阅读 · 0 评论 -
vue/js - qs序列化插件的使用
一、安装: npm install qs二、引入全局 // 在main.js中引入 import qs from 'qs'; // 全局配置属性,将之挂在原型链上,在其他页面直接通过 this.$qs 使用即可 Vue.prototype.$qs = qs;三、使用qs的使用方式有两种,分别是qs.parse()和qs.stringify()1、qs.parse()方法的使用 qs.parse()是将url解析成对象的形式 使用例子: let str = "uid=cs11&am原创 2020-12-24 18:27:05 · 1411 阅读 · 3 评论 -
vue - 禁止input[number]输入 +、-、e 符号,并且只能输入两位小数
最近写的项目有要求通过键盘输入数字,不能输入 +、- 符号并且只能留两位小数,还有更高的要求:就是只能输入六位数字,控制最多只能输入三位整数,如果输入了四位包括四位以上的整数就要自动给它们加个小数点,变成小数。研究了许久才找到了解决方法,分享给大家参考使用。一、html代码<input type="number" v-model="inputVal" @input="changeInput" onkeyup="value=value.replace(/[^\d^\.]+/g,'').repla原创 2020-12-15 10:27:35 · 3143 阅读 · 0 评论 -
vue - 使用 html2canvas 将页面转为图片,实现分享功能
一、效果图:1、原页面:2、生成的图片:二、实现过程:1、首先写好页面:2、通过通过对应的id拿到要生成图片的部分,然后通过 html2canvas 转成图片,再调用原生(ios和安卓)的方法分享出去即可相关代码如下: // 生成海报 createPoster() { const vm = this; // vm.$loading.show({ // text: '加载中' // }) const domObj =原创 2020-11-10 10:08:59 · 1177 阅读 · 0 评论 -
vue - 关于组件中的img标签无法显示图片问题的解决方法
最近遇到了一个图片显示的bug,就是在vue项目中,做了一个查看图片的功能,这个图片是单独用一个子组件写的,然后通过父组件向子组件传值的方式将后台返回的base64图片传递给子组件显示图片,发现img标签的src属性要么显示unknown,就是无法帮图片放到src上面;要么就是直接连src这个属性都没有,但是我看组件的传值情况时,是有值传过去的。(ps:接口请求是直接在父组件里面请求的) 然后各种百度找解决方案,但是与我而言都是没有用的。一开始的时候我试着改用 jq 的方式动态设置src: $(原创 2020-10-19 09:33:56 · 4578 阅读 · 0 评论 -
vue - 使用SVG实现圆形进度条音乐播放
最近在使用vue做仿网易云音乐的项目,遇到了圆形进度条实现音乐播放的功能,所以我在这里总结一下,分享给大家我的实现方法。我这里主要是通过SVG的方式实现的。效果图:实现过程一、实现步骤圆形进度条的实现音乐播放/暂停的控制二、步骤分解 这里先放一下 audio标签引入音频文件的代码:<audio src="/static/audios/周兴哲 - 你,好不好?.mp3" @timeupdate="timeupdate" id="audio" @ended="ended">原创 2020-07-03 16:56:38 · 798 阅读 · 1 评论 -
vue - 实现购物车分类商品的单选和多选
今天用了一下空闲时间来实现了购物车部分商品的单选和多选,下面来个案例供大家参考:效果图:案例代码如下:<template> <div class="text"> <div class v-for="(item,index) in dataList" :key="index"> <div class="yesterday"&...原创 2020-03-05 16:50:22 · 1802 阅读 · 2 评论 -
vue/js - 实现页面自动往上滑动效果
最近做的新项目中要求让看不见的内容自动往上滑动一定的距离,使之可以看到,下面我来分享一下。效果图:我主要是使用 scrollTop 来做的往上滑动的功能,使用 animate 函数使之有一定的动画效果。下面是我的相关代码,大家可以参考:1、html代码<div class="bodyblockcons" :style="'padding-top:'+heightHeader+...原创 2020-01-02 15:04:06 · 4290 阅读 · 0 评论 -
vue - 搜索框组件的封装及使用
在写一个项目的时候,我们在多个页面会使用到搜索功能,这时我们一般都会选择直接写一个组件给多个页面一起使用,下面我给大家分享一下我的组件封装,如果不妥之处,请多多指教!1、子组件<template> <div id="searchblock" class="searching"&...原创 2019-08-05 14:46:38 · 5349 阅读 · 1 评论 -
vue - 实现图片拖拽效果
1.安装依赖包npm install awe-dnd --save2.main.js文件(全局)引入// 拖拽import VueDND from 'awe-dnd';Vue.use(VueDND);3.在使用图片拖拽的页面对应的循环的标签加上以下代码: v-dragging="{ item: item, list: masterImgList, group: 'index' }...原创 2019-07-31 17:02:13 · 4412 阅读 · 4 评论 -
vue - 父子组件之间的传值以及非父子组件之间的传值
父子组件传值在项目中非常常用的,一般遇到一样的模块,我们都会考虑做成一个公共组件,多个页面一起使用。同时,我们偶尔也会遇到非父子组件传值这种情况。下面我来介绍一下它们之间是怎么传值的。1、父组件向子组件传值 父组件向子组件传值时,子组件是通过 props 来接收父组件传递过来的参数的,下面举个例子: 子组件: <template> ...原创 2019-07-12 12:08:03 · 540 阅读 · 0 评论 -
vue - 使用qrcodejs2生成二维码
1、安装 qrcodejs2 npm install qrcodejs2 --save2、封装好的二维码组件 <template> <div class="qrcode"> <div class="qrcode_content" :id="name"></div> </div> ...原创 2019-07-09 15:09:23 · 16381 阅读 · 2 评论 -
vue - 使用$on和$emit相结合关闭自定义弹框
可以使用$on来监听当前自定义组件上的的自定义事件,然后通过$emit来触发这个事件1、utils文件: import Vue from 'vue'; export default new Vue;2、自定义弹框: import utils from "../../libs/Utils/utils"; mounted() { util...原创 2019-07-09 12:07:02 · 1810 阅读 · 0 评论 -
vue - 将数据存入vuex中以及从vuex中取出数据
1、在store文件下面新建文件 print.js ,写入以下代码 /** * 存放 ** 数据 * **/ // initial state const state = { all: { ID:'', BrandID:'' } } /...原创 2019-07-09 12:00:55 · 47541 阅读 · 9 评论 -
vue - 项目之路由封装
1、封装的路由代码块(LazyRouter文件) const lazyRouter={ routes:[], add(route,name,meta,viewpath){ this.routes.push({ path:route, name:name, ...原创 2019-07-09 11:53:08 · 3633 阅读 · 0 评论 -
vue - Vue.prototype.$xx和Vue.use()的使用详解
Vue.prototype和Vue.use()在项目中并不存在什么关系,主要是看个人喜欢的使用方式。下面我来说说我如何使用这两个的:1、使用Vue.prototype.$xx的情况 在做一个项目的时候,我会习惯性的将某些方法直接绑定到原型上面,然后直接通过this点出来就可以使用了,当然,这个是在多个页面都用到的时候我会选择这样做。 举个例子: 在main.js文件中写入: ...原创 2019-08-05 16:48:20 · 3031 阅读 · 0 评论 -
vue - 左右滑动选择日期组件的封装
现在做的项目中遇到了左右滑动选择日期的一个功能,然后我封装了一下这个组件,现在分享给大家看一下:效果图:1、安装dayjs日期文件npm install dayjs --save2、封装的组件:<template> <div class="m-calendar" ref="calendar"> <div class="m-toolbar"...原创 2019-10-10 11:54:27 · 2948 阅读 · 1 评论 -
vue - 自定义数字键盘组件的封装
最近做的一个项目需要自己写一个键盘,所以我封装了一下。1、封装的组件:(1)html文件<template> <div class="cuskeyboard" :style="cssStyle"> <div class="keyboardcon"> <div class="number"> ...原创 2019-09-20 14:36:18 · 1156 阅读 · 0 评论 -
vue - 实现单选和多选
1、效果图:2、具体实现过程:<template> <div class="demo"> <div :class="allChecked?'circle-full':'circle'" @click="radio('all')"></div> <div class="items" v-for="(item,index)...原创 2019-09-20 15:17:18 · 793 阅读 · 0 评论 -
vue -提示框组件的封装
1、效果图:2、子组件的封装<template> <div class="toast" v-if="toastStatus"> <span class="desc">{{tips}}</span> </div></template><script>export default { n...原创 2019-09-02 15:44:07 · 1136 阅读 · 0 评论 -
react、vue - 解决移动端点击事件300毫秒延迟问题(fastclick.js)
从点击屏幕上的元素到触发元素的点击(click)事件的过程中,移动端浏览器大约有300毫秒的等待时间,主要是想看后面是否还会再做点击操作(是否要进行双击操作),而fastclick.js就是为了解决这个问题。下面我来说一下使用方法:1、fastclick在react上的使用方式:(1)安装:npm install --save fastclick(2)使用:(写在全局的index.j...原创 2019-08-30 10:58:25 · 1202 阅读 · 0 评论 -
vue - 浅谈better-scroll的使用及注意事项
一、better-scroll的使用1、安装npm install better-scroll -S2、使用<template> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> <ul> <li v-for="(i...原创 2019-08-12 18:19:29 · 2112 阅读 · 0 评论 -
vue - 项目之评价星星组件的封装
当我们做的项目涉及到交易评价、电视评价、小说评价等方面的时候,我们大多都会选择根据客户评定的分数来对应显示评价星的选中与否,下面我来分享一下我所封装的评价星组件:1、封装star组件<template> <div class="star" :class="starType"> <span v-for="(itemClass,index) in item...原创 2019-08-12 11:49:54 · 808 阅读 · 0 评论