vue-cli后台系统
岸芷汀兰§小慧
记下我所踩的坑
展开
-
el-date-picker 禁用当前日期时间之前的选项
<el-date-picker type="datetime" v-model="transshipmentTime" placeholder="请选择" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" // 在这里配置 @change="handle" // 如果选择时间小于当前时间时,默认显示回当前时间/>data中tran.原创 2022-05-16 15:26:50 · 1356 阅读 · 0 评论 -
el-table自定义指令实现表格触底加载
新建directive.jsimport Vue from 'vue'// 自定义指令的格式,名字Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 0 cons原创 2020-10-26 13:45:50 · 1100 阅读 · 0 评论 -
vue使用animate.css动效,并自定义动画时间
animate.css网址:http://www.animate.net.cn/1:安装,推荐安装3.7.2版本,最新版本的动画无效果,不清楚原因是什么npm install animate.css@3.7.2 --save2.在main.js中全局引入import animated from "animate.css"Vue.use(animated)3.在标签上加上animated及动画名称,亲测duratioin无效果,<div class="totalItem..原创 2020-10-14 10:55:40 · 2734 阅读 · 0 评论 -
vue注册全局组件,避免每个页面都引入一遍,以数字动画组件为例
当我们写了一个通用组件,用的页面较多时,可以注册为全局组件,直接调用,不必每个页面都import一遍。文件结构如下:countTo.vue是一个写好的数字动画的组件<template> <div class="countToComponents"> <count v-if="resetCount" :startVal='startVal' :endVal='endVal' :duration='2000'> </count>原创 2020-10-12 15:23:05 · 721 阅读 · 0 评论 -
百度地图点击marker换图标的两种方式
首先在页面把要替换的图标引入import newIcon from "../../../../static/image/startIcon.png"第一种方式:使用百度地图api,setIcon,简单两步就可以实现marker.addEventListener("click", function (event) { // 设置新的地图图标 let lightMyIcon = new BMap.Icon( newIcon, new BMap.Si原创 2020-09-27 17:59:07 · 3574 阅读 · 3 评论 -
pdfh5.js实现移动端简单预览
1.安装:npm install pdfh5 --save-dev2.引入:import Pdfh5 from "pdfh5"import "pdfh5/css/pdfh5.css"3.在data中绑定pdfh5:null4.写template<div class="pdf-container" v-show="pdfShow"> <div id="demo"></div></div>5.实例化:要注意pdf的地址不能跨.原创 2020-09-04 18:00:02 · 1051 阅读 · 5 评论 -
vue项目中移动端,pc端,实现pdf预览和分页
目前项目中,移动端和 PC端都有pdf预览的需求,个人建议PC端用vue-pdf,能很好地实现分页的效果,移动端建议用pdfh5.js,一次性加载,滑动查看,先记录下vue-pdf1.安装:npm install --save vue-pdf2.引入:import pdf from 'vue-pdf'components: {pdf}3.写template<div class="pdf" v-show="fileType === 'pdf'"> <p cl原创 2020-09-04 17:52:27 · 1923 阅读 · 0 评论 -
vue中调接口下载流文件的excel表
this.$axios({ method: 'post', url: `${config.proxy}/excel/out`, responseType: 'blob', // 接收格式设置 data: param // 参数 }) .then(res => { // console.log(res) ...原创 2020-05-26 15:14:46 · 498 阅读 · 0 评论 -
记录vue项目中用vue-socket.io实现实时通讯
1.安装:npm install vue-socket.io --save2.引入main.jsimport VueSocketIO from 'vue-socket.io'let vueSocketIo = new VueSocketIO({ debug: true, connection: 'http://106.75.105.96:18888'})// 监听connect事件,设置isSuccessConnect为truevueSocketIo.io.on('con.原创 2020-05-20 11:19:05 · 1189 阅读 · 0 评论 -
vue中封装一个axios拦截器,统一管理所有接口请求
1.下载安装axiosnpm install axios -S2.新建文件夹api,新建http.js文件3.在http.js文件中引入需要用到的库import axios from 'axios'import Vue from 'vue'4.创建拦截,配置接口路径,请求头// 配置接口路径const http = axios.create({ //baseURL: process.env.baseUrl, baseURL: 'http://192.168..原创 2020-05-14 10:39:46 · 502 阅读 · 0 评论 -
在vue中实现根据鼠标点击位置展示对应的内容
原理:获取鼠标点击的位置,动态地给div框赋宽高值1.给元素绑定动态样式style<div class="dialog_wrapper" v-bind:style="styleObject"></div>原创 2020-05-09 09:46:10 · 2836 阅读 · 1 评论 -
el-input点击添加一行和点击删除一行
原理:通过操作数据的增加和删除来操作1.外面包一层div,写一个循环的el-form-item <div v-for="(item, index) in attrArr" :key="index" > <!--prop属性一定要按这个规则来写--> <el-form-item label="属性值" :p...原创 2020-05-06 13:31:28 · 1199 阅读 · 0 评论 -
不点击图片,直接实现el-image的大图预览功能
el-image的大图预览功能是一个小组件image-viewer,它的props如下:props: { urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default: 2000 }, onSwitch: {...原创 2020-04-29 12:14:04 · 4819 阅读 · 6 评论 -
vue项目中使用自定义指令directive实现鼠标拖动功能
1.在util文件夹下新建directive.js文件import Vue from 'vue'// 自定义指令的格式,名字Vue.directive('drag', { bind (el) { let dragBox = el // 获取当前元素 dragBox.onmousedown = e => { // 算出鼠标相对元素的位置 ...原创 2020-04-29 11:31:55 · 348 阅读 · 0 评论 -
vue刷新页面丢失store中的数据
在App.vue中插入如下代码,created() { //解决刷新页面时丢失store中的数据问题 //在页面加载时读取sessionStorage里的状态信息 if(sessionStorage.getItem("store")) { this.$store.replaceState(Object.assign({}, this.$store.state, JS...原创 2019-07-16 09:34:11 · 335 阅读 · 0 评论 -
基于vue+elementui的省市区选择器插件v-distpicker
github地址: https://distpicker.pigjian.com/原创 2019-07-16 09:37:24 · 5304 阅读 · 1 评论 -
Duplicate keys detected: '总览'. This may cause an update error.
在使用vue时出现以下错误原因:v-for循环里,key值可能重复了,所以会报这个错。解决方法:找到使用v-for的地方,修改成如下:原创 2019-07-12 14:31:12 · 742 阅读 · 0 评论 -
elementui导航菜单高亮问题
1.在标签上设置 :default-active="defaultUrl"2.绑定到data中3.获取路由赋值给defaultUrl,可以直接赋值this.defaultUrl = this.$route.path也可以把路由进行拆分,取中间某个词赋值4.让el-menu-item标签中的 :index与defaultUrl值相同,任何情况下,高亮都是显示正常的...原创 2019-09-19 19:22:52 · 1256 阅读 · 0 评论 -
vue-cli2脚手架初始化项目
一、安装node.js下载路径:http://nodejs.cn/download/ 一路下一步就好检查是否安装成功 node -v npm-v二、vue-cli 脚手架安装地址栏输入cmd执行命令 npm install -g vue-cli如果是vue-cli3,则执行npm install -g @vue/cli三、初始化项...原创 2019-07-12 18:11:46 · 323 阅读 · 0 评论