分类：VUE

2020
12-29

Vue仿百度搜索功能

简述学习vue的第二节，由于2.0版本并不向下兼容，视频中的不少内不能实现。下面列出一些主要知识点//v-on可简写为@//事件冒泡是指当点击div内部的button触发show1()时，必然会冒泡到div上执行show2()，这才层级div中很常见//阻止冒泡，原生js法，设置事件对象的cancelBubble属性为true//vue方法@click.stop//阻止默认行为，原生js法，设置事件对象的preventDefault属性为true//vue方法@contextmenu.prevent//键盘事件获取... 继续阅读 >

2020
12-29

vue中watch的用法汇总

在vue中，使用watch来响应数据的变化。watch的用法大致有三种。1.常用用法<inputtype="text"v-model="name"/>newVue({el:'#app',data:{name:'咸鱼'},watch:{name(newVal,oldVal){//...}}})直接写一个监听处理函数，当每次监听到 name值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：watch:{name:'nameChange'}2.立即执行(immediate和handler)第一种用法watch有... 继续阅读 >

2020
12-27

浅析vue中的nextTick

背景vue是异步渲染的，当data改变之后，DOM不会立刻被渲染，页面渲染时会将data的修改做整合，多次data修改只会做整合最后一次性渲染出来，这也是异步渲染的原因。只有异步渲染才可以实现整合操作。例子methods:{update(){for(leti=0;i<10;i++){this.testNum=this.testNum+i;}},},在你的Vue视图中，testNum会发生变化。不过需要注意的是这个变化的过程，虽然我们把firstNum循环修改了10... 继续阅读 >

2020
12-26

vue 使用 sortable 实现 el-table 拖拽排序功能

本文给大家介绍vue使用sortable实现el-table拖拽排序功能，具体内容如下所示：npm下载：npminstallsortablejs--save引入：importSortablefrom"sortablejs";代码：<template><divclass="table"><el-tableref="dragTable":data="tableData"border:row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-colu... 继续阅读 >

2020
12-26

在vue项目中封装echarts的步骤

为什么需要封装echarts每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置，十分冗余在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作可能有一些开发者忘记考虑echarts更新数据的特性，以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新，窗口缩放引起echarts图形变形问题我希望这个echarts组件能设计成什么样业务数据和样式配置数据分离，我只需要传入业务数据... 继续阅读 >

2020
12-26

vue中封装axios并实现api接口的统一管理

在vue项目中，我们通常都是使用axios与后台进行数据交互，axios有很多好用的特性，这里不多做介绍，相关细节可以查阅axios中文网。在对axios进行封装之前，我们要使用vue脚手架工具创建一个vue项目（这里我用的是cli4）。安装cnpminstallaxios--save-dev;//安装axioscnpminstallqs--save-dev;//安装qs模块，用来序列化post类型的数据，否则后端无法接收到数据模块引入在src目录下创建一个service目录，用于存放接口封装... 继续阅读 >

2020
12-26

Vue 简单实现前端权限控制的示例

简要说明最近写了一下vue控制权限(菜单、路由)的项目，用了vuex、addRoutes动态添加路由方法等，总共100多行代码，跟大家分享一下~逻辑梳理除登录接口、退出接口外，其余接口增加token验证。打开页面时请求获取菜单接口，请求不成功说明未登录，给route默认添加login页面以及*重定向。登录成功后获取到token，把token存入session以及请求头。登录成功后获取菜单接口，请求回来的路由和vuex里面全部的路由进行匹配，获取c... 继续阅读 >

2020
12-26

Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法

我测试过很多遍,想要通过a标签的形式来直接点击url下载文件并重命名但是都失败了,最终只能下载却不能重命名所以换了java后台来修改名字.以下代码我做的网页是点击文件直接下载直接下载下来了,一开始的文件名是上传到oss时以id命名的名字,现在下载的时候想改名,遇到了问题,所以写了这篇博客首先是后台代码/***附件下载*<p>**@paramparam*@returnResponseDTO*/@PostMapping(value="/download")publicvoidd... 继续阅读 >

2020
12-26

vue使用require.context实现动态注册路由

需求场景：在日常的功能练习和调试过程中，需要一个demo项目进行功能测试，由于频繁.vue页面的同时，又要再router.js文件里面注册路由，感觉有点无聊和枯燥。基于此出发点，考虑能否自动读取文件夹下的文件进行路由注册。借鉴思路：参考vue的功能基础组件的自动化全局注册，看到一个require.context方法，可以读取某个文件夹下的文件信息。因此考虑，使用这个方法，获取views文件夹下的.vue页面，文件夹名称作为路由名称require.co... 继续阅读 >

2020
12-26

vue 使用rules对表单字段进行校验的步骤

在实际开发过程中，发现以下的写法比较累赘，因为在后面的项目中，继续优化表单验证的方法，让代码更简洁。主要的修改是验证方法的修改和调用以前验证表单字段的最大长度，description:[{max:200,message:'最大长度为200个字符',trigger:'blur'}]现在写法：description:[validateLen(200)]其中，validateLen是我封装的一个方法。使用步骤：1、在uitls文件夹中新建一个validate.js文件。2、定义需要验证的方法... 继续阅读 >

2020
12-26

vue 实现基础组件的自动化全局注册

参考官网：https://cn.vuejs.org/v2/guide/components-registration.html在日常开发中，有一些组件是比较常用，但是为了避免在开发过程中不停地引入，或者在main.js中注册，，或者每添加一个组件就需要手动注册一次。则直接进行自动化全局注册。自动化全局注册，官网上都详细的说明，以下是自己官网的说明基础上进行了一个demo开发实例：1、自定义文件夹：在src下新建一个components文件夹，用于存放组件。并新建一个用于存放需要... 继续阅读 >

2020
12-26

vue 使用class创建和清除水印的示例代码

页面添加水印的方法有很多，以下举例使用class定义的方法进行水印内容渲染：1、新建文件：WatermarkClass.jsexportdefaultclassWatermarkClass{constructor({id="watermarkID",str="",fontSize=18,width=400,height=400,fillStyle="#333333",opacity=1}){this.id=id;this.str=str;this.fontSize=fontSize;this.width=width;this.height=height;this.fillStyle=fillSt... 继续阅读 >

2020
12-24

基于vue+echarts数据可视化大屏展示的实现

获取ECharts的路径有以下几种，请根据您的情况进行选择：1)最直接的方法是在ECharts的官方网站中挑选适合您的版本进行下载，不同的打包下载应用于不同的开发者功能与体积的需求，或者您也可以直接下载完整版本；开发环境建议下载源代码版本，包含了常见的错误提示和警告。2)也可以在ECharts的GitHub上下载最新的release版本，解压出来的文件夹里的dist目录里可以找到最新版本的echarts库。3)或者通过npm获取ec... 继续阅读 >

2020
12-24

vue+openlayers绘制省市边界线

本文实例为大家分享了vue+openlayers绘制省市边界线的具体代码，供大家参考，具体内容如下1、创建项目vueinitwebpackol_vue2、安装ol依赖包npminstallol3、引入axiosnpminstallaxios--save文件目录：src/main.jsimportVuefrom'vue'importrouterfrom'./router'importAppfrom'./App'importaxiosfrom"axios";//添加实例属性：不想污染全局作用域，在原型上定义它们使其在每个Vue的实例中可用。prototype向对象... 继续阅读 >

2020
12-24

vue项目中openlayers绘制行政区划

vue项目中openlayers画行政区划（区域范围），供大家参考，具体内容如下原理在地图上画需要的范围，实际上就是在地图上打上一圈点，然后依次将这些点用线连接，就形成了范围引用相应的ol模块importVectorLayerfrom'ol/layer/Vector'importVectorSourcefrom'ol/source/Vector'import{Map,View,Feature}from'ol'import{Style,Icon,Stroke}from'ol/style'import{Point,LineString,Polygon}from'ol/geom'获... 继续阅读 >

2020
12-24

Vue+penlayers实现多边形绘制及展示

本文实例为大家分享了Vue+penlayers实现多边形绘制展示代码，供大家参考，具体内容如下<!--*@Description:绘制多边形*@Author:Dragon*@Date:2020-12-1716:02:06*@LastEditTime:2020-12-1817:20:33*@LastEditors:Dragon--><template><div><divclass="query-wrap"><el-buttontype="primary"@click="drawStart('Polygon')">{{isDraw?"绘制区域":"重新绘制"}}</el-button></div><divi... 继续阅读 >