vue
vue小知识点
° う
这个作者很懒,什么都没留下…
展开
-
代码编辑器vue2-ace-editor的使用
1.Install: npm install --save-dev vue2-ace-editor2.详细代码<template> <div class="container"> <editor ref="aceEditor" v-model="content" @init="editorInit" width="700" height="600" lang="javascript"原创 2022-04-15 09:11:54 · 1891 阅读 · 0 评论 -
Echarts中echarts-auto-tooltip的使用
######1.Echarts的大屏效果,使用鼠标移入不是很方便,所以就有了自动滚动的tooltip的效果,使用方法很简单,直接创建echarts-auto-tooltip.js引入;echarts-auto-tooltip.js内容如下(function (global) { global.tools = global.tools || {}; /** * echarts tooltip 自动轮播 * @author liuyishi * @par原创 2022-04-13 16:30:10 · 1434 阅读 · 1 评论 -
vue项目后端返回数据导出excel表格
1.安装npm i xlsxnpm install xlsx-style --save安装npm install xlsx-style --save的时候会报错,处理下就好需要修改源码:1、在\node_modules\xlsx-style\dist\cpexcel.js 807行把 var cpt = require(‘./cpt’ + ‘able’); 改成 var cpt = cptable;2、在\node_modules\xlsx-style\ods.js 10行和12行把路径改为原创 2022-04-06 08:54:21 · 1144 阅读 · 0 评论 -
elementUI的tree组件搜索过滤,可识别拼音,且不区分大小写
1.首先需要安装 js 拼音库 CnChar ,这个库主要就是做汉字转拼音和汉字笔画数的。使用 npm i cnchar安装任何在main.js中引用import cnchar from ‘cnchar’;Vue.use(cnchar);2.完整代码如下:<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input><el-tree cl原创 2021-12-22 10:03:06 · 959 阅读 · 1 评论 -
vue+elementUI实现表格拖拽
1.使用sortablejs的拖放排序列表的js插件;(http://www.sortablejs.com/index.html)来实现UI框架是elementUI;在elementUI(ref=“dragTable” row-key=“id”)是必须的 <el-table ref="dragTable" row-key="id" />2.script代码,加载完数据之后,执行Sortable的方法<script>import Sortable from 'sorta原创 2021-12-22 09:44:16 · 329 阅读 · 0 评论 -
vue项目中的验证码
#####一、效果一:#####代码:// 第一种方法,span,不绘制干扰点<template> <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode"> <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)"原创 2021-12-22 09:38:08 · 336 阅读 · 0 评论 -
vue项目动态加载json文件,数据不更新
原本使用json文件是为了加载,不用重新打包,结果测试数据改变之后,没有加载更新;解决办法:1.将json文件改为js文件内容 window.dict =(之前的 info.json 内容)2.在main.js中引入Vue.prototype.$dict = window.dict3.在index.html中引入(注意:引入的时候要在body标签之上,不然会报错)<script src="./info.js"></script>4.页面中使用 {{$dict.d原创 2021-12-22 09:35:35 · 1949 阅读 · 0 评论 -
vue+elementUI的国际化
安装组件和插件cnpm i element-ui -S // 安装elementcnpm i vue-i18n -S //安装i18n2.在src中创建语言包3.在main.js中引用import Vue from "vue";import App from "./App.vue";import router from "./router";import store from './store'//中英文切换import VueI18n from 'vue-i18n'Vue.原创 2021-12-22 09:33:27 · 458 阅读 · 0 评论 -
vue跨页面调用方法
首页要创建一个js的文件;我将其命名为bug.jsimport Vue from 'vue'export default new Vue()要操作使用的页面中,直接是引入bus文件:import bus from “@/utils/bus.js”使用方法: bus.$emit( 'updateKeyWords' , this.keywords);接受的页面可以直接在mounted中接受mounted(){ let _this=this; bus.$on('up.原创 2021-09-16 11:17:01 · 765 阅读 · 0 评论 -
IE浏览器下,后台接口数据更新不及时问题
在用ie做web项目,发现有部分接口请求的数据,哪怕修改了状态以后,重新查询的结果还是旧状态数据,但是在谷歌浏览器却不会出现这个问题,经过分析可能是缓存问题。经过多方搜索发现:IE 浏览器在发起 GET 请求,当参数一样时,浏览器会直接使用缓存数据解决方案以下三种都可以:1、最简单的方法在我们的 get 请求后面添加一个参数 t = 时间戳2、让后台改成post请求3、请求标头里放两个 k-v ['Cache-Control'] = 'no-cache'; ['Pragma'] = 'n原创 2021-03-18 11:32:43 · 381 阅读 · 0 评论 -
elementUI的时间选择,绑定format的返回值问题
时间选择器分为日期选择器和日期时间选择器两种1.只绑定format="yyyy-MM-dd HH:mm"返回的是这种格式Thu Feb 25 2021 10:10:13 GMT+0800 (中国标准时间)若 绑定value-format=“yyyy-MM-dd HH:mm”,返回的格式便是你绑定的格式<el-date-picker v-model="search_time" format="yyyy-MM-dd HH:mm"原创 2021-02-23 16:52:57 · 965 阅读 · 1 评论 -
vue中各种文档的下载
###1.下载本地的文件####1.在vue-cli 3.x+中,直接将文件放在public下面window.location.href="/file/xxx.doc"这种写法本地不会有问题,但是线上部署出现了问题,显示文件找不到;所以改为window.location.href=`${process.env.BASE_URL}file/beian_import.xls`当前也可以不用window.location.href来下载,可以使用dom动态生成a标签来下载;downExcel(){原创 2021-01-28 08:49:21 · 618 阅读 · 0 评论 -
vue-cli打包优化之分析工具webpack-bundle-analyzer
// 1. 安装cnpm install webpack-bundle-analyzer --save-dev// 2. 在/build/webpack.prod.conf.js文件中引入const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin// 然后配置一下:plugins: [new BundleAnalyzerPlugin()]// 3. 在package.json文件中配原创 2020-12-26 10:23:33 · 197 阅读 · 0 评论 -
vue使用cdn加速优化项目
webpack会将所有的依赖包都生成并打包到js/chunk-vendors.97b0334e.js中,这样会导致这个包的体积过大,在加载的时候会有延时。解决办法:通过externals加载外部CDN资源:1、复制一份main.js改名为main-prod.js。注意:这个优化是项目结束时干的事,不要一开始就进行优化。2、vue.config.js:(当为发布模式时,使用main-prod.js文件,并且设置externals)chainWebpack: config => { //原创 2020-12-26 10:22:43 · 442 阅读 · 0 评论 -
vue中elementUI的表格实现自定义编辑
此处我使用了mixnis混合tableEdit.js// 实现table表格,点击编辑export const tableEdit = { directives: { focus: { // 指令的定义 inserted: function(el) { el.getElementsByTagName('input')[0].focus() // el.focus() } } }, data() {原创 2020-12-19 13:31:46 · 865 阅读 · 1 评论 -
vue中elementUI的Dialog 对话框可自定义拖拽
首先在src下面创建"src\directive"文件夹然后在下面创建el-drag-dialog文件下,在里面创建index.jsindex.jsimport drag from './drag'const install = function(Vue) { Vue.directive('el-drag-dialog', drag)}if (window.Vue) { window['el-drag-dialog'] = drag Vue.use(install); // es原创 2020-12-19 13:22:01 · 287 阅读 · 1 评论 -
vue中elementUI的tree组件的使用(加线条加自定义图标)
vue中elementUI的tree组件的使用(加线条加自定义图标)后台管理系统是从layui过来的,所以总是觉得elementUI的tree组件线条没了不好看,####第一中效果有线条html要在tree组件的直系父集上面加class名字tree-container,在自己加tree的class <div class="tree-container"> <el-tree ref="tree" class="tree fi原创 2020-12-19 13:18:09 · 2848 阅读 · 1 评论