全局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);