- 博客(30)
- 收藏
- 关注
RSS订阅
原创 使用js，对数值保留小数点后两位的处理（两种情况）
Html部分：<div class="text primary-text"> <span>合计：</span> <span class="money">￥{{totalMoney | numFilter}}</span></div>Js部分：(注意toFixed方法只能用于数值型数据)// 情况一：保留...
2018-05-21 09:57:47
87426
8
原创 使用js遍历出树的所有同级节点，并返回一个二维数组
需求：遍历出树的所有同级节点，并返回一个二维数组（原始树与新生成的二维数组如下） 解决方法1：const formatArrA = arr => { let initArr = [] let curChildren = [] const format = (ar, i) => { initArr[i] || (initArr[i] = []) curChildren = [] // 每次循环重新清空curChildren...
2020-12-11 11:32:05
1021
原创 a-select中placeholder设置无效的解决办法（两种情况）
需求：1. a-select绑定基础类型数据 2. a-select使用了labelInValue，绑定的数据类型为object方式一：只取option的value值<a-select placeholder="请选择功能类型" v-model="submitObj.operation" @change="typeChange"> <a-select-option v-for="(item, index) in o...
2020-12-10 14:43:33
6377
原创 封装一个方法判断js的所有数据类型
需求：输入一个数据，精确返回数据的类型judgeType(123)// "number"judgeType('123')// "string"judgeType(true)// "boolean"judgeType(undefined)// "undefined"judgeType(null)// "null"judgeType({a: 123})// "object"judgeType([123])// "array"judgeType(function a() { re
2020-11-20 09:24:25
326
原创 使用Vue + ant-design + Cropper二次封装一个公共图片裁剪组件
效果展示：代码实现：（cropper安装、上传图片方法请自行百度）<template> <div class="cut-img-container"> <!-- 裁剪后图片展示、预览、删除，选取裁剪图片 --> <div v-if="afterCutImgUrl && afterCutImgUrl !== '--'" class="item-img-container"> &l..
2020-07-27 10:20:39
606
原创 解决模糊搜索接口返回的数据与页面显示不对应的问题
问题：使用ant-design中select的search方法，添加模糊搜索时，接口即时请求了，但是页面绑定的数据未更新为最新的（比如： 按键输入123时，需要展示为“123”的搜索结果空数组，但是页面并没更新为空）；经排查发现此次模糊搜索会发送三个接口请求，但是“123”无结果数据，“1”的有数据返回最慢，导致页面绑定的变量展示的是“1”的搜索结果。解决办法：<a-select placeholder="请选择对象名称" showSearch :fi
2020-07-26 17:44:05
643
原创 通过正则获取html中img的url，将其上传到自己的服务器，并生成新的url替换原图片url
需求：将其他网站的文章复制到自己网站的编辑器的时候，图片地址是别人网站的，这时候需要获取到图片资源上传到本地服务器，并替换掉img的srcreplacePicturePath (html) { let imgArr = [] // 此处matchStr匹配的img标签的整体内容，groups匹配的是img中src的url // imgArr是要当前html中要批量上传的图片地址 html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*
2020-07-12 16:36:03
780
原创 自定义echarts中tooltip显示的内容
/** * echarts的tooltip显示的内容 * @param {*} params 坐标轴触发获取的源数据 * @param {*} noPercent 是否带%，true或false */export const chartTooltip = (params, noPercent) => { // 判定数据是否为对象或者数组 if (!(params instanceof Array)) { return '请传入正确格式的数组' } // axisVa.
2020-06-24 10:22:44
760
原创 使用js，根据对象数组中对象属性值的不同将数组进行分组-3
需求：将下面数组-对象中的index_name相同的对象抽离出来，放在不同的数组当中let tempArr = [ { domain: 'a', index_name: '云淡风轻' }, { domain: 'b', index_name: '递归' }, { domain: 'c', index_name: '云淡风轻' }, { domain: 'd', index_n...
2020-03-27 15:05:57
751
原创 使用js，根据属性值判断对象数组中是否包含某个obj，有则替换无则添加
需求：判断数组对象中是否有某个对象，有则替换无则添加/** * 判断数组对象中是否有某个对象，有则替换无则添加 * @param {*} initialArr 源数组 * @param {*} obj 判定的对象 * @param {*} pro 对象中的某个属性（通常为id） */export const formateArrObjData = (initialArr, obj.........
2020-01-09 16:31:30
3788
原创 浮点数精度导致的数值计算问题
需求：浮点数精度导致的数值计算问题，需要对数值计算进行格式化处理，保留小数位为截取，不进行四舍五入/** * 带基数、后缀的数值格式化 * @param {*} num 源数据 * @param {*} base 特定的基数（比如100, 1000） * @param {*} decimals 保留的小数位数（只截取不进位） * @param {*} suffix 需要带的后缀 ...
2019-12-30 15:58:30
268
原创 使用js，将后台返回数据中数据值为空的字段全部替换为“--“
需求：将下面数组或者对象中的字段为空的值全部替换为"--"let tempArr = [ { domain: "a", index_name: "" }, { domain: "b", index_name: "递归" }, { domain: "c", index_name: "-" }, { domain: "d", index_name: "遍历" }, { dom...
2019-11-14 16:06:45
2779
1
原创 Vue中定制公共组件之modal
需求：整个项目的modal统一风格（本文以ant design of vue为例）commonModal组件：<template> <a-modal :title="modalTitle" centered :maskClosable="false" :visible="showModal" ...
2019-09-20 15:58:46
2831
原创 Vue中定制公共组件之loading
需求：在页面加载前或者请求响应之前使用loadingcommonLoading组件：<template> <section> <div class="common-loading"> <div class="loading-container"> <img src="../../assets...
2019-09-20 15:33:07
371
原创 使用js对数值进行单位换算
需求：数值超过四位数单位换算为“万”，超过八位数时单位换算为“亿”，并保留小数点后两位export const unitConverter = num => { if (!num || isNaN(num)) { return '请传入数值格式的数据' } // 此处为防止字符串形式的数值进来，因为toFixed方法只能用于数值型数 num = Number(n...
2019-09-18 15:34:12
5283
原创 使用js计算字符串的长度
分析：字符串中一个英文字母占一个字节，一个中文汉字占两个字节，中文字符基本是两个字节，英文字符基本是一个字节，其中ASCAIl码为94的符号^也为两个字节（以下结果为普通字符串的近似字节长度，对于表情啥的不适用）export const calculateStringLength = str => { if (typeof(str) !== 'string') { return...
2019-09-18 15:21:16
2830
原创 关于闭包以及作用域链很好的一个例子
js代码：let tempStr = '从前'let a = '有座山'let b = '山里'let c = '有座庙'const Recursion = num => { tempStr = `${tempStr}-${num}${a}` console.log(tempStr, num) if (!num) { tempStr = `${tempStr...
2019-08-27 17:24:33
101
原创 使用git对于开发环境、测试环境、生产环境一个完整项目的运用
需求：1. 一个项目有三个环境，开发的即开发者本地调试的环境，测试的用于测试人员质控的环境，生产的用于用户的环境 2. 三个环境对应各自单独的服务地址 3. 每个环境有自己单独的环境配置（以上的需求可通过设置环境变量来完成，但是我们这次的方式更适合前端新手来分离三个不同的环境，比如Vue的脚手架搭建的项目只有开发和生产两个环境变量，测试的环境变量需要...
2019-08-23 09:47:30
8685
原创 iview中table排序数据混乱的问题
需求：下图中的“现价”以及“涨跌幅”可根据数值大小排序（下面以“现价”为例）第一次处理：排序触发，但是数据没有排序正确（代码如下）Html部分：<div class="list-main"> <Table stripe class="order-table" :columns="historyColumns" ...
2019-08-22 09:59:15
2047
1
原创 Vue中鼠标悬浮切换图片src
需求：1. 鼠标悬浮到图示按钮上面，图片切换成灰色按钮 2. 鼠标离开图示按钮，图片切换成回白色按钮Html部分：<!-- 如果此处的两个鼠标事件不生效，可以在mouseenter后面添加.native后缀 --><div class="left-btn" @click="saveTemplate()" @mousee...
2019-08-05 16:46:04
5358
原创 Vue中使用router.meta.keepAlive对页面进行缓存
需求：1. 从stockList页面到stockInfo页面，从stockInfo页面返回stockList，缓存stockList页面 2. 从其他页面进入到stockList页面，则不缓存stockList页面路由配置文件中：{ path: '/stockSelectionAndDiagnosticStocks', name: 'stockSelecti...
2019-07-02 15:26:52
20484
4
原创 Vue中使用js制作进度条式数据对比动画
实现的效果：(初始化以及浏览器resize的时候两侧的条形为向两侧递增的动画，其中两端的数字也是递增的动画)HTML部分：<div class="no-ivatargo-chart-b"> <div class="investment-ability"> <div class="title"> <span>您的投...
2019-06-12 10:54:46
1603
原创 使用js，根据对象数组中对象属性值的不同将数组进行分组-2
需求：将下面数组-对象中的index_name相同的对象抽离出来，放入一个新数组中let tempArr = [ { domain: 'a', index_name: '云淡风轻' }, { domain: 'b', index_name: '递归' }, { domain: 'c', index_name: '云淡风轻' }, { domain: 'd', index_na...
2019-06-11 16:12:26
1386
原创 Vue中使用echarts定制特殊的仪表盘
实现的效果：(初始化以及浏览器resize的时候数字和弧形条均为递增动画)HTML部分：<!-- 为ECharts准备一个具备大小（宽高）的Dom --><div class="main-echarts-contianer" ref="main"></div>CSS部分：.main-echarts-contianer { ...
2019-06-10 15:31:27
4475
原创 使用js，根据对象数组中对象属性值的不同将数组进行分组-1
需求：将下面数组-对象中的index_name相同的对象抽离出来，放入一个新数组中let tempArr = [ { domain: 'a', index_name: '云淡风轻' }, { domain: 'b', index_name: '递归' }, { domain: 'c', index_name: '云淡风轻' }, { domain: 'd', index_na...
2019-06-10 10:32:47
3059
原创 Vue中对过滤器的简化
需求：在页面某个地方，需要将后台传过来的数值型数据转换为对应字符串显示到页面上（以管道符的过滤器为例）{{experienceUnit | experienceUnitFilter}}优化前：用常规的if...else...或者switch语句experienceUnitFilter (date) { let dateTime = date switch (parseInt(...
2019-04-23 11:08:00
171
原创 使用js完成数组乱序排列
let testArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g']1.直接使用for循环配合Math对象disorderArray (arr) { for (let i = 0; i <= arr.length - 1; i++) { let randomIndex = Math.round(Math.random() * i) ...
2019-04-22 16:53:34
1000
原创 Vue中评论列表里的文字实现“查看全文”效果，超过100字的部分自动隐藏，点击“查看全文”之后再显示当前评论全部文字
效果图：解决方法：1.遍历获得的列表数据，给每个评论以及评论的第一个回复，添加一个新属性2.根据这个属性值（true or false），给文字显示两种css（超过100字的以及少于100字的）3.点击"查看全文"，遍历列表数据，根据id比对，将对应id的这个新属性的属性值取反代码如下：Html部分：<div class="item-body"> &...
2018-11-23 17:23:56
8003
2
原创 移动web端安卓手机上元素中的文字垂直不居中的问题
问题：在元素中文字小于12px时并且元素当中的上下内边距过小时，安卓的浏览器会出现显示问题，“我是挑战者”在安卓手机上明显的不垂直居中，如下图所示解决办法：1.将该元素中所有关于px的样式放大一倍再缩小一倍，如下图“.is-user”中所示（实现的效果如上图中的“我是版主”所示）.is-not-user { width: 123px; height: 30px; bord...
2018-10-08 12:00:02
5375
原创 Vue中动态样式绑定的经典用法举例( :style以及 :class)
需求：在当前企业名片主题 (EnterpriseTheme) 为 'qinglianxiyu' 时，该组件所占位置的 margin-top 为'0'；其他情况为'260px'。1.用:style的方式HTML部分：<!-- 注意此处的属性名，需用驼峰式而不能用连接符式 --><div :style="{marginTop: theMarginTop}" ...
2018-06-12 15:40:37
5337
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人