- 博客(79)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 echarts--柱状图每个柱子和图例对应，给数值和纵坐标自定义添加'%'
简单描述需求：1、每个柱子表示的内容 和 图例对应 ，并且相对应的柱子和图例颜色一致；2、纵坐标和 柱子上边 数值都需要添加’%’；3、图例显示在右边，涉及到位置设置；看下图，是你想要的柱状图吗？接下来直接上代码！！！重点看代码中的注释不要忘记引入echarts.min.js和jquery.min.js哦！！！<!DOCTYPE html><html la...
2019-05-27 11:24:46
14861
7
原创 百度地图--展示行政区划（省市区县）和添加多个标注点案例
百度地图JavaScript API支持HTTP和HTTPS，免费对外开放，可直接使用。接口使用无次数限制。在使用前，您需先申请密钥（ak）才可使用。申请密钥链接: http://lbsyun.baidu.com/.然后按照提示一步一步操作就可以了，这里我们不重点讲如何申请密钥了。接下来我们重点看案例的效果图（案例以中国–浙江–杭州–桐庐县为例）：1、一级地图（中国）2、二级地图（...
2019-04-11 15:21:51
12295
2
原创 echarts 实现柱状图左右横向对比显示
重点看代码中的注释 ： 处理负半轴的数据显示，后台传负数，代码中处理显示时为正数接下来直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>对比柱状图</title> <script type...
2019-03-29 11:22:09
10936
3
原创 高德地图2.0使用SvgMarker.Shape.IconFont方法将iconfont矢量图作为图标
使用SvgMarker.Shape.IconFont方法将iconfont矢量图作为图标
2022-10-22 14:45:51
1550
原创 vue的title标签中的htmlWebpackPlugin.options.title
htmlWebpackPlugin.options.title
2022-09-17 13:50:00
1347
原创 解决项目外链新窗口访问海康视频平台URL报错403问题 Whitelabel Error Page
Whitelabel Error Page
2022-09-07 11:37:33
2158
1
原创 elementUI实现多语言切换功能
需求描述：需要中英韩三种语言切换功能，第三方翻译工具有局限，1）翻译不准确，2）调用第三方接口有字数限，所以，最终决定翻译页面中静态文字，接口返回数据不翻译；实现方案：elementUI提供的国际化多语言。翻译内容分俩部分：1）页面中自定义内容变量；2）elementUI自带插件（日历、表格翻页等）具体实现1、安装vue-i18nnpminstallvue-i18n2、在src文件夹下按照如下目录结构新建i18n文件夹和js文件|--src|------i18n|-..
2022-05-16 18:56:38
5521
原创 elementUI实现翻页多选功能
elementUI实现翻页多选使用以下事件和属性配合：selection-change事件：当选择项发生变化时会触发该事件（当分页切换时，会在数据更新之后保留之前选中的数据）:row-key=""属性:行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的分页多选功能1、在el-table中添加 :row-key="getRowKeys"<el-tableref="form"...
2022-05-11 10:18:12
4388
2
原创 高德地图实现脉冲线和飞线效果
应用场景：水环境项目，想实现水源追溯功能，即断面水源有问题，追溯其上游站点；功能描述：1）脉冲线方向代表 追溯方向，有动画可明显看出方向；2）俩点之间可自定义线的颜色，代表水质等级或其他；3）脉冲线宽度可自定义，代表水流量或其他；注意事项：1）高德地图和loca API 版本；2）俩种引入方式编码时区别；3）脉冲线/飞线数据格式在文章末补充；具体实现：使用高德地图2.0版本提供的loca API 2.0中new Loca.ZMarkerLayer的方法；1、引入高德地图、loca、...
2022-05-09 16:29:24
5241
8
原创 前端跳转链接报错403的原因以及解决方案
描述：项目需要外链其他网站资源，跳转时报403报错解决方案index.html中添加代码<meta name="referrer" content="no-referrer">再试下，可以跳转了，完美解决。
2021-10-20 17:07:26
780
原创 vue使用qrcodejs2生成二维码
前端实现生成二维码功能1、安装 qrcodejs2npm install qrcodejs2 --save 2、引入qrcodejs2//在main.js或者页面中引入import QRCode from "qrcodejs2";3、具体代码methods: { qrcodeRender(id) { this.$refs.qrcode.innerHTML = ""; //获取当前的ip和端口，不要写死 const ipP
2021-07-12 10:35:48
1404
原创 解决echarts中多条曲线X轴跨度不同缺失点，数据连接断开问题
问题描述解决多条曲线，x轴跨度不同，数据连接会断开的问题；有的4个小时有一个值，有的1个小时有一个值，4个小时的点会断开解决方法series数组中每个对象添加 connectNulls: true 属性上边是我项目中循环添加属性，直观些看下面//解决缺失的点，数据正常连接不断开series:[ { connectNulls: true, //添加此属性 data: ["", "12.2", "", "", "", "11.8", "", "", "", "13.5", "",
2021-04-19 19:41:46
2023
原创 【Vue-router】解决父级路由不需要 component的情况
问题描述后台系统页面中动态配置菜单，只有二级菜单有相应前端组件，一级菜单只是展示作用；所以，出现 只设置二级路由，但一级路由不需要 component 的特殊需求；看下页面展示：（移入一级菜单就弹出二级菜单，所以二级菜单才会有相对应的前端组件）[{ id:8, path: '/WryModule', name: '', meta: { title: '污染源在线监测' }, component: '', //这里是空的情况
2021-03-24 14:56:54
7468
7
原创 【vscode】vscode启动时一段时间cpu占用100%，导致电脑卡顿
问题描述我们在使用vscode的时候，启动特别卡，有时候直接就把电脑卡死了，cpu占很高，吃内存现象1、打开 settings，搜索?：search.followSymlinks，改为 false2、还是在编辑器中找到 文件 > 首选项 > 设置然后搜索exclude,在Files:exclude下面有一个添加模式，输入**/node_modules，设置忽略node_modules这个文件夹重启vscode。...
2021-03-16 10:04:12
2518
1
原创 【node】process.env.NODE_ENV在Vue中的应用
process.env.NODE_ENV是什么process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。可使用 Node.js 命令行工具直接进行查看。命令行中执行 node -> process.envprocess.env 包含着关于系统环境的信息，但是并不存在 NODE_ENV 这个东西，需要自己手动配置，这个变量主要用于标识当前的环境（生产环境，开发环境）。不同系统有不同的环境变量配置方式NODE_ENV 与 Vue（官方文档）官方地址：h
2021-03-13 13:33:09
1381
原创 解决 vue热加载编译速度慢问题，引入按需加载插件 dynamic-import-node
遇到问题当编译项目时，需要花费很长时间，会在67%左右卡顿解决办法1、安装 babel-plugin-dynamic-import-nodenpm install babel-plugin-dynamic-import-node2、vue-cli3：修改babel.config.js文件 （vue-cli3）vue-cli2：.babelrc文件里添加配置dynamic-import-nodemodule.exports = { presets: [ '@vue
2021-03-12 10:47:32
5881
1
原创 vue 父子组件的生命周期顺序
vue 父子组件的生命周期顺序1、加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted我们看到是先执行父组件的beforeCreate, created, beforeMounted这三个，虚拟Dom生成还没有挂载到页面上；beforeMounted之后执行子组件的四个生命周期，子组件先挂载完成，接着父组
2021-02-23 11:10:37
582
原创 解决vue封装的echarts组件多次调用出现id重复问题
问题描述封装的echarts组件多次被调用，id重复，导致页面不渲染，数据覆盖等一系列问题，id从父页面传入也达不到我要的效果解决方法干掉id，使用ref//修改前<div class="component"> <div class="WH" id="chart"></div></div>//修改后<div class="component"> <div class="WH" ref="chart">
2021-02-22 17:48:57
3593
9
原创 正则手机号验证最全包含177、166、199等验证
/*** 手机号码* 移动：134 135 136 137 138 139 147 150 151 152 157 158 159 178 182 183 184 187 188 198* 联通：130 131 132 145 155 156 166 171 175 176 185 186* 电信：133 149 153 173 177 180 181 189 199* 虚拟运营商: 170*/var checkPhone = (rule,value,cb) =>{ .
2020-12-18 13:55:06
1194
原创 【VUE】使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面不渲染问题
问题描述：点击按钮就修改当前的状态，不想重新加载数据，体验不好；使用this.$set 来修改属性值，打印发现 列表数据已经改变了，但是并没有渲染到页面上；解决办法：this.$set(this.dataList[index],"radioState",code); this.$forceUpdate();//修改属性值页面不刷新问题；使用$forceUpdate强制刷新原因因为数据层次太多，render函数没有自动更新，需手动强制刷新。...
2020-11-22 11:24:19
1384
原创 【uniapp】全面屏、刘海屏适配（iphoneX适配）及安全区设置
问题描述iPhoneX和iPhoneX Max 的底部小黑条挡住底部tab，全面屏没有给底部留距离解决办法/*解决iphoneX等大屏手机底部小黑条挡住tab的解决方法：安全区域距离底部边界距离env() 跟 constant() 需要同时存在，而且顺序不能换。*//* #ifdef H5 */body { padding-bottom: constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */ padding-bottom: en
2020-11-18 13:43:45
2583
原创 【解决】系统上禁止运行脚本：提示：https:/g o.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
问题描述：编辑器中启动项目，报如下错误：原因首次在计算机上启动 Windows PowerShell 时，现用执行策略很可能是 Restricted（默认设置）。Restricted 策略不允许任何脚本运行。需要收到开启运行脚本解决方法：1、win+x 打开PowerShell（管理员）2、set-ExecutionPolicy RemoteSigned //设置为打开3、键入Y或者A,同意4、执行get-executionpolicy查看是否更改成功，为RemoteS
2020-11-09 11:43:45
27410
12
原创 使用Form Generator解决前端vue+elementUI动态表单功能
使用场景：在添加数据时候，页面上有固定的一部分表单，而另一部分表单相当于扩展属性，想做成动态生成，产品经理可以自己通过配置，页面就有了扩展属性的表单；关于Form Generator描述网站网址：添加链接描述GitHub：添加链接描述网站描述：基于vue 的element UI 表单设计及代码生成器，可视化设计表单，一键生成原生的vue单页表单代码；vscode插件：form-generator-plugin具体实现1、2、前台页面如何使用为了方便我们自己测试，就先在前
2020-09-03 10:07:45
26493
17
原创 解决vue v-if 不重新渲染组件问题
问题描述：tab切换，发现v-if 的组件并没有销毁掉组件原因：Vue组件v-if新渲染的组件不更新：可能原因是Vue识别到是相似组件（高度相似甚至相同）不会更新元素。解决办法：给原来的组件和新组件分别给不同的key值让Vue识别为不同的组件。...
2020-08-19 10:52:29
9885
6
原创 解决elementui文件上传在回调函数中传自定义参数
问题描述：上传文件的时候想传递自定义的参数，发现官网上只提供了下图使用方法：解决办法：如下写法，可以在函数中拿到想要传的 item 自定义参数:on-success="(response,file,fileList)=>handleUpSuccess(item,response, file,fileList)"尝试不可使用下面方法进行传参：会出现拿不到原本回调函数参数的情况，:on-success="handleUpSuccess(item)" //handleUpSuccess
2020-08-04 17:47:04
3146
1
原创 解决VUE项目重复点击菜单报错：Avoided redundant navigation to current location: “/xxxxx“. 问题
描述报错见下图：解决方法：在router文件夹下添加下面一段代码// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}...
2020-07-11 16:49:53
1517
2
原创 解决 vue中props对象中设置多个默认值问题
1、遇到问题：props中设置了默认值，但是获取时（获取父页面没有传的属性） 打印出来是undefined子组件props: { paramsObj: { type:Object, default:() => { return { tabList: [], tableFixedHeader: [], showHandleCol:false,
2020-07-09 10:58:13
19798
3
原创 解决：无法加载文件 C:\Users\user\AppData\Roaming\npm\npx.ps1，因为在此系统上禁止运行脚本 。
1、以管理员身份打开 powerShell2、输入 命令：set-ExecutionPolicy RemoteSigned ，回车；输入 Y ，回车；3、返回 执行 npx … 命令，发现可以了。
2020-06-22 10:13:48
14337
3
原创 【小程序】onReachBottom 事件为什么不能触发 ?（一秒搞定）
onReachBottom开发中遇到onReachBottom 不能触发控制台只看到Invoke event onReachBottom in page: pages/alarm/alarm自己的代码：到最后才发现是因为页面生成得时候就自带onReachBottom 和onPullDownRefresh俩个方法：（自己写的方法在上边，给覆盖掉了）记录这里，给跟我遇到一样问题的你！！...
2020-04-04 15:49:30
16024
43
原创 解决 elementUI 在IE下 table 表格宽度不是100%的问题
问题描述（看下图）：解决方法：.el-table__header{ width: 100% !important;}.el-table__body{ width: 100% !important;}
2020-01-19 10:56:03
4154
6
原创 解决elementui动态切换table列内容，出现数据闪动情况
功能描述：动态显示表格的某些列的内容二级表头也是动态显示解决问题:先看下我录制的gif图，会有数据闪动的情况解决方法：首先，不要使用v-show，要使用v-if。其次，表格加载属于懒加载，所以每次切换内容需要让表格重新加载一次实现方法：给表格加索引，每次切换改变索引值直接上代码：// 控制表格切换<el-radio-group size="mini" v-mode...
2019-12-21 11:21:38
9233
15
原创 Vue-Devtools调试工具安装
找了很多资料，大部分都是1、要安装Vue-Devtools，在一个github下面用git clone或者手动下载一个叫做vue-devtools-master的文件。2、然后用npm进行install，3、然后再npm install build。但是这中间可能会报很多错误，需要去一一解决；然后找到了一种简单的安装方法，其实就是大神们自己用npm处理过的Devtools；Vue-De...
2019-11-19 10:24:15
213
原创 $router和$route的区别
routerrouter :是 VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，是一个全局对象，他包含了所有的路由包含了许多关键的对象和属性；举例：history对象：\color{red}{history对象：}history对象：:$router.push({path:'home'});//本质是向hi...
2019-11-17 23:35:55
5778
原创 Vue Router 的params和query传参刷新后参数丢失情况
开发中遇到刷新页面参数丢失的情况params是路由的一部分，创建路由时，须要在路由后边添加参数名。query是拼接在URL后边的参数，创建路由时，不用必须添加，可以直接跳转的时候携带即可params 参数丢失情况：params 传参需要在路由后边添加参数名，例如：/:id/:name，如果在路由中没配置参数，当页面刷新之后，所传参数就会消失如果在路由中配置了参数，例如： /:id/...
2019-11-17 23:14:29
5493
1
原创 vue-router路由动态传参query和params的区别
1.query方式传参和接收参数//路由{ path: '/detail', //这里不需要参入参数 name: "detail", component: detail//这个details是传进来的组件名称 }//使用： //方法1：<router-link :to="{ name: 'details', query: { id: 123 }}"&g...
2019-11-17 22:58:14
236
原创 router.push()，router.repalce()，router.go()使用
router对象提供了三个用于跳转链接的方法：router.push( ... ) =>跳转到某个子页面，并在history中添加一条记录router.repalce( ... ) =>替换当前的页面，其实也可以理解为跳转，和push的区别就是不会在history中添加记录router.go(number) =>刚才提到的history，在go()中被使用，跳转到上一页就...
2019-11-17 21:07:31
801
原创 display-inline+calc实现左中右布局，中间自适应
.box {clear: both; /* 干掉间隙 */ font-size: 0}.left { display: inline-block; width: 200px; font-size: 16px; background-color: #0000FF;}.right { display: inline-block; ...
2019-11-14 23:18:10
206
原创 使用grid实现左中右布局，中间内容自适应
grid很方便实现左中右布局，哪个div需要做自适应，布局时候就应该放到中间.box{ display:grid; grid-template-columns: 200px auto 200px;}.left{ }.right{ }.center{ }<div class="box"> <div class="left"&...
2019-11-14 23:00:31
984
echarts---中国各城市独立Json格式文件下载
2019-03-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人