分类：Vue

2020
12-05

浅谈Vue使用Elementui修改默认的最快方法

浅谈Vue使用Elementui修改默认的最快方法 相信大家都需要过，在Vue中使用Elementui的时候，遇到最多也最蛋疼的问题就是修改默认样式，接下来直奔主题；//template<el-progress:text-inside="true":stroke-width="26":percentage="70"></el-progress>默认样式方法11、找默认添加的类名2、去掉scoped，scoped是Vue是限制独立组件中的CSS样式不被溢出到全局使用！//style.el-progress-bar__inner{background:#000;}//这两种酌情使用。.el-progress-bar__inner{... 继续阅读 >
2020
12-05

vue+element_ui上传文件,并传递额外参数操作

需求：1、文件大小验证2、文件类型验证3、额外参数传输<template><el-uploadclass="upload-demo"action:limit="1":file-list="formFileList":http-request="handleUploadForm":on-exceed="formHandleExceed":on-remove="formHandleRemove":before-upload="beforeUploadForm"accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"><el-buttontype="primary">... 继续阅读 >
2020
12-05

解决vue下载后台传过来的乱码流的问题

解决vue下载后台传过来的乱码流的问题 后台返回的乱码流解决办法：请求方式用的是axios，主要加关键的{responseType:'blob'}axios封装exportfunctionpostDownload(url,data){returnnewPromise((resolve,reject)=>{instance.post(url,data,{responseType:'blob'}).then(response=>{resolve(response);},err=>{reject(err)})})}下载插件npminstalljs-file-download-S运用：下载excel时，后... 继续阅读 >
2020
12-05

vue基于Echarts的拖拽数据可视化功能实现

背景我司产品提出了一个需求，做一个数据基于Echars的可拖拽缩放的数据可视化，上网百度了一番，结果出现了两种结局，一种花钱买成熟产品（公司不出钱），一种没有成熟代码，只能自己写了，故事即将开始，敬请期待......。 不，还是先上一张效果图吧，请看......前期知识点1.offset（偏移量）定义：当前元素在屏幕上占用的空间，如下图：其中：offsetHeight:该元素在垂直方向上的占用的空间，单位为px，不包括margin。offs... 继续阅读 >
2020
12-04

vue表单验证之禁止input输入框输入空格

测试小姐姐让输入框不允许输入空格，安排。 刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才发现真机中不支持，应该是pc端和移动端事件不一样，所以如果你是pc端，可以使用下面这个方法。input上添加下方代码（我用的vant也一样,包括elemenui等）@keydown.native="keydown($event)"methods中写入下方代码methods:{//禁止输入空格k... 继续阅读 >
2020
12-03

用vue设计一个日历表

日历的功能，我们会经常用到，且逻辑比较复杂，小算法较多，花了半天时间写了个，特此详记。先贴图功能阐述：返回本月不多说，设置工作日和节假日是为了公司制度需要，后台会有假日表来记录。为了适应于vue框架，很多jquery的方法用不上，例如addClass及removeClass，所以可能某些地方做的比较繁琐。<template><div><divclass="date"><!--年份月份--><divclass="month"><iclass="el-icon-arrow-left"@cli... 继续阅读 >
2020
12-03

实用的 vue tags 创建缓存导航的过程实现

实用的 vue tags 创建缓存导航的过程实现 需求是要做一个tag，当切换页面的时候保留状态。效果图：思路既然涉及了router跳转，那我们就去查api发现keep-alive，巧了就用它吧。这里我们用到了include属性，该属性接受一个数组，当组件的name名称包含在inclue里的时候就会触发keep-alive。import{Vue,Component,Watch,Mixins}from'vue-property-decorator';//此处省略n行代码//这是个计算属性。（至于为什么这么写这里就不介绍了。）getcachedViews():string[]... 继续阅读 >
2020
12-03

如何实现vue的tree组件

前言Tree一直是大家熟知的组件，做一些大型的后台管理系统都会用到。使用树组件可以完整的展现其中的层级关系，并具有展开收起选择等交互功能。效果节点可以无限的递归延伸可以展开和收起子节点如果子节点全部选择对应的父节点也应该选中，反之父节点取消选中对应子节点也需要取消选中APIprop传递data属性，来描述所有的节点的信息每个节点的配置描述如下title：展示的标题expand是否展开节点checked是否选中节点childr... 继续阅读 >
2020
12-02

Vue router安装及使用方法解析

对于单页应用，官方提供了vue-router进行路由跳转的处理，本篇主要也是基于其官方文档写作而成。安装基于传统，我更喜欢采用npm包的形式进行安装。npminstallvue-router--save当然，官方采用了多种方式进行安装，包括bower,cdn等。基本用法在HTML文档中使用，只需要利用v-link这个directive就行了，如：<av-link="{path:'/view-a'}">Gotoview-a</a>ps:v-link还支持activeClass用于指定链接活跃时的css样式。replace属性为t... 继续阅读 >
2020
12-02

Vue router传递参数并解决刷新页面参数丢失问题

VueRouter传参方式：1.this.$router.push({name:'模块名称',params:{//各参数}})router.js：exportdefaultnewRouter({routes:[{path:'/paramsPassingByRouter',component:ParamsPassingByRouter,children:[{path:'paramsMode',name:'paramsMode',component:ParamsMode}]}]})ParamsPassingByRouter.vue：<!--html--><button@click="paramsMode(testData)">params... 继续阅读 >
2020
12-02

vue $router和$route的区别详解

vue $router和$route的区别详解 一、router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。。。this.$router.push会往history栈中添加一个新的记录。。详细见vue官方文档route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。。打印this.$route和this.$router。路由传参的方式1.可以手写完整的path：this.$route... 继续阅读 >
2020
12-02

vue组件中节流函数的失效的原因和解决方法

今天使用节流函数的时候遇见了一个问题，搞了半天才找到原因，所以在这里做个总结。节流函数浏览器的一些事件，如：resize，scroll，mousemove等。这些事件触发频率太过频繁，绑定在这些事件上的回调函数会不停的被调用，加重浏览器的负担，导致用户体验非常糟糕。所以先贤们发明了节流函数，简单版本如下：functionthrottle(f,wait=200){letlast=0returnfunction(...args){letnow=Date.now()if(now-last>... 继续阅读 >
2020
12-02

Vue.js桌面端自定义滚动条组件之美化滚动条VScroll

Vue.js桌面端自定义滚动条组件之美化滚动条VScroll 前言前段时间有给大家分享一个vue桌面端弹框组件，今天再分享最近开发的一个vuepc端自定义滚动条组件。vscroll一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件。支持是否原生滚动条、鼠标移出是否自动隐藏、自定义滚动条尺寸及颜色等功能。组件在设计开发之初借鉴了el-scrollbar及vuebar等组件设计思想。通过简单的标签写法<v-scroll>...</v-scroll>即可快速生成一个漂亮的替换原生滚动条。参数配置props:{/... 继续阅读 >
2020
12-02

vue开发chrome插件，实现获取界面数据和保存到数据库功能

前言最近在评估项目时，要开启评估平台，查看平台和保存平台，感觉非常繁琐，开发了一款可以获取评估平台数据，查看项目排期和直接保存数据到数据库的chrome插件，由于我需要使用之前vue封装的一个日历插件，这里就用vue来开发这个插件。开发前准备要开发一个chrome插件，我们首先需要了解chrome插件的基本结构和对应的功能。每个扩展的文件类型和目录数量有所不同，但都必须有manifest。一些基本但有用的扩展程序可能仅由manif... 继续阅读 >
2020
12-02

vue实现表格合并功能

vue实现表格合并功能 本文实例为大家分享了vue实现表格合并功能的具体代码，供大家参考，具体内容如下1、背景本身有vue进行渲染的数据表格，，但是出于整体考虑，需要对相同的列信息进行单元格合并。由于使用的是vue，想到MVVM是要用数据驱动的思想，所以考虑在Model做手脚，而不是渲染出数据来后做DOM操作，当然基本的CSS还是要有的。因此这个方法对所有数据驱动的框架都有效，比如说Angular和React。最后的实现效果是这样的：2、思路原本的正常表格是... 继续阅读 >