vue
骑上我心爱的小摩托
掉入程序员的前端
展开
-
vscode配置快捷键注释模板
本篇文章可以在vscode中配置快捷键显示代码的信息注释,如作者、描述、创建时间等。原创 2023-02-01 18:10:15 · 3445 阅读 · 1 评论 -
vue项目中实际构建echarts拓扑关系图业务
由于现在echarts的利用率增强,需要用到拓扑图的设计,如果单纯针对echarts文档来看,虽然可以利用API详细了解到功能点,但具体的实际运用与开发场景经验案例还是略有欠缺,下面将针对echarts关系拓扑图进行实例讲解。关系拓扑图,顾名思义,是有具体的关系存在的点,具有向量指向特点。那么就要求数据具备和的属性。思路是这样的,首先描绘物体(关系点),再者是描绘连接关系点的连线。简单效果图如上图,共4层类型,同一层为同一个类型,分别是:运维人员、数据库、应用、用户,连接线为起始到终点的指向关系2.测原创 2022-11-15 15:06:16 · 8893 阅读 · 1 评论 -
vue项目中实际封装DateRangePicker组件使用
日期选择器在实际使用中,可能会要求默认固定日期、回显日期或者是时间固定点(00:00:00到23:59:59)综上所述,可见当前日期范围选择器默认时间是今天设置时间点固定为起始的00:00:00到23:59:59快捷项也设置成当前模式,自定义起始和结束时间文案当前的获取时间格式为时间戳形式。原创 2022-11-11 15:58:09 · 2102 阅读 · 2 评论 -
基于el-table-infinite-scroll实现表格数据无限加载的功能
当表格组件的翻页不想局限通用的Pagination,也可结合无限滚动进行浏览加载数据主要是注意的绑定方法load的使用,以及disabled和有问题欢迎提问和私信,觉得有帮助的话,给个赞或者关注吧~原创 2022-11-11 15:30:22 · 7952 阅读 · 2 评论 -
Element中table组件根据属性合并行数据
在实际开发中,要求使用elementUI的table组件对表格数据上下行相邻相同的数据进行合并,在elem官网上查看到是有对应的组件和合并方法。其中官网的objectSpanMethod比较简单,根据每隔两行就合并两行的数据,并不能满足实际的需求,下面直接上代码。1、首先需要生成一个与行数相同的数组,通过判断上下数据是否相同,记录每一行设置的合并数。这里就是判断当前元素与上一个元素是否相同。原创 2022-09-27 19:12:59 · 958 阅读 · 0 评论 -
vue自定义指令添加跟随鼠标光标提示框v-tooltip
通过监听鼠标移入移出的mouse方法,设置浮层样式与出现时机。2、div显示dom标签v-tooltip。此时运行后,出现浮层。原创 2022-09-26 16:17:36 · 2741 阅读 · 0 评论 -
vue项目实现Echarts在label中获取点击事件
此时针对label进行点击后,还是无法获取点击事件,经检查,是未对yAxis添加label的event事件。在click点击事件内,可以打印出当前点击信息。应对需要点击label设置的属性添加。,此时label可进行点击。原创 2022-09-26 16:27:00 · 2699 阅读 · 0 评论 -
隐藏element-ui中tree懒加载叶子节点checkbox(分页懒加载效果)
css样式如下:由于属性是isleaf,所以lazy状态下叶子节点不会有加载目录符号,但此时,有个禁用复选框,现在只需要对它设置样式即可3. 分页懒加载实现功能也比较简单,可以复写tree树自带的load方法,load方法内携带两个返回参数,一个是node,一个是resolve,即懒加载数据必须是通过resolve就是return 将数据带回代码内有一点需要注意,即每次查询接口的时候,和后台约定的规则是:不包含分页,需要传值两个参数,一个是parent,即当前节点的上一级所有层级拼接,另一个是原创 2022-06-22 14:08:37 · 1350 阅读 · 0 评论 -
el-element Select组件onchange事件返回label和value问题解决
elem组件select原创 2022-06-08 10:03:10 · 3522 阅读 · 1 评论 -
Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
vue内写入sass样式后,npm run dev 后 报错提示“Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.”原因是 当前node-sass版本过高直接卸载node-sass后重新安装低版本npm uninstall node-sassnpm install node-sass@4.14.1重新启动后,界面恢复正常...原创 2021-08-18 12:51:24 · 1915 阅读 · 0 评论 -
解决Warning: [antdv: LocaleProvider] `LocaleProvider` is deprecated.报错提示
搭建vueCli使用antdv时,出现了这个报错提示,原因在于localeProvider已经被弃用了,只需要把标签换成提示的configProvider即可2. 修改标签 <a-locale-provider>为<a-config-provider><template> <a-config-provider :locale="zh_CN"> <div id="app"> <router-view v-wec.原创 2021-02-25 10:17:43 · 1775 阅读 · 1 评论 -
Vue与Unity 网页插件Embedded Browser交互通信
在运用中,需要将web导入到unity中使用(大屏端交互需求),此篇文章以unity网页插件Embedded Browser监听Web方法获取数据为例进行阐述。Web端:vue中新建需要导入渲染的界面,监听方法统一为getButtonClick,设定需求为web通过点击事件clickButton触发 <button type="primary" style="margin: 20px auto;" @click="clickButton">点击按钮</button>点原创 2021-01-21 14:07:09 · 2199 阅读 · 1 评论 -
mac中Sublime高亮vue语法代码以及解决无法找到Install Package命令
在开发前端过程中,我将sublime text 2.0 作为基本编码文件的阅读器,在打开vue文件时,出现了无高亮语法的情况,此时需要对sublime安装相关对语法插件Vue Syntax Highlight,方便阅读。1. 打开sublime,找到工具栏-命令面板 Tools->Command Palette…点击后,输入package Control:Install Package,此时可能无该命令,需要先对install package进行下载安装。2. 在官网中下载 https://pac原创 2020-11-02 11:37:36 · 755 阅读 · 1 评论 -
Vue与UnityWebGl交互通信(vue-unity-webgl的使用)
最近项目需要在可视化界面内添加unity3D文件并进行交互展示效果,特此整理如下:1.Vue 中自带 Unity3D的依赖包 vue-unity-webgl,进行安装npm install vue-unity-webgl --save//或使用 yarn add vue-unity-webgl --save2.将unity导出文件放在vue项目本地文件static下3.添加相应组件信息<template> <div> <unity src="../../原创 2020-10-29 17:49:27 · 9782 阅读 · 29 评论 -
electron+vue项目简单创建
当具有electron和vue的基础知识后,可以创建基于vue的electron项目electron-vue 充分利用 vue-cli 作为脚手架工具,加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等。在项目里已完成vue-cli脚手架的环境后:1. 新...原创 2020-03-19 21:32:58 · 2623 阅读 · 0 评论 -
vue项目中正确添加jquery
1.用了vue项目之后确实在处理html界面中的数据特别方便也适用,但是随之功能点的需求更新,发现vue项目也有实现不了的功能2.在界面中需要用到jquery的fullpage插件,此时还是需要在vue项目中导入jquery3.此时的导入jquery不像原来的script引入了,而是需要命令行安装以及配置数据此时若为cnpm则修改为cnpmnpm install jQuery...原创 2018-03-01 12:59:13 · 7033 阅读 · 0 评论 -
Vue路由引导-当路径路由出错
当路由填写出错或不存在时,可在router的路由界面中填写以下index.js内容:const routes = { { path:'*',redirect:'/' }}原创 2019-06-17 16:00:38 · 413 阅读 · 0 评论 -
Vue二级三级路由、路由守卫
一、二级路由和三级路由router/index.jsA路由设置针对二级路由或者三级路由的直接默认显示路由信息B引入路由信息二、路由守卫信息:全局配置守卫信息:main.jsrouter.beforeEach((to,from,next)=>{ //alert("还没有登录,请先登录"); //next(); //判断store.gettes.isLogin =...原创 2019-06-17 16:27:05 · 681 阅读 · 0 评论 -
ant design vue组件内的monthPicker月份选择器如何设置value值、取值与清零
ant design vue官方组件有些描述需要自己去反复尝试,现在遇到的monthPicker的设置value初始值,取值以及清零方法如下:初始情况下即为空状态,默认绑定到一个变量,且当前赋值为undefined<a-month-picker placeholder="起始月份" @change="onChangeMonthOpera" v...原创 2019-07-24 14:48:53 · 11584 阅读 · 2 评论 -
es6的foreach与some的循环遍历
1.foreach循环遍历直接上代码: result.value.forEach((item,index)=>{ console.log(index);})对于return,break不起作用2.some的循环遍历 let arr = [1,2,3,4,5,6,7] if (arr.some((item,index) => { ...原创 2019-08-15 14:49:44 · 1784 阅读 · 0 评论 -
Vue组件嵌套-全局/局部注册组件
一般都使用局部注册组件与使用Users.vue<template> <div></div></template>1.全局注册组件main.jsimport Users from './components/Users'Vue.component("users",Users);app.vue<users></u...原创 2019-06-15 17:29:35 · 770 阅读 · 0 评论 -
vue调试工具vue-devtools安装及使用
到github下载:git clone https://github.com/vuejs/vue-devtools.git在vue-devtools目录下安装依赖包:npm install在目录下修改mainfest.json文件信息将persistent修改为false之后在谷歌浏览器上选择加载已解压的拓展程序,将下方目录文件加载进去4. 即可完成配置信息,当启动vue项目后...原创 2019-06-20 10:23:11 · 257 阅读 · 0 评论 -
vue项目登录签名验证
1.登陆认证(demo版暂只支持手机号登陆)- 同时获取用户基本信息step1: app端通过appId向微信拉取authorization_codestep2:请求接口url created(){ //获取sessionStorge 数据 调用imToken,一般在调用到该界面后肯定是有数据的,及时获取到token数据 if (imToken() === nu...原创 2018-03-23 13:02:23 · 3992 阅读 · 0 评论 -
vue项目转移之后的生成依赖包
1.最近从gitos上面clone了代码之后,运行在新环境,但是vue项目启动失败,缺失依赖包。 2.最后的正确操作是删除module文件包,重新执行npm install 进行下载依赖包,具体的一些其他插件会根据报错提示就行npm 下载cd vue2.0/ npm install npm npm install –save mint-ui vue-awesome-swiper swip...原创 2018-03-11 13:40:33 · 3625 阅读 · 1 评论 -
vue中元素点击触发事件(无v-for父子关系)
1.在学习vue项目中,需使用如下需求:点击按钮后,遮罩层显示出来。本来若有v-for父子关系的,可以使用index进行循环遍历实现,而无关联的元素,则需要绑定类class来实现。2.对点击元素绑定方法<img src="../../static/pic/btn-info.png" alt="" class="btn-info" v-on:click="displayInfo"&...原创 2018-03-09 13:43:04 · 1013 阅读 · 0 评论 -
vue的路由router-link传参以及参数的使用
1.vue项目中使用router-link进行跳转以及传参a.组件传递参数<router-link :to="{ path:Links.linkitem, query:{ //传参 name:'chatchstate', state: statedata } }"></router-li...原创 2018-03-09 11:43:35 · 1226 阅读 · 0 评论 -
vue添加vue-awesome-swiper轮播组件
1.vue项目中添加swiper组件,也是很常见的,通常在jQuery中的方法,其实并不适用于vue项目。vue由于自身的框架性问题不依赖于jQuery,所以vue最好是用自己本身的swiper内置标签2.进入项目目录,安装swipernpm install vue-awesome-swiper --save3.在main.js中定义该swiper组件import Vue ...原创 2018-03-07 10:59:37 · 14335 阅读 · 5 评论 -
vue项目中的props数据存储
差点又被vue项目中的组件传值搞死,还好用了watch监听props的方法解决掉了1.需求诉求是:子组件1向子组件2传递数据,中间经过父组件起到公用组件的作用,子组件2作为接收数据时props:['msg']2.此时对于该数据的显示很简单即可表示为{{msg}}这个表示方法没问题的,但是对于想处理msg数据的情况下,是比较棘手的 刚开始使用了这几种方法return(...原创 2018-02-12 11:16:08 · 1864 阅读 · 0 评论 -
vue组件之间的数据传递
1.还在vue项目中慢慢爬坑,在vue项目中传递数据,其中有父组件向子组件,子组件向父组件,以及子组件之间的传递。2.其中子组件向父组件传递数据,即在子组件vue文件中定义触发方法,将值通过$emit的方式写function a.子组件navbar.vue点击tabbar_item时,触发clickFun方法,此处是要传递index<div class="weui-tabb...原创 2018-02-11 11:24:04 · 488 阅读 · 0 评论 -
已安装vue后,建立vue项目脚手架
1.对于已安装过vue后,按照流程来建立vue项目2.如图所示 容易忘记,将放在csdn里面记录了原创 2018-01-29 17:11:18 · 777 阅读 · 1 评论 -
vue项目js导入加载顺序
1.进入vue项目学习后,时常会出现js导入后的加载顺序不当的报错在引入的js中: var block = document.getElementById("block"); // 绑定touchstart事件 block.addEventListener("touchstart", function(e) {});2.由于界面是由上自下的形式进行解析加载的,此时若不是...原创 2018-03-14 14:13:26 · 10076 阅读 · 1 评论 -
vue项目setTimeOut和setInterval函数无效报错
1.在vue项目中的js代码语法与之前使用js和jquery还是有所出入的,现遇到一个点击按钮出现倒计时30S的效果相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行 需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器。2.按照最原始的倒计时效果,实现如下://获取30s 控...原创 2018-03-14 15:44:14 · 3094 阅读 · 0 评论 -
vue 计算属性computed方法内传参
遇到头疼的vue计算属性传参问题经过各种资料查找,亲测有效index.vue&lt;van-circle v-model="Ratedata[index].currentRate" color="#2462E8" fill="#fff" layer-color="#E6E6E6&quo原创 2018-10-16 15:44:18 · 30215 阅读 · 2 评论 -
No PostCSS Config Vue中启动后报错
1.新建的vue项目启动后报错No PostCSS Config found in: /Library/WebServer/Documents/WebserveProjects/shopapp-wechat/node_module2.此时需要对webpack 3.0进行配置postcss.config.js是针对webpack3.0做的特殊处理在项目根目录新建postcss.config...原创 2018-10-11 16:02:45 · 2018 阅读 · 2 评论 -
Duplicate keys detected: '1'. This may cause an update error. vue报错
1.报错信息 错误信息展示为关键字‘keys‘,此时应该检查for循环中的key,循环的key值不为唯一性<van-cell v-for="(item,index) in list" :key="item"> {{item}}</van-cell>此时应将item改为index,则不再报错了...原创 2018-09-08 21:55:49 · 35986 阅读 · 15 评论 -
vue中 import 、 export 和 export default 的注意问题
A.在公用js中,多个方法需要调用的话,可以在vue项目中进行export default,抛出一个变量,然后在vue中引入后来调用使用 1、common.js中```var common = {//密码检测 checkPassword:function(password) { }, //微信环境支持 verifyWechat:function () {...原创 2018-08-14 15:57:28 · 6369 阅读 · 0 评论 -
vue界面的title动态改变
vue项目中的各个界面有不同的title名称,如何能做到动态改变呢这里需要用到vue的内置插件wechat-title1.首先在项目中npm引入vue-wechat-title --save2.然后在全部导入,在main.js中进行初始化import VueWechatTitle from 'vue-wechat-title';Vue.use(VueWechatTitl...原创 2018-05-06 12:53:35 · 1852 阅读 · 0 评论 -
解决vue项目打包界面和背景图片报错 404
项目进展到最后,vue框架即将完工了,在最后到打包中,又遇到一个大坑npm run build在执行命令打包后,发现打开dist文件内的index.html后,界面空白,并且在控制台处报错为404,查找不到对应到css。此时为路径问题,解决方法为: 找到项目文件夹内到config –>index.js –>修改路径‘./‘ 此时重新打包即在浏览器可以完美打开了...原创 2018-05-05 23:25:23 · 6551 阅读 · 0 评论 -
vue路由检测回退与判断
使用vue项目在微信浏览器内的h5进行展示,此时的返回按钮为微信自带的返回按钮,在界面中能够使用vue钩子函数进行检测。如果需要在微信小程序内进行内嵌h5,微信小程序界面需要一些关闭界面按钮,来达到用户自身的界面关闭需求微信程序的路由回退检测: //离开当前页面 beforeRouteLeave(to, from, next) { ...原创 2018-05-18 16:10:47 · 14132 阅读 · 0 评论 -
vue项目中轮询状态更改(钩子函数)
在实际项目中,对于实时存储改变的数据,如果不是使用websoct,就需要使用到轮询,对于轮询实际是前端设置的定时器,不停存储获取数据并进行更改。而对于退出该界面后,轮询逻辑依然在定时器的执行中进行,此时需要用到钩子函数判断路由离开状态后,进行清除定时器 //离开当前页面beforeRouteLeave(to, from, next) { window.clearInterval...原创 2018-05-02 11:05:04 · 5226 阅读 · 0 评论