• 全局api
    • 全局水印
    • deepClone对象深拷贝
    • setPx设置css像素方法
    • validatenull判断空
    • findArray数组中寻找对象下标
    • vaildData验证对象
    • $Log日志打印
    • $Clipboard复制到剪切板
    • $ImagePreview图片预览

    全局api

    在avuex中内置封装了很多全局的api函数,在项目开发中常用的函数,在引入avuex后你可以在任何组件里取调用这些方法

    全局水印

    传入水印的文案

    1. this.watermark('我是水印的文案');

    deepClone对象深拷贝

    可对对象和数组深拷贝

    1. const obj1 = {
    2. name:'张三'
    3. }
    4. const obj2 = this.deepClone(obj1);

    setPx设置css像素方法

    如果传入是数字默认加px属性

    1. const obj = 23
    2. console.log(this.setPx(obj)) //'23px'
    3. console.log(this.setPx('100%')) //'100%'
    4. console.log(this.setPx('23px')) //'23px'

    validatenull判断空

    可以判断对象、数组、字符串是否为空

    1. const obj1 = {}
    2. const obj2 = []
    3. const str1 = ''
    4. const str2 = undefined
    5. const str3 = null;
    6. console.log(this.validatenull(obj1)) //true
    7. console.log(this.validatenull(obj2)) //true
    8. console.log(this.validatenull(str1)) //true
    9. console.log(this.validatenull(str2)) //true
    10. console.log(this.validatenull(str3)) //true

    findArray数组中寻找对象下标

    根据对象属性在数组中找到符合的下表返回,没有则为-1

    1. const list = [{
    2. prop:'name'
    3. },{
    4. prop:'sex'
    5. }]
    6. const index = this.findArray(list,'sex','prop');
    7. console.log(index) //1

    vaildData验证对象

    验证是否为空的任何类型数据,为空择取默认的设置值

    1. const obj = {}
    2. console.log(this.vaildData(obj),'默认值') //默认值
    3. console.log(this.vaildData(obj),{name:11}) //{name:11}
    4. const obj2 = true
    5. console.log(this.vaildData(obj2),false) //true

    $Log日志打印

    可以打印不同颜色和标注的日志

    1. /**
    2. * 内置5中常用颜色,默认为primary
    3. * default:#35495E
    4. * primary:#3488ff
    5. * success:#43B883
    6. * warning:#e6a23c
    7. * danger:#f56c6c
    8. * 也可以直接打印彩色文字
    9. */
    10. this.$Log.capsule('标题','内容','primary')
    11. this.$Log.primary('内容')

    全局api - 图1

    $Clipboard复制到剪切板

    可以赋值任意文本到剪切板在线例子

    1. this.$Clipboard({
    2. text: '复制的文本内容'
    3. }).then(() => {
    4. this.$message.success('复制成功')
    5. }).catch(() => {
    6. this.$message.error('复制失败')
    7. });

    $ImagePreview图片预览

    可以赋值任赋值图片去放大预览(一张缩略图,一张放大图)在线例子

    1. data() {
    2. const link = 'https://lokeshdhakar.com/projects/lightbox2/images/';
    3. return {
    4. datas: [
    5. { thumbUrl: `${link}thumb-4.jpg`, url: `${link}image-4.jpg` },
    6. { thumbUrl: `${link}thumb-5.jpg`, url: `${link}image-5.jpg` },
    7. { thumbUrl: `${link}thumb-6.jpg`, url: `${link}image-6.jpg` },
    8. ]
    9. }
    10. }
    11. this.$ImagePreview(this.datas, index);