![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
Donmind29
可以慢下来,但不要停下来
展开
-
Vue2.x + element ui 导入导出excel
实现内容:导入excel文件最终将其展现在页面table中将页面table中的表格转换为excel文件仓库地址:完整代码在这里:https://github.com/Nigo-yyy/vue-excel依赖安装:需要安装三个依赖包, 和两个JS包npm包:分别安装 file-saver、 xlsx、 script-loader三个依赖npm install -S file-saver xlsx(这里其实安装了2个依赖)npm install -D script-loaderJS文件原创 2022-03-27 01:56:35 · 1539 阅读 · 6 评论 -
vue2.x el-table二次封装支持编辑修改
最近开发新业务,看到有些功能一样的表格,想着封装一个组件,记录一下:大概实现是:封装一个通用的表格接收两个数组, 一个控制行数,一个控制列数表格可进行编辑操作官方文档图中我们可以看到::data="tableData"中 传入的tableData用来控制表格行数el-table-column用来控制列数,有几个el-table-column, 表格就有几列因此我们再定义一个数组,去对应tableData中的要显示的项,用来产生需要的列comTable代码如下://data是从原创 2022-03-23 01:05:40 · 2515 阅读 · 0 评论 -
vue2.6 element-ui 按需引入样式未生效 Error: Cannot find module ‘babel-preset-es2015解决
element-ui按需引入遇到两个问题元素会显示,但是样式没有生效编译过程中遇到错误Error: Cannot find module ‘babel-preset-es2015‘官方文档:element-ui按需引入一、样式问题:引入组件的同时,要引入样式文件main.js中:import Vue from 'vue'import App from './App.vue'import router from './router'//引入组件及对应的样式文件import {原创 2022-03-17 13:02:08 · 2626 阅读 · 1 评论 -
vue 指定元素滚动到页面可视区域
使用场景:1、点击页面tab,或步骤条的某一步,使其对应元素滚动到页面可视区域2、使遍历而来的list滚动到页面可视区域实现:使用el.scrollIntoView() API实现scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。注意:要设置页面(最外层容器)可滚动,否则不会生效语法: element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.s原创 2022-02-07 11:27:26 · 4692 阅读 · 0 评论 -
element-ui el-steps自定义进度图标及完成图标
项目中需要自定义 el-steps的图标 同时完成时图标也要进行修改,记录一下,有写的不好的地方欢迎大佬们指正:实现步骤:首先在templete部分:el-step中添加一个插槽 slot=“icon”, 为其添加类名,以便于修改样式<el-steps class="handlerSteps"> <el-step @click.native="scrollToTop('build')" :status="flag.原创 2022-01-25 19:08:14 · 12672 阅读 · 0 评论 -
Vue自定义指令, 自定义指令封装全局防抖函数
Vue自定义指令除了核心功能默认内置的指令 (v-model 和 v-show等),Vue允许我们注册自定义指令用于元素上当我们需要对普通 DOM 元素进行底层操作时,就可以用到用到自定义指令。如何注册我们可以全局注册自定义指令, 也可以局部注册全局注册:全局注册自定义指令是将我们的自定义指令挂载到vue实例上的,在项目中都可以使用全局指令注册方法为:Vue.directive(dName, options) 传入两个参数分别是 指令名 和 配置对象创建完之后,我们就可以使用 v-指令名原创 2022-01-13 16:45:39 · 581 阅读 · 0 评论 -
Vue axios取消发送某个请求
在项目中遇到一个情况,因为参数不同而频繁请求一个接口,因为接口的响应速率不同,从而导致最后一次请求的结果被之前的请求覆盖,显示的内容就会出错想要实现当触发同样的请求时,不轮同时触发多少,只进行最后一次请求解决方案:axios.CancelToken官方文档:http://www.axios-js.com/zh-cn/docs/#%E5%8F%96%E6%B6%88 该api可以用来取消请求官方示例:const CancelToken = axios.CancelToken;let canc原创 2021-12-16 18:23:24 · 1047 阅读 · 0 评论 -
vue图片查看器,支持放大 缩小 还原
Vue中使用图片查看器如何使用项目中使用的是 vue + element-ui 要求查看图片时能够实现 图片放大缩小翻转等功能,于是找到一个适合的插件,首先看下效果:功能与我们设想的一样,下面看下如何使用GitHub地址:viewerjs官网:https://fengyuanchen.github.io/viewerjs/如何使用1、首先安装v-viewernpm i v-viewer --save如果安装不上 使用cnpm安装2、然后main.js中引入 v-viewerimpo原创 2021-10-29 16:46:04 · 2503 阅读 · 0 评论 -
vue 项目使用momentjs格式化时间
第一步、安装momentjsnpm i moment --save第二步、在需要格式化时间的文件中引入momentjs<script>let moment = require('moment')export default { components:{ pageBar, noData, addNotice, review }, data() {第三步、使用 this.startTimeStr = moment(this.formData.time[0]).format(原创 2021-08-01 16:25:59 · 146 阅读 · 0 评论 -
el-checkbox-group获取选中的id 禁止选中已有项
<el-checkbox-group v-model="checkModel"> <el-checkbox @change="getCheckModel(item)" v-for="item in checkList" :key="item.id" :disabled="checkModel_.some(item_ => item_ == item.name)" :label="item.name"></el-checkbox&g原创 2021-07-19 16:55:50 · 1886 阅读 · 0 评论 -
vue下载pdf到本地,后端返回文件流
vue项目,axios去请求接口request文件中代码:import request from "封装好的axios请求文件"//下载用户手册PDF时请求的接口export const getGuide = (param) => { return request({ url:"请求url", method:"get", params:param, //一定要加responseType responseType: "blob原创 2021-07-07 17:33:47 · 1077 阅读 · 0 评论 -
watch监听基本数据类型,初始化立即执行
当我们监听引用数据类型时,可以这样写,data(){ return { obj:{} }},watch:{ obj:{ handler(newV){ console.log(newV) }, deep:true, immediate:true //加了这个属性就可以在页面初始化时立即执行 }}监听基本数据类型时,如果想要页面初始化立即执行,就要这样写data(){ return { a:1 }},watch:{ obj:{ handler:原创 2021-06-30 23:20:19 · 1044 阅读 · 0 评论 -
el-form label与表单元素换行
找到el-label,添加如下属性://怕影响其他el-form,于是给这个dialog加了一个class.applyDialog{ & .el-form-item__label{ text-align:left; //加下面两条就行 float: none; // 取消浮动 word-break: break-word; // 支持单词截断换行 } }效果原创 2021-06-29 16:08:41 · 5968 阅读 · 0 评论 -
vue使用pdf.js预览pdf文件加水印,下载pdf文件
项目背景:vue-cli3脚手架pdf.js版本为官方最新稳定版2.8.335pdf.js下载地址:http://mozilla.github.io/pdf.js/getting_started/#download根据自身需求去选择对应版本开始使用一、项目中放置pdf.js的包在项目的public文件夹下,新建一个pdfjs文件夹,将下载下来的build和web文件夹丢进去,目录结构如下:vue-cli3下public文件夹中的内容不参与打包,打包生成的index.html直接可以访问到原创 2021-06-28 17:49:39 · 3612 阅读 · 11 评论 -
Vue 大屏适配方案2 锁定宽高比
创建一个外层包裹容器,,用该容器包裹所有的router-view,根据屏幕的可视区尺寸与设计稿尺寸得到一个宽高缩放比例,根据比例去对外层包裹容器进行缩放,以适应屏幕包裹容器完整代码:<template> <div id="container" ref="wrapper"> <template v-if="show"> <slot></slot> </template>原创 2021-04-26 15:51:17 · 1531 阅读 · 0 评论 -
vue svg制作loading组件
制作一个loading组件,颜色,大小等内容都可以根据需求去修改组件完整代码:<template> <div class="container"> <svg :width="width" :height="height" viewBox="0, 0, 80, 80" preserveAspectRatio="xMinYmid meet"> <circle cx="40"原创 2021-04-23 09:47:10 · 272 阅读 · 0 评论 -
VUE项目 openlayers简单使用
在项目中安装依赖npm i ol --save调用相关API选取一个DOM元素,并进行相关的配置,完整代码:<template> <div id="wrapper"> <div id="map"></div> </div></template><script>import Map from "ol/Map";import View from "ol/View";// 添加图层impor原创 2021-04-16 15:09:46 · 607 阅读 · 0 评论 -
VUE大屏适配方案
近期在做大屏可视化的内容,记录下关于大屏适配的一些内容用到的有阿里手淘的flexible.js,postcss-px2rem, px2rem-loader试过npm i lib-flexible的方式安装,但是发现并没有生效,也不知道问题出在哪里,也是换成了直接在main.js中引入flexible.js的方式分享下目录结构:一、创建flexible.js文件并引入到vue项目中flexible.js文件内容如下,可直接复制到项目中:(function(win, lib) { var原创 2021-04-13 22:48:20 · 4866 阅读 · 11 评论 -
vue 实现倒计时
完整代码:curt(){ //显示倒计时 const _this = this; //保存this的值,下面会有需要 const end = new Date(_this.end).getTime(); //end是请求回来的结束时间,也可以自己设置 const now = Date.now(); //获取当前时间戳 if(now >= end){原创 2021-03-16 00:22:31 · 479 阅读 · 1 评论 -
vant-ui area.js文件
在vant官网没找到这个文件,所以分享给需要的人,复制到本地就可以使用啦export default { province_list: { 110000: '北京市', 120000: '天津市', 130000: '河北省', 140000: '山西省', 150000: '内蒙古自治区', 210000: '辽宁省', 220000: '吉林省', 230000: '黑龙江省', 310000: '上海市', 3200转载 2021-03-12 23:41:33 · 1327 阅读 · 4 评论 -
vue filters中使用data中的数据
写代码时发现在filters中直接通过this.变量名去使用data中的数据时拿不到值的,查阅资料发现this的问题,解决方法是:一、在vue实例前,声明一个变量,我这里是self:如果是脚手架项目就在export default之上声明该变量二、在beforeCreate()钩子函数中将vue中的this赋值给该变量三、使用时,通过self.变量名就可以使用啦...原创 2021-03-10 10:30:47 · 524 阅读 · 0 评论 -
vue中的watch使用
基本概念: 观察 Vue 实例上的一个表达式或者一个计算属性的变化。回调函数得到的参数为新值和旧值,在回调函数中可以进行一些异步操作或开销较大的操作。表达式只接受简单的键路径。对于更复杂的表达式,可以用一个函数取代。 简单理解就是通过Vue实例上的数据变化去进行相应的操作,以满足需求。基本数据类型的监听 <div id="app"> <input type="text" v-model="text1"> <p>{{text2}原创 2021-03-03 02:13:55 · 487 阅读 · 1 评论 -
vant-ui上传文件组件,base64数据流上传ali-oss
使用vant-ui组件上传图片,返回的是base64格式<van-field name="uploader" label="作品封面"> <template #input> <van-uploader :max-count='1' v-model="uploader" :after-read="afterRead"> </van-uploader>原创 2021-02-21 23:40:09 · 4232 阅读 · 1 评论 -
vue生命周期
先放两张图:vue生命周期在整体上可以分为两部分:第一部分是初始化阶段、模板编译阶段与模板挂载阶段;第二部分是卸载阶段原创 2021-02-16 19:06:00 · 109 阅读 · 0 评论 -
vue-cli2分环境打包测试包与正式包
首先确定安装cross-envnpm i cross-env --save-dev看下目录结构:1、build文件夹中新建test.js文件,内容复制build.js。修改个地方。process.env.NODE_ENV = ‘test’ 以及const webpackConfig = require(’./webpack.test.conf’)'use strict'require('./check-versions')()process.env.NODE_ENV = 'test'原创 2021-02-15 16:02:07 · 683 阅读 · 0 评论 -
vuex数据持久化
存储在vuex中的数据在刷新时,会被初始化为最初的状态。为解决这一问题,一般有两种解决方法:1、vuex与本地存储相结合2、使用插件如:vuex-persistedstate一、与本地存储结合:初始化数据时:let defaultCity = "北京"//使用了localStorage 记得使用try catch 假如用户关闭本地存储或隐身模式,此时使用localStorage会抛出异常try{ if(localStorage.city) { //如果本地存储中有就赋值给defaul原创 2021-02-14 15:33:05 · 627 阅读 · 1 评论 -
v-if和v-for为什么不要使用在同一个元素上
vue官方强烈建议不要将v-for和v-if用在同一个元素上因为v-for比v-if有更高的优先级,所以即使只是需要通过v-if来渲染一部分内容,也需要在每次重新渲染的时候遍历整个列表,而不考虑需要的内容是否发生了变化,所以不在同一个元素上同时使用v-for和v-if是一种提升性能的手段当然:需要进行这类操作一般分为两种情形:一、过滤一个列表中的项目例:<ul> <li v-for="user of users" v-if="user.isActive" :key=原创 2021-02-13 23:53:17 · 445 阅读 · 0 评论 -
vue项目渐隐渐现效果组件
一个当组件的隐藏或显示希望有一些过渡效果时使用的通用组件定义一个通用组件:名字自取,我这里定义的是Fade.vue<template> <transition> <slot></slot> 放那个希望有过度动画的组件 </transition></template><script>export default { name: 'Fade'}</scrip原创 2021-02-13 22:33:50 · 416 阅读 · 0 评论 -
vue项目中使用iconfont图标及使用彩色图标
单色图标的使用1、首先将选择好的图标下载到本地2、将iconfont.css文件以及后缀为 .eot .ttf .woff .svg的文件加入到项目文件夹中3、在项目的main.js文件中引入iconfont.css样式文件,import "./assets/styles/iconfont.css"4、注意在iconfont.css文件中根据自身情况修改引用的其他四个文件的路径,否则报错5、接下来就是在项目中使用啦,单色图标直接使用图标对应的uniCode编码,以及给标签加ico原创 2021-02-13 21:57:00 · 2787 阅读 · 3 评论