2021工作中的小知识点1-8(滚动条、echart、正则）-CFANZ编程社区

1.vue 滚动条修改

// 默认滚动条样式
&::-webkit-scrollbar{
    width: 6px;
}
&::-webkit-scrollbar-track{
    background-color: transparent;
}
&::-webkit-scrollbar-thumb{
    background: #595959;
    border-radius: 4px;
}
// 自定义滚动条样式
.i-standard-scrollbar{
    &::-webkit-scrollbar{
        width: 6px;
    background-color: transparent;//滚动条背景色

    }
    &::-webkit-scrollbar-track{
        background-color: transparent;
    }
    &::-webkit-scrollbar-thumb{
        background: #173E83;
        opacity: 0.7;//滚动条颜色
        border-radius: 4px;
    }
}
// 隐藏滚动条样式
.i-scrollbar-hide{
    &::-webkit-scrollbar{
        width: 0;
    }
    &::-webkit-scrollbar-track{
        background-color: transparent;
          }
    &::-webkit-scrollbar-thumb{
        background: #e8eaec;
    }
}
使用方法
<div class="box i-standard-scrollbar"></div>
.box{
	width:200px;
	height:200px;
	overflow: auto;
}

2.修改echart滚动条样式

          dataZoom: [
              {
                type: "inside",
                start: 0,
                end: 100,
                height: 10,
              },
              {
                type: "slider",
                start: 0,
                end: 100,
                handleSize: 12, // 滑动条的 左右2个滑动条的大小
                height: 8, // 组件高度
                handleColor: "#0882E0", // h滑动图标的颜色
                handleStyle: {
                  borderColor: "#0882E0",
                  borderWidth: "0",
                  shadowBlur: 2,
                  background: "#ddd",
                  shadowColor: "#ddd",
                },
                borderColor: "transparent",
                fillerColor: "#0882E0",
                backgroundColor: "#C0D8EA", // 两边未选中的滑动条区域的颜色
                bottom: "2%",
                showDataShadow: false, // 是否显示数据阴影 默认auto
                showDetail: true, // 即拖拽时候是否显示详细数值信息 默认true
                handleIcon:
                  "M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z",
              },
            ],

图片展示

echart滚动条

3.Vue中$set 不生效时可进行强制刷新

this.$forceUpdate();

4.有三位小数的正实数

const three_number = /(^[0-9]{1,10}$)|(^[0-9]{1,10}[\.]{1}[0-9]{1,3}$)/ 可以输入08.77
const three_number =/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/; 不可以输入08.77，可校验金额
{1,10} 代表长度，{1,3}保留几位小数

5.js向上下取整保留两位小数

let max = Math.ceil(m * 100) / 100;
let min = Math.floor(m * 100) / 100;

6.正则

var regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ 身份证
var email = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/ 邮箱
var tel = /^1[345789]\d{9}$/ 电话号码
var fax = /^(\d{3,4}-)?\d{7,8}$/ 传真

7.动态正则表达式（保留几位小数）

  const three_number = RegExp("(^[0-9]{1,10}$)|(^[0-9]{1,10}[\\.]{1}[0-9]" + `{1,${rule.precision}}$)`)
three_number.test(value)

8.echarts版本太高导致有些内容不显示

卸载 npm uninstall echarts
安装指定版本 npm install echarts@4.9.0 --save