常用的JS组件


一、JQuery

$(function () {
    $('button[name=submit]').on('click',function(){
        console.log('aaa');
        var yh = $('input[name=user]').val();
        var mm = $('input[name=mm]').val();
        console.log(yh+mm);
        var btnSubmit = $('button[type="submit"]');
        btnSubmit.attr('disabled','disabled');
        Swal.fire({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            type: 'success',
            title: 'Signed in successfully'
        });
        // 防止多次提交
        setTimeout(function(){
            btnSubmit.removeAttr('disabled')
        },3000);
    });
});
$.ajax({
    type : "post",
    url : CONTEXT_PATH + '/cusviews/pipe/showPipeList',
    data : {},
    success : function(data){
        debugger;
        var result = jQuery.parseJSON(data);
        renderNation(result);
    }
});

二、Bootstrap

基本

表单

三、Layui

layui.use(['form', 'util', 'laydate'], function(){
  var form = layui.form;
  var layer = layui.layer;
  var util = layui.util;
  var laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
 
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [
      /^[\S]{6,12}$/
      ,'密码必须6到12位,且不能出现空格'
    ]
  });
  
  //指定开关事件
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
  });
  
  //提交事件
  form.on('submit(demo1)', function(data){
    alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
  //表单赋值
  layui.$('#LAY-component-form-setval').on('click', function(){
    form.val('example', {
      "username": "贤心" // "name": "value"
      ,"password": "123456"
      ,"interest": 1
      ,"like[write]": true //复选框选中状态
      ,"close": true //开关状态
      ,"sex": ""
      ,"desc": "我爱 layui"
    });
  });
  //表单取值
  layui.$('#LAY-component-form-getval').on('click', function(){
    var data = form.val('example');
    alert(JSON.stringify(data));
  });
  // 普通事件
  util.on('lay-on', {
    // 获取验证码
    "get-vercode": function(othis){
      var isvalid = form.validate('.demo-phone'); // v2.7.0 新增 
      // 验证通过
      if(isvalid){
        layer.msg('手机号验证通过,执行发送验证码的操作');
      }
    }
  });
});

四、Echarts

Echarts

function renderNation(_data){
    var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: "{b}:{c}"
            },
            grid: {
                top: '9%',
                left: '3%',
                right: '10%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                "axisLabel": {
                    "interval": 0,
                    formatter: '{value}',
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: '#73c4fc'
                    },
                    interval: 0
                },
                
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                data: _data.eventCauselist
            },
            series: [{
                name: '',
                type: 'bar',
                barWidth: 9,
                itemStyle: {   
                    //通常情况下每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
                    normal:{  
                        color: function (params){
                            var colorList = ["#17c699","#f4c533","#cf145f","#92f5dc","#02b4d3"];
                            return colorList[params.dataIndex];
                        },
                        label: {
                            show: true,
                            // position: 'inside'
                            position: 'right'
                        }
                    },
                    //鼠标悬停时:
                    emphasis: {
                        shadowBlur: 8,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                data: _data.Numlist
            }]
    };
    myChart.setOption(option);
}

五、iconfont

图标

六、wangEditor

富文本编辑器

七、viewerjs

展示图片

八、docsify.js

九、sweetalert2

弹窗组件

十、marked

十一、exceljs

十二、mockjs

使用Mock.js生成数据代码

var modata = Mock.mock({
    "tableData|2000":[{
        "name":"@cname","date":"@date","address":"@city(true)"
    }]
});

生成的数据如下

{
    "tableData":[
        {
            "name":"江磊",
            "date":"2014-01-17",
            "address":"湖北省 孝感市"
        },
        ...
        {
            "name":"郑涛",
            "date":"1986-02-24",
            "address":"云南省 普洱市"
        }
    ]
}

十三、crypto-js

AES

AES加密方法主要有ECB和CBC两种方式, CBC需要秘钥key和偏移量iv,ECB只需要秘钥key

function getAesStringByCBC(data,key,iv){//加密
    var key  = CryptoJS.enc.Utf8.parse(key);
    var iv   = CryptoJS.enc.Utf8.parse(iv);
    var encrypted =CryptoJS.AES.encrypt(data,key,
        {
            iv:iv,
            mode:CryptoJS.mode.CBC,
            padding:CryptoJS.pad.Pkcs7
        });
    return encrypted.toString();    //返回的是base64格式的密文
}
var key = CryptoJS.enc.Utf8.parse("1234567812345678");
var plaintText = 'github.com';
var encryptedData = CryptoJS.AES.encrypt(plaintText, key, {
    mode: CryptoJS.mode.ECB,  
    padding: CryptoJS.pad.Pkcs7
});

十四、dayjs日期工具

dayjs().format('YYYYMMDDHHmmss'); //生成20220924193656的格式

https://dayjs.fenxianglu.cn/