js_ryl

通用js

Build Setup

# install dependencies
# npm install

#方法列表
1.正则表达式 -- reg
2.时间戳与时间的转化 -- time
3.cookie的存储使用 -- cookie
4.函数的节流和防抖 -- fun   //这是js版本，如果有 componen_ryl，可直接使用防抖指令 v-debounce
5.运算符 -- num
6.复制文本信息 -- copy  //这是js版本，如果有 componen_ryl，可直接使用指令 v-copy
7.对象深拷贝 -- deepCopy
8.验证码     -- verCode
9.table中的数据补全方法     -- filterTable
10.获取当前年份中，指定月份的天数     -- getMonthDays
11.unicode转化emoji表情     -- emoji
12.根据输入内容，高亮匹配对应的字符串     -- highLight
13.商品飞入购物车效果     -- flyToCart
14.下载excel表格     -- downExcel

# 使用方法：

    #1.正则表达式 -- reg

        Phone()               #手机
        Email()               #邮箱
        IdCard()              #身份证号码
        Common()              #只能包含数字、字母以及下划线
        QQ()                  #QQ
        Money()               #金额
        imgUrl()              #图片路径是否包含了base64
        verChinese()          #是否包含中文

        # 使用方法
        reg.Phone(this.phone); 返回true or false
       

    #2.时间戳与时间的转化 -- time

        # 日期转时间戳 -- 参数 a(时间，默认当前),b(时间戳长度，默认10位)
        time.toStamp(a,b)

        # 时间戳转日期 -- 参数 a(时间戳),b(类型，默认 yyyy-MM-dd HH:mm:ss 可选 yyyy-MM-dd or yyyy-MM-dd HH:mm )
        time.toDate(a,b)

        # 获取系统当前时间 -- 无参数
        time.getNow()

    #3.cookie的存储使用 -- cookie

        # 设置cookie  -- 第三个对象的参数，path基本不管，传入过期日期就行了
        cookie.set("name", "value", {path:'/',expires:1622709902});

        # 获取cookie
        cookie.get("name")

        # 删除cookie
        cookie.remove("name");

    #4.函数的节流和防抖 -- fun

        # 节流函数(有个需要频繁触发的函数，处于性能的优化，在规定时间内，只让函数的第一次生效，后面的不生效)
        # 应用场景 -- 频繁触发、onrize，onscroll滚动条

        initScroll: fun.throole(function () {
            console.log("触发了几次了" + Date.now());
        })

        # 防抖函数（规定时间内，只让最后一次生效，其他的不生效）
        # 应用场景 -- 频繁触发、输入框搜索

        inputsLk: fun.debounce(function () {
            console.log(this.name);
        })

    #5.运算符 -- num

        # 加法 num.add(1,2)
            # 当多个数相加时，推荐用法：
                let arr = [729.3, 72, 6.3, 1];
                let arr3 = arr.reduce((v, n) => {
                    return num.add(v, n);
                });

        减法 num.sub(1,2)

        乘法 num.mul(1,2)

        除法 num.div(1,2)

    #6.复制文本信息 -- copy

        copy("这是复制的内容", (res) => {
            if (res.code == 200) {
                # 默认提示 -- 复制成功
                alert(res.msg); 
            } else {
                # 默认提示 -- 当前浏览器不支持，请更换浏览器后重试
                alert(res.msg);
            }
        });

    #7. 对象或数组的深拷贝 -- deepCopy

        #第一个参数默认为: {}, 第二个参数为：数据源
        let obj2 = deepCopy({},obj)

        # 如：
        # let obj = {
        # name: '张三',
        # age:12,
        # info: {
        #     sex: '男',
        #     like: ['电影','游戏']
        # }
        # }
        # let obj2 = deepCopy({},obj)
        # obj2.age = 18
        # obj2.info.sex = '女'
        # obj2.info.like = ['耍']

        # console.log(obj2,obj,'深拷贝后的值变化')
    
    #8 获取验证码 -- verCode

        # 方法明细

        # PhoneCode()           -- 手机验证码 （注：当调用这个方法后，离开页面时需要调用 PhoneCodeClear() 这个方法）
        # PhoneCodeClear()      -- 清除手机验证码计时器
        # phoneCodeStatus()     -- 发送状态，是否已经发送

        # 方法调用
        methods: {
            getInfo(e){
                # 判断是否已经发送
                if (verCode.phoneCodeStatus()) {
                    console.log('已经发送了')
                    return false
                }
                # 3个参数，第一个是按钮本身（必传），第二个是秒数，默认60秒（可不传），第三个是提示，默认是重新发送（可不传）
                verCode.PhoneCode(e,60,'就爆炸了')
            }
        },
        destroyed(){
            # 离开时，清空计时器
            verCode.PhoneCodeClear()
        }

    #9.table中的数据补全方法  -- filterTable

        # 第一个参数为：数据源，第二个参数选填（为补全的符号，默认为 -- ),第三个参数是 ”数组“ ，选填（为需要匹配的数据，如 0.00,0）
        let list = filterTable(data)

    #10.获取当前年份中，指定月份的天数

        #第一个参数为：年份，第二个参数为：月份
        let day = getMonthDays(year,month)

    #11.unicode转化emoji表情,如果不符合emoji的要求，则转化为字符，如果还不符合，则输出原unicode

        # 方法：
            emoji(str)

    #12.根据输入内容，高亮匹配对应的字符串

        # 方法：
        #   3个参数
        #   第一个 需要匹配的值（静态或者动态的变量），第二个 被匹配的内容（字符串，一般是固定的），第三个 为匹配后的类名
            <div v-html="setHighLight(name,highLightContent,'initHightLightClassName')"></div>
            #引入 highLight.js
            setHighLight:highLight,

    #13.商品飞入购物车效果

        # 方法：
            flyToCart(event,image,targets,()=>{})
            # event 目标元素，image 缩略图,targets 购物车的位置,callback 回调（有需要才用）
            # 如：flyToCart(event,'https://v2-saas-1259468876.cos.ap-shanghai.myqcloud.com//system//admin//7c7ec8b02b009d2385db1faae95b9ab0.png',document.querySelector('#shoppps'))

    #14.下载excel表格

        #方法：
            # 第二、三个参数 选填
            downExcel(data,'这是excel名称','这是里面的分区名称');


# serve with hot reload at localhost:8080
# npm run dev

# build for production with minification
# npm run build     

#1.0.04: 函数防抖和节流，添加 可传入参数
#1.0.05: 添加获取验证码效果
#1.0.09: 添加获取验证码效果 逻辑调整
#1.0.10: cookie 过期时间转化 toGMTString()
#1.0.11: 添加对象或数组的深拷贝方法
#1.0.12: number 方法 加 减 小数点后2位调整
#1.0.15: 结构调整，把验证码效果，从 正则 中提取出来
#1.0.16: 剔除不用的包，如element
#1.0.17: 添加 数据补全方法 如：table中有数据为空时，自动补全 ‘--’ 符号
#1.0.18: 添加 获取当前年份中，指定月份的天数
#1.0.19: 验证手机号码 优化
#1.0.21: number精度问题优化
#1.0.22: 数据补全方法优化
#1.0.25: 新增了emoji，highLight方法
#1.0.28: 商品飞入购物车效果
#1.0.29: 拷贝方法优化
#1.0.31: 新增下载excel方法

For detailed explanation on how things work, consult the docs for vue-loader.