![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
@曾经@
这个作者很懒,什么都没留下…
展开
-
vue npm run build 打包报错
vue npm run build 打包报错原创 2022-10-28 16:02:41 · 2062 阅读 · 1 评论 -
前端大屏自适应实现高清还原设计图 scale
前段时间写过一个实现大屏的 比较简陋 也有些不足的地方 重新优化了一下可以根据你的屏幕尺寸进行大屏展示 但是必须是16:9的设计图 <page-resize> //页面dom </page-resize>import pageResize from '@/pages/intelligentoperation/resetScreenSize.vue'resetScreenSize.vuecomponents: { pageResize },原创 2022-05-20 15:10:15 · 801 阅读 · 0 评论 -
vue、echarts 3D立体饼图鼠标悬浮显示信息 多版本echarts同时存在以及出现的bug解决
1、设计给出的图当中涉及到了3d立体饼图,项目当中我用的是echarts,当我在浏览器里面扩展基本实现样式了以后发现项目报错了,百度翻译了一下 大概率是echarts版本引起的,上扩展里面改了下项目当中的版本之后发现之前的水球图又版本不一致了(5.x可能是和4.x的不一样了)2、定位到问题之后处理就是让两个版本的echarts同时存在即可npm i echarts5@npm:echarts@5.2.0npm install echarts-gl@2.0.8package.json "echa..原创 2022-05-20 15:03:59 · 3813 阅读 · 2 评论 -
vue、echarts、html-docx-js-typescript、file-saver、dom-to-image将页面下载成word、图片并下载(纯前端)
需求中描述是要将一个页面下载成word文档,研究了个demo测试一下。1、下载依赖npm install html-docx-js-typescript --save-devnpm install file-saver --save-devnpm install dom-to-image --save-dev2、在调用的页面导入import domtoimage from 'dom-to-image'import { asBlob } from 'html-docx-js-type原创 2022-05-11 15:03:02 · 1489 阅读 · 0 评论 -
vue+echarts制作大屏利用css3 scale 进行屏幕自适应
制作大屏 设计图如果是16:9的ui图 并且大屏显示符合16:9 可采用css3的scale进行动态缩放达到高清还原设计图 前端实现就可以按照UI图px写代码了1、resetScreenScale.jsimport appConfig from './config/base'export function pageResize () { let init = () => { console.log(window.innerHeight + "," + window.in原创 2022-05-07 17:42:45 · 1709 阅读 · 0 评论 -
vue scp2 webpack gulp 前端自动化部署并将打包文件压缩成zip文件 发送到ftp服务器 解放双手
vue scp2 webpack gulp 前端自动化部署并打包成zip包 自动发送到ftp服务器原创 2022-04-27 15:19:03 · 2264 阅读 · 0 评论 -
vue 本地文件下载 pdf excel 等文件
下载本地文档资源亲测有用 并且兼容ie浏览器npm install downloadjs // 引入download.jsimport download from "downloadjs";download(url,'用户手册.pdf');原创 2022-04-19 11:01:21 · 1152 阅读 · 0 评论 -
重置默认样式css reset.css
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}body,input,textarea,button,select,pre,xmp,tt,code,kbd原创 2022-03-03 11:21:25 · 170 阅读 · 0 评论 -
vue+element table 多级复杂合并单元格
多场景下多模型(层级还有多层可自行添加判断即可)多对多dataList: [{ first: '1', second: '1', model: '蛋黄酱', all: '123213' }, { first: '1', second: '1', model: '蛋黄酱2', all: '123213' }, { first: '2',原创 2021-08-23 16:27:37 · 1035 阅读 · 0 评论 -
vue+echarts 象形柱图 pictorialBar 错误信息 Component series.pictorialBar not exists. Load it first
1、问题 :当我引入echarts象形柱图实现ui的设计图时,发现echarts的图标出不来并且浏览器报错信息显示Component series.pictorialBar not exists. Load it first,2、解决过程:我排查我的引入的echarts方法无误之后我感觉上是echarts的版本问题,更新了echarts的版本发现并没什么卵用,冷静思考了下 上面这个报错信息产生的原因(这就是因为setOption的时候传入的option中的series和接收的不一致)将type:'pic原创 2021-08-11 16:26:10 · 2094 阅读 · 0 评论 -
vscode 自动保存eslint格式json配置 以及下载插件
一、vscode setting.JSON(自动保存eslint格式){ "editor.tabSize": 2, //制表符符号eslint "editor.formatOnSave": true, //每次保存自动格式化 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格 "vetur.format.defaultFormatter.html": "js-beautif原创 2021-04-26 15:01:06 · 616 阅读 · 0 评论 -
antdv a-table pagination配置项
<a-table ref="table" :rowKey="(record) => record.id" :pagination="{ current: table.pageNumber, defaultPageSize: 10, showSizeChanger: true, pageSizeOptions: ['10', '20', '30', '40'], showTotal: (tot..原创 2020-11-09 16:18:08 · 6062 阅读 · 1 评论 -
vue+axios soap (xml)数据转换json数据
vue+axios soap xml数据转换json数据1、导入npm i x2js2、引入文件main.jsimport x2js from 'x2js' //xml数据处理插件Vue.prototype.$x2js = new x2js() //创建x2js对象,挂到vue原型上3、调用let jsonObj = this.$x2js.xml2js('<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelo原创 2020-09-08 14:42:23 · 1597 阅读 · 0 评论 -
vue watch (深度监听)data多层属性
vue watch (深度监听)data多层属性当我们的data属性是有两层以上的时候,我们写watch监听内层属性的变化,普通watch就会报错。假设我们的代码如下:<div> <p>FullName: {{name.fullName}}</p> <p>FirstName: <input type="text" v-model="name.firstName"></p></div> ne原创 2020-08-25 17:11:48 · 2818 阅读 · 0 评论 -
手动调用element DateTimePicker 日期时间选择器关闭事件
手动调用element DateTimePicker 日期时间选择器关闭事件有时候手动调用控件的关闭隐藏控件事件官网api中没有此事件,查看源码发现有一个handleClose事件,亲测可用,在日期选择控件上设置ref,直接调用handleClose()可达到关闭日期控件的作用...原创 2020-08-04 12:19:43 · 4830 阅读 · 2 评论 -
vue+element 兼容主流浏览器导出csv
vue+element 兼容主流浏览器导出csvnpm install file-saver npm install --save json2csvimport FileSaver from 'file-saver';exportPathMethod(data) { this.exportCSV(this.export_pagination === '1'? this.tableList:this.tableDataList)},exportCSV(data, filename=原创 2020-07-30 15:17:41 · 340 阅读 · 0 评论 -
项目当中遇到的浏览器兼容问题
项目当中遇到的浏览器兼容问题1、例用弹性盒子布局,给六个块的宽度都是flex:1;,google、火狐等浏览器均正常,ie和edge这类浏览器是将父宽度均分,所以子元素超出就会折行,只需要将子元素设置强制不让折行后即可,white-space:nowrap;改后的效果如下2、利用多层穿透样式>>> /deep/时 edge、ie、火狐等穿透不了,google正常,可以将第二层的穿透样式改变修改的位置,例如放在第一层3、width:min-content;(外层宽度由内部元素宽原创 2020-07-29 15:10:16 · 550 阅读 · 0 评论 -
echarts+vue 环形图将总数放置在饼图中央,且鼠标悬浮图例可以显示提示信息,图例提示信息数据计算比例采用最大余额法计算
echarts+vue环形图将总数放置在饼图中央,且鼠标悬浮图例可以显示提示信息,图例提示信息数据计算比例采用最大余额法计算initEchartPie()initEchartPie(){ setTimeout(()=>{ const myCharts = this.$echarts.init(this.$refs.myChartPie); myCharts.showLoading({text: "数据加载中...",textColor:'#7a7878',原创 2020-07-15 19:11:12 · 2625 阅读 · 1 评论 -
element dialog动画
自定义element dialog动画.el-dialog__wrapper { transition-duration: 0.6s;}.dialog-fade-enter-active{ animation: none !important;}.dialog-fade-leave-active { transition-duration: 0.4s !important; animation: none !important; } .dialog-fade-enter-activ原创 2020-07-07 09:53:45 · 1127 阅读 · 0 评论 -
生产环境和测试环境路径不同,通过定义global_variable.js全局变量,赋予不同的环境不同路径,vue定义全局变量
token失效需要跳转到汇聚平台登录页面,而生产环境和测试环境路径不同,所以通过定义global_variable.js全局变量,赋予不同的环境不同路径global_variable.jslet relogin_baseUrl=''switch (window.location.hostname) { case '172.16.72.108'://线上环境 172.16.72.108 relogin_baseUrl='http://172.16.75.200:81/#/logi原创 2020-07-04 11:43:11 · 535 阅读 · 0 评论 -
二次开发element el-tooltip+span 超出文本部分显示省略号鼠标悬浮显示全部内容
二次开发element组件 el-tooltip+span 超出文本部分显示省略号鼠标悬浮显示全部内容EllipsisTooltip.vue(我是放置在了src/components)<template> <!-- :disabled="disabledTip" --> <el-tooltip ref="tlp" :content="text" effect="dark" :disabled="!tooltipFlag" :原创 2020-07-01 10:19:37 · 6935 阅读 · 1 评论 -
最大余额算法计算echars饼图legend图例中显示占比数
在echars饼图legend图例中显示占比数查资料发现echarts通过最大余额算法计算占比,记录下方便使用getPercentValue()getPercentValue(valueList, idx, precision){// 传入参数(数组数据,数组下标,精度),底下有例子调用 // 判断是否为空 if (!valueList[idx]) { return 0; } // 求和 var sum = valueList.reduce(function原创 2020-06-13 19:33:36 · 1282 阅读 · 1 评论 -
echarts 饼图取消legend图例的点击事件,保留鼠标悬浮legend上显示tooltie提示信息的事件
echarts 饼图因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏,进行了数据的二次处理,所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件,会关闭一个块,此时就需要重新去计算数据并重新渲染echarts,需求并没有要求做点击关闭部分块在占比图中,网上大部分资源是说设置selectedMode:false,但是这个一旦设置为false,那么点击事件和鼠标悬浮显示tooltie事件就会都取消,显然不符合,经过查官方文档发现legendselectchang原创 2020-06-13 17:30:53 · 10946 阅读 · 1 评论 -
echarts 数据量特别大且很多数值比较相近时label覆盖,legend与饼图重叠问题,鼠标在legend图例上悬浮时,tooltie提示信息显示全部信息
环境 vue+element+echarts饼图生产项目需求:1、产生的数据在饼图都有体现,tooltie显示数值,名称,占比等信息,2、lengend分页滚动显示内容,并且鼠标悬浮也显示tooltie信息3、饼图展示所有的数据占比且展示的顺序按照接口返回的数据顺序展示,但是只有数量前十的会显示label和labelLine只显示前十数据的label,需要自己计算数据其他基本在官方文档中都有记录。由于没有仔细查找文档导致想要在lengend显示tooltie提示信息,查找了很多时间,没原创 2020-06-13 15:33:42 · 4646 阅读 · 0 评论 -
vue 路由懒加载的三种方式,以及遇到线上版本因为路由懒加载会偶发出现Loading chunk xx failed 的解决办法
vue 路由懒加载的三种方式(本人常用ES6的import按需加载)const login = resolve => require(['@/pages/auth/login/login'], resolve)//vue异步组件按需加载方式const login = () => import(/* webpackChunkName: "login" */ '@/pages/auth/login/login')//ES6按需加载 本人常用方式const login = r=>re原创 2020-06-09 10:32:44 · 3074 阅读 · 4 评论 -
element 滚动滚动条时,打开的模态框关闭,select+tree这种类似特殊的下拉,在tree上滚动不能关闭
element 滚动滚动条时,打开的模态框关闭let lock = true;let el = null;const MousedownEvent = new Event('mousedown', {bubbles:true});const MouseupEvent = new Event('mouseup', {bubbles:true});const fakeClickOutSide = () => { document.dispatchEvent(MousedownEvent原创 2020-06-04 09:22:41 · 1423 阅读 · 0 评论 -
vue+echarts 暂无数据显示,横坐标可拖拽条添加,可拖拽条动态设置默认显示时间跨度
对于echarts图表目标:1、切换维度日和月,选择筛选条件起始时间和结束时间,筛选的内容,横坐标添加可拖拽显示的拖拽条,并且根据选择时间的数据量大小来设置默认显示的拖拽条宽度2、当查询没有数据的时候,显示暂无数据initEchart(){ const myCharts = this.$echarts.init(this.$refs.myCharts);//初始化echarts对象 myCharts.showLoading({text: "数据加载中...",textColor:原创 2020-06-03 17:58:17 · 2116 阅读 · 2 评论 -
vue+element UI 当前节点的向上所有父节点全部勾选,向下的所有子节点不进行勾选,并在文本框进行展示勾选内容,勾选时并隐藏下拉框
项目当中的需求实现自定义勾选树,当选择子节点的时候,当前节点的向上所有父节点全部勾选,向下的所有子节点不进行勾选,并在文本框进行展示勾选内容,勾选时并隐藏下拉框,鼠标放置文本框,出现清除按钮,点击清楚文本并重置树,并且需要记录当前勾选的标识,名称等节点信息。后端返回的树节点信息,到底有几层未知,数据量到底有多大未知。项目环境:vue+element UI 树(el-tree)<el-form class="sarch_container mt30" label-widt原创 2020-05-28 09:57:57 · 1140 阅读 · 0 评论 -
vue+element 中的table对列自定义排序
环境:vue+element:sortable="‘custom’" + @sort-change=“changeTableSort”> 对表格列自定义排序<el-table :data="tableData" border style="width: 100%" v-loading="loading" @sort-change="changeTableSort"> <el-table-column label="编号" width="80">原创 2020-05-28 09:08:11 · 4024 阅读 · 0 评论 -
vue+element纯前端实现导出表格数据为csv Vue + js-xlsx实现文件导入导出
vue+element纯前端实现导出表格数据为csv<template> <el-button type="primary" size="mini" class="page_breadcrumb_btn" @click="getExportList">导出</el-button></template>export default { name:'userInfo', data() { tableData: [{ us原创 2020-05-22 14:57:22 · 4941 阅读 · 4 评论 -
vue elementUI 时间控件优化 选择起始时间不能在结束时间之后,结束时间不能在起始时间之前
时间控件优化 elementUI选择起始时间不能在结束时间之后,结束时间不能在起始时间之前<el-form-item label="起始时间:" class="sarch_form_item"> <el-date-picker v-model="formLabelAlign.dateStart" type="date" placeholder="选择起始时间" :clearable=false原创 2020-05-18 09:54:34 · 1096 阅读 · 0 评论 -
vue+element-ui,重复点击按钮或多个请求同时报错时弹出多个提示框
环境:vue+element-ui问题:重复点击按钮或多个请求同时报错时弹出多个提示框解决办法:重写message,下一个弹框显示时关闭上一个弹框message.js/**重置message,防止重复点击重复弹出message弹框 */import { Message} from 'element-ui';`在这里插入代码片`let messageInstance = nul...原创 2020-04-28 12:26:12 · 3111 阅读 · 1 评论 -
vue 指令式防止重复点击
防止按钮重复点击vue 自定义全局指令// 防重复点击(指令实现)vue.directive('resetClick', { inserted (el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true s...原创 2020-04-24 13:01:05 · 1281 阅读 · 2 评论 -
获取时间的n天前,n天后
// 获取当前时间,day为number,getDay(-1),表示昨天的日期 方法开始 getDay(day){ var today = new Date(); var targetday_milliseconds=today.getTime() + 1000*60*60*24*day; today.setTime(ta...原创 2020-04-24 12:11:22 · 464 阅读 · 0 评论 -
vue项目 单点登录 需要进行访问固定地址且带有.html(客户指定地址不能进行修改)后缀的路径获取token以传到第三方api来获取有效可以
vue写的项目 中做单点登录 获取token需要通过客户的固定地址https://XXXX.XX.XX.XX:8081/ombs/pages/gatemsg.html?appid=6&token=V1uRstCQVCR2Am64YDH6BEn(其中ombs/pages/gatemsg.html这个路径不能动)来获取token,再将token传到第三方api来获取一个有效的key,才能...原创 2020-03-27 21:50:34 · 1530 阅读 · 0 评论 -
vue axios+定时器实现1秒实时数据刷新 页面关闭后上一个页面定时器访问的pending请求,在vue实例销毁时关闭定时器以及pending中的请求
项目当中列表查看目标云主机的监控,页面当中以定时器内每一秒发出一次请求方式来实现实时刷新数据,当点击列表选项卡后,监控页面刷新数据的axios请求有pending状态,此时在列表页(即父页面)会弹出监控页面(即子页面)的弹框,实现目标:即在监控页面切换到列表页面时,关闭监控页面的定时器和pending状态请求。会遇到的问题:当打开监控页面接口正常的时候,定时器正常运行,点击切换列表页后pen...原创 2019-12-04 14:51:13 · 4467 阅读 · 1 评论 -
vue element NavMenu :default-active根据路由进行自动配置(包括点击页面中的链接,即将前往的页面不在导航中,想要保持最外层级别的导航保持高亮)
导航当中设置:default-active值之后点击页面中的跳转链接(即将前往的页面不在导航中),此时的导航高亮就会消失,目标:点击父页面中的查看按钮,进入到详情页面,父页面导航仍然保持高亮。刷新浏览器导航,当前页面对应的导航仍然保持高亮。未退出系统,直接关闭浏览器的情况下,浏览器直接输入地址进入系统的,打开什么页面相对应导航高亮呈上代码:在index.js中添加下面代码:(路由权...原创 2019-11-28 15:25:23 · 3673 阅读 · 1 评论 -
vue 回车登录方法 记录
vue中回车键登录复制代码created() {let that = this;document.onkeypress = function(e) {var keycode = document.all ? event.keyCode : e.which;if (keycode == 13) {that.login();// 登录方法名return false;}};}复制...转载 2019-05-16 16:09:39 · 709 阅读 · 0 评论 -
vue自定义滚动条
//自定义滚动条import PerfectScrollbar from 'perfect-scrollbar';//对应的cssimport "perfect-scrollbar/css/perfect-scrollbar.css";const el_scrollBar = (el) => { if (el._customize_scroll instanceof Perfe...转载 2019-05-27 13:52:42 · 2922 阅读 · 0 评论 -
vue 自适应屏幕的宽高度
通过定义属性进行双向绑定改变body的高度,watch监测窗口大小变化时触发,改变属性值达到预期效果,代码贴上<template> <div class="bgColor" :style="'height:'+fullHeight+'px;'"> <div class="login-wrap"> <h1 class="login-title...原创 2019-05-23 10:37:55 · 25353 阅读 · 9 评论