- 博客(84)
- 收藏
- 关注
RSS订阅原创 前端大屏自适应实现高清还原设计图 scale
前段时间写过一个实现大屏的 比较简陋 也有些不足的地方 重新优化了一下可以根据你的屏幕尺寸进行大屏展示 但是必须是16:9的设计图 <page-resize> //页面dom </page-resize>import pageResize from '@/pages/intelligentoperation/resetScreenSize.vue'resetScreenSize.vuecomponents: { pageResize },
2022-05-20 15:10:15
783
原创 vue、echarts 3D立体饼图鼠标悬浮显示信息 多版本echarts同时存在以及出现的bug解决
1、设计给出的图当中涉及到了3d立体饼图，项目当中我用的是echarts，当我在浏览器里面扩展基本实现样式了以后发现项目报错了，百度翻译了一下 大概率是echarts版本引起的，上扩展里面改了下项目当中的版本之后发现之前的水球图又版本不一致了（5.x可能是和4.x的不一样了）2、定位到问题之后处理就是让两个版本的echarts同时存在即可npm i echarts5@npm:[email protected] install [email protected] "echa..
2022-05-20 15:03:59
3729
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
1458
原创 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
1685
原创 vue scp2 webpack gulp 前端自动化部署并将打包文件压缩成zip文件 发送到ftp服务器 解放双手
vue scp2 webpack gulp 前端自动化部署并打包成zip包 自动发送到ftp服务器
2022-04-27 15:19:03
2240
原创 vue 本地文件下载 pdf excel 等文件
下载本地文档资源亲测有用 并且兼容ie浏览器npm install downloadjs // 引入download.jsimport download from "downloadjs";download(url,'用户手册.pdf');
2022-04-19 11:01:21
1146
原创 重置默认样式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
166
原创 全国各省 省会城市经纬度汇总
const geoCoordMap = { '北京': ['116.3979471', '39.9081726'], '上海': ['121.4692688', '31.2381763'], '天津': ['117.2523808', '39.1038561'], '重庆': ['106.548425', '29.5549144'], '河北': ['114.4897766', '38.0451279'], '山西': ['112.5223053', '37.
2022-03-03 11:11:57
3453
原创 移动端rem.js
;(function (designWidth, maxWidth) { "use strict"; var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; function refreshRem() { var width = docEl.getBoundingClien
2022-03-03 11:08:11
218
原创 echarts china.js
echarts china.js(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['exports', 'echarts'], factory); } else if (typeof exports === 'object' &&
2022-03-03 11:01:13
264
原创 echarts 地图迁徙 迁入迁出
修改serise data的调用即可将迁入改为迁出<script src="./js/echarts.js" type="text/javascript" charset="utf-8"></script><script src="./js/china.js"></script>// 基于准备好的dom，初始化echarts实例const mapBoxEchart = echarts.init(document.getElementById('m.
2022-03-03 10:59:02
720
原创 h5改造freemarker模板，js操作freemarker字符串、数组等数据
h5改造成freemarker格式 标签中调用可以直接参考freemarker官方文档h5页面当中有很多调用后台数据，不使用ajax调用，直接调用freemarker的数据，js中和标签当中的调用方式基本差不多。js代码格式：举例字符串和数组格式字符串 let snldTitle2 = "${snldTitle2}"数组需要先定义一个空数组，获取到freemarker的数据之后再遍历到数组当中才可以使用let snldrqDataArr =[]; <#if snldrqD
2022-03-03 10:27:51
2236
原创 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
1024
原创 vue+echarts 监测窗口变化 缩放窗口切换有echarts的页面 echarts会空白不出现控制台也没有报错信息
**1、问题：**我有两个页面有大量的echarts 并且进行了监测窗口缩放echarts自适应大小在这里插入代码片，但是我进行缩放窗口之后切换这两个页面甚至切换其他页面，都会有echarts空白不出现，控制台也没有报错信息。**2、分析产生问题的原因：**因为控制台并没有报错信息，说明代码实现的逻辑没什么问题，也不会是echarts等版本的原因，首先排查切换 页面时是否是dom还未进行加载，也就是代码执行顺序的原因，经过检查之后并不是这样的问题，那么就只可能是一种情况了（因为控制台并没有报错的原因），那
2021-08-13 09:51:52
638
原创 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
2051
原创 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
607
原创 react + antd 可编辑表格bug 当表格数据多行时 点击修改一行的时间 同列其他行的时间显示视觉上也发生了变化
问题：react + antd 可编辑表格bug修改 当表格数据多行时 点击修改一行的时间 同列其他行的时间显示视觉上也发生了变化 在断点中显示其他的models里面的数据并没有全部发生改变 而只是页面显示上出现了错误排查原因思路：首先排查代码中时间组件的change方法中获取到的时间用来修改models中的数据，是否将表格全部的数据都进行了替换，在render中输出也发现models的数据是正确的 从而确定只是由于代码的某个地方出错 导致时间组件在页面显示的时候出错，至此想到是两个时间组件的
2021-03-05 10:34:37
1209
1
原创 React+antd 通过setState改变数据之后确定数据发生了改变，但是界面没有发生重新渲染
React+antd问题：页面当中通过this.setState 修改state数据之后页面没发生重新渲染1、首先排查数据是否进行了修改 在render中打印state的数据 发现数据已经发生了变化2、render 中jsx 判断语法是否进行了限制渲染3、最后排查到jsx中的遍历使用的是forEach 因为forEach本身遍历只注重过程，遍历完成之后并不会改变原数据，改用map进行遍历之后发现 页面重新进行了渲染...
2021-01-29 16:46:33
2431
原创 vscode react 对修饰器的实验支持是一项将在将来版本中更改的功能报错，jsx语法报错
1、vscode 对于react jsx语法报错选择右下角JavaScript 输入JavaScript React进行切换2、vscode中react 语法对修饰器的实验支持是一项将在将来版本中更改的功能。设置 “experimentalDecorators” 选项以删除此警告。搜索experimentalDecorators,设置"javascript.implicitProjectConfig.experimentalDecorators": true，该选项默认为false，需要改为tr
2020-12-10 16:35:49
274
原创 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
5966
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
1580
原创 ehcarts vue 水球图、边框四个角样式 页面布局
echarts+element+vue 水球图和一些css小样式（四个边框角）1、引入echartsnpm install echarts -snpm install echarts-liquidfill -s2、main.jsimport echarts from "echarts";Vue.prototype.$echarts = echarts;import 'echarts-liquidfill'3、页面调用// 基于准备好的dom，初始化echarts实例
2020-09-04 16:12:55
2667
原创 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
2796
原创 手动调用element DateTimePicker 日期时间选择器关闭事件
手动调用element DateTimePicker 日期时间选择器关闭事件有时候手动调用控件的关闭隐藏控件事件官网api中没有此事件，查看源码发现有一个handleClose事件，亲测可用，在日期选择控件上设置ref，直接调用handleClose()可达到关闭日期控件的作用...
2020-08-04 12:19:43
4771
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
332
原创 项目当中遇到的浏览器兼容问题
项目当中遇到的浏览器兼容问题1、例用弹性盒子布局，给六个块的宽度都是flex:1;,google、火狐等浏览器均正常，ie和edge这类浏览器是将父宽度均分，所以子元素超出就会折行，只需要将子元素设置强制不让折行后即可，white-space:nowrap;改后的效果如下2、利用多层穿透样式>>> /deep/时 edge、ie、火狐等穿透不了，google正常，可以将第二层的穿透样式改变修改的位置，例如放在第一层3、width:min-content;（外层宽度由内部元素宽
2020-07-29 15:10:16
525
原创 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
2591
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
1121
原创 生产环境和测试环境路径不同，通过定义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
531
原创 二次开发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
6888
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
1270
1
原创 echarts 饼图取消legend图例的点击事件，保留鼠标悬浮legend上显示tooltie提示信息的事件
echarts 饼图因为我在饼图渲染数据的时候对一些数据较小的label和labelLine进行了隐藏，进行了数据的二次处理，所以legend鼠标悬浮显示出tooltie是我所需要的而点击事件，会关闭一个块，此时就需要重新去计算数据并重新渲染echarts，需求并没有要求做点击关闭部分块在占比图中，网上大部分资源是说设置selectedMode:false，但是这个一旦设置为false，那么点击事件和鼠标悬浮显示tooltie事件就会都取消，显然不符合，经过查官方文档发现legendselectchang
2020-06-13 17:30:53
10848
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
4568
原创 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
3063
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
1397
原创 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
2090
2
转载 CSS预编译语言Sass、Less和Stylus
CSS预编译语言Sass、Less和StylusCSS预处理器（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。什么是CSS预处理器CSS预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码的编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。CSS 预处理器用一种专门的编程语言，进行 Web
2020-05-28 15:45:59
934
原创 vue+element UI 当前节点的向上所有父节点全部勾选，向下的所有子节点不进行勾选，并在文本框进行展示勾选内容，勾选时并隐藏下拉框
项目当中的需求实现自定义勾选树，当选择子节点的时候，当前节点的向上所有父节点全部勾选，向下的所有子节点不进行勾选，并在文本框进行展示勾选内容，勾选时并隐藏下拉框，鼠标放置文本框，出现清除按钮，点击清楚文本并重置树，并且需要记录当前勾选的标识，名称等节点信息。后端返回的树节点信息，到底有几层未知，数据量到底有多大未知。项目环境：vue+element UI 树（el-tree）<el-form class="sarch_container mt30" label-widt
2020-05-28 09:57:57
1128
原创 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
4011
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人