- 博客(31)
- 收藏
- 关注
原创 保持 ECharts 饼图图例和 Tooltip 比例值一致
在 ECharts 中,关闭一个图例项时,默认情况下饼图会重新计算剩余部分的比例。为了保持图例中显示的比例值与 tooltip 中显示的比例值一致,需要进行一些特殊处理。在 tooltip 的 formatter 中,使用原始数据总和来计算比例,而不是使用过滤后的数据。关闭默认的标签显示,只在悬停时显示。图例中显示的比例是基于原始数据的。属性来默认关闭某些图例项。
2025-03-26 17:53:54
141
原创 vue路由判断页面是否有上一页,没有上一页点击返回返回到项目首页
这种情况通常发生在直接分享页面链接,当前页面并没有上一页,点击返回会直接将地址栏清空,所以我们可以判断页面是否有上一页,没有上一页点击返回返回到项目首页,或者没有上一页时隐藏返回按钮。这个判断有无首页时,定义一个变量控制返回按钮的显隐即可。
2024-08-23 18:16:52
838
原创 this.$router.go(-1)返回,如果是同一页面不同参数,不刷新页面
同一个路由下,只是参数改变,this.$router.go(-1)默认为路由没有改变,因此并不重新加载页面。解决方法:在watch监听路由参数改变,重新调用接口刷新页面,或者重新赋值参数。
2024-08-23 18:09:14
870
原创 video标签在ios系统中自动以第一帧为视频封面
video :src="video_src" controls="controls" ></video>在安卓系统中直接可以以第一帧作为视频封面,在ios系统中不显示视频封面。另外,手机系统的测试要注意在测试环境中看效果,有时候在开发环境中没有问题,放到测试环境中就会发现不兼容。方法二 手动给视频加个图片作为封面 poster="img.url"方法一 这种方法是直接以视频为播放封面。
2024-08-23 18:00:13
848
3
原创 vue h5 搜索框调起手机键盘事件 通过键盘搜索 兼容ios且处理自动填充背景色及消除ios背景色
3 input type="search",即可调起手机键盘,将键盘中的换行或者什么其他的按钮变成搜索。2 form标签必须有action,action="javascript:return true"4 @keyup.13="search" 绑定键盘搜索事件,点击键盘上的搜索按钮搜索。5 点击键盘搜索后,this.$refs.input1.blur()//关闭键盘。1 必须加form,用form标签包裹input,兼容ios系统。
2024-08-23 17:42:35
350
原创 vue2跳转外部链接 ios系统浏览器返回时需要返回两次
当用a链接window.location.href跳转时,项目中发现ios系统浏览器返回时需要返回两次才能到达上个页面,而安装系统手机未发现此问题,这是ios系统浏览器自带的特性。第一次返回相当于只是返回到vue项目中,第二次返回才是到上个页面,解决方式有两种。第一 改用window.open(url,'_blank')方式跳转。第二 使用路由导航钩子。
2024-08-19 17:58:06
351
原创 js懒加载
懒加载的目的就是为了提高用户体验 降低服务器压力 有时候我们的内容很长很多 但是屏幕只有那么大一点 一次加载出来全部显然是不合适的 懒加载就是为了让页面显示在屏幕可视区域内再加载当前的数据 像大型购物网站都有这个操作。或者可以这么写 用loading占位加载 data-original是真实要加载的图片 判断图片到屏幕可视区域内 用data-original的值替换src 道理是一样的。先用_src占个位置 到加载的时候再把_src的值赋值给src。下面以图片懒加载举例说明懒加载的过程。
2023-06-26 18:36:44
243
原创 原生js分页
项目中要对数据进行分页处理 一般分页我们都用插件 比如elementui bootstrap之类的 但其实原生的我们也应该理解思路 理解思路有点代码功底自己也能调试出来。我们首先需要知道一共有多少条数据(分多少页,接口请求来的总数据条数。可以先请求一次接口,拿到总条数) 一页多少条数据 (后端给的参数)最近工作好忙 工作中也遇到了很多问题 也很久没有更新博客了 闲下来继续更新吧 大家一块学习。
2023-06-26 15:39:28
684
原创 如何增强前端代码的健壮性
所谓前端的代码健壮性 是指我们的代码在正确和规范的环境中运行时 保证其正确 快速 高效 但是还有一些特殊的环境 比方说后端返回值出现问题 用户操作出现问题 没有网络 页面某些部分没有请求出数据 仍然要保证我们的代码能够正确的运行 给用户一些提示和反馈 不至于大面积的崩溃 出现一些让人意想不到的结果。计算机内的浮点数计算和我们数学上理解的浮点数运算不是一回事 比如计算机中 0.1+0.2!通过以上代码端的控制 最大程度上保证我们的程序在应对一些怪异的用户行为时 仍然是可用的。3 能应对用户一些怪异的行为。
2023-03-23 18:29:04
323
原创 el-checkbox-group多选和选择全部问题
项目中有个需求 搜索学校的时候有选择全部和多选省份的功能 使用用element ui的多选功能 做些修改和封装。至于element的前面复选框的问题 样式里把复选框dispaly:none就可以了。
2023-03-01 17:15:12
1611
原创 for循环中止循环和forEach中止循环
在很多场景中 我们需要判断是否满足条件 满足条件拿到数据或者提示信息中止循环 且中止下面代码的继续执行 多用在登录判断 用户信息填写 绑定手机号密码等的判空和正则判断。return false/return只会中止本次循环而不会让全部的循环不再执行。首先 forEach是没有 break和continue的 写了会报错。forEach可以通过抛出异常的方式强行中止循环。判断符合条件 中止循环并中止程序。判断符合条件 中止代码执行。抛出异常强行中止循环。
2023-02-23 16:23:34
721
原创 element自定义主题色
选择好自定义的主题色 右上角下载下来 放到自己的项目文件夹里。仅替换主题色 官网给出的在线主题生成链接。修改main.js的引入。
2023-01-04 18:37:13
241
原创 解决echarts图例去圆点 堆叠折线图小数数据出问题以及设置Y轴刻度
线图所显示的默认图例是带有原点的,只需要在对应的线图上添加属性即可:itemStyle:{ opacity:0 } 设置Y轴刻度折线图有多条时 数据带小数 单条折线数据正常 多条数据显示不准确去掉每个series的stack属性
2022-12-05 00:09:33
1928
原创 解决npm 下载工具包太慢的问题
npm对应的地址是国外的 需要海底电缆传输 受各种因素影响 传输到国内的速度确实受到影响 我们可以把下载源换成国内的淘宝镜像 这样速度会快很多。1 用npm下载cnpm 把地址换成淘宝镜像。2 设置改变默认下载地址 还是用npm下载。3 自己按需求切换下载地址。以下有三种方法可以参考。
2022-11-16 11:54:33
1084
原创 css多行文本溢出显示省略号 兼容ie
兼容ie的写法 目前没有特别好的纯样式可以兼容ie 我们就要考虑用js来处理。先来说一般写法 兼容谷歌火狐 不兼容ie。
2022-11-14 16:41:47
1160
原创 cnpm报错解决
报错:Error:Cannot find module 'fs/promises。升级到最新的版本:n latest(最新版本)n stable(最新稳定版本)清理npm缓存:npm cache clean -f。安装版本管理工具:npm install -g n。解决办法 降低cnpm版本 或者升级node版本。原因:node版本太低或者cnpm版本太高。cnpm -v查看版本。再安装低版本的cnpm。1 降低cnpm版本。2 升级node版本。
2022-11-11 15:50:19
2374
原创 html表格td溢出显示省略号
给td中的文字套了一个p标签,给p标签设置overflow:hidden;并且给p设置宽度 就可以解决以上问题。/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。设置此属性之后td以50%和50%显示 */text-overflow:ellipsis;
2022-11-07 22:24:24
1028
原创 promise()的理解和使用
promise用来处理异步代码 Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。promise.all()是将所有的参数接口都调用 返回出结果后再返回 并且按照参数顺序返回结果数组。promise.race()是异步调用 哪个接口返回值快 就返回哪个接口的数据。
2022-09-27 18:53:18
1167
原创 js百度地图获取当前定位经纬度及省市区
注意new BMap()是2.0版本的 new BMapGL()是1.0版本的 如果用new BMapGL()会报错 BMapGL is not defined。因为一开始就写错了 这个问题困扰了好久。首先需要引入百度地图api 和jq。
2022-09-27 17:21:29
7386
1
原创 js动态渲染html 给html绑定点击事件
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
2022-08-24 17:06:02
2450
1
原创 程序员平时如何学习提高技术
很多时候,我们因为工作原因需要快速学习某项技术,进而在项目中应用。有时工作闲暇之余,想进阶自己的技术。或者说,我们想要去面试的公司要求的某项技术我们之前没有接触过,为了应对面试需要,我们需要快速掌握这项技术。...
2022-06-08 18:03:47
2450
原创 js 实现表格合并单元格
需求 实现下面的表格效果代码://利用去重原理 function table(dom) { var arr = []; var f= document.getElementsByClassName(dom); for (let i = 0; i < f.length; i++) { if (arr.indexOf(f[i].innerHTML) == -1) { arr.push(f[i].innerHTML); var.
2022-04-15 16:21:35
3045
原创 H5引入vant异步加载省市区三级联动
html <van-field v-model="placeCityValue" is-link readonly required input-align="right" label="籍贯所在市" placeholder="请选择籍贯所在市" @click="placeCityshow = true" class="jiguan"></van-field> <van-popup v-model="pla...
2022-03-17 16:38:05
2307
1
原创 html通过cdn引入element字体图标无法显示的解决办法
问题:element通过cdn引入时,按官网引入线上css样式图标样式正常显示没问题,如果引入本地css则字体图标不显示 <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> --><!--线上css地址--> <!-- import Vue before Element --><script src="../j
2022-03-17 15:32:57
3303
2
原创 html引入vue请求数据
vue不支持直接发送AJAX请求,需要使用vue-resource、axios等插件实现。首先需要引入 vue.js,vue-resource.js<script src="../js/vue.js"></script><script src="../js/vue-resource.min.js"></script>下面是链接https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.
2022-03-03 12:06:33
1917
原创 点击列表限制选择个数并且给选中的项目按点击顺序标识排序
需求1:考生点击科目 限制所选科目的个数分析:循环渲染列表,用一个空数组接收选中的项,取消一个在这个数组里删除掉对应的项,判断数组长度如果大于3,return结束程序代码:template <div class="chosesub">选择选科 <span>需选择三门学科</span></div> <ul class="content"> <li v-for="(item, index) in touristL
2022-03-02 18:35:34
1595
原创 vue点击按钮保存图片至本地
需求:项目中需要获取二维码展示出来并且能够保存到本地扫描 类似下面这种分析:主要是用了a标签的下载功能 ,a中 标签href实现点击下载目标链接功能,只需要在a标签里面加上download属性就可以实现下载目标链接的效果例如:<a href="../../../static/images/Promise.png" download="Promise.png">点击下载</a>download是文件名,也可以不写文件名,这样下载下来就是默认文件名。下面看代.
2022-03-01 19:05:40
5249
1
原创 Promise.all的执行顺序和返回顺序
Promise.all()用法:多个接口全部返回值后再进行下一步操作Promise.all([a(),b()]).then(res=>{console.log(res)})最近项目中有个问题 需要同时返回a和b接口的返回值再做下一步 并且要对不同的返回值做不同的处理 这就需要区分res的返回值中究竟是否有返回顺序zsgroupMemberApply(qs.stringify({ checkResult: 0 }) ).then(res=>{ console.log('A
2022-02-25 12:22:14
9163
原创 vant 通过组件调用 Dialog 时 show-confirm-button使用及展示多个按钮
最近开发复盘项目时遇到这么一个问题 原先dialog自带的取消和确定按钮要隐藏掉 写自定义按钮并且要求有三个按钮 查vant官网只有俩按钮的 找了一些资料实现了隐藏原先按钮并多个自定义按钮首先来看普通的dialog的使用 官网Vant - Mobile UI Components built on Vue这样的写法是只有取消和确认两个按钮的 接下来看多个的实现过程1 首先要隐藏掉默认的取消和确定按钮看官网文档给show-confirm-button和show-cancel-b..
2021-11-02 18:53:02
7878
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人