HeyUI组件库12月更新日志：Clipboard复制剪切板，Avatar头像-CSDN博客

时隔很久，HeyUI终于有了一些新的组件补充了

这个组件都是来自于近期的一些开发思考，希望大家多多指点

HeyUI

对于不熟悉HeyUI组件库的同学，我在这里补充一下信息：

HeyUI是一个基于Vue.js的高质量UI组件库

www.heyui.top/

同时也欢迎大家的吐槽：Issue

Clipboard复制剪切板

这个组件是基于我们一直使用的clipboard.js插件引起的一些问题的思考。

clipboard.js这个插件的定义方式还停留在jquery的方式上，所以我决定在heyui上补充clipboard功能，这样我们就可以少一个依赖了。

我们来看看clipboard.js的一些引用方式：

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>
复制代码

如果使用js来触发：

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});
复制代码

其实这个对于我们vue或者双向绑定机制的框架来说，其实是十分不友好的。

所以，heyui中的Clipboard复制剪切板功能是直接使用方法的方式调用的。

$Clipboard方法

<Button @click="copy">直接复制</Button>

<script>
  export default {
    methods: {
      copy() {
        this.$Clipboard({
          text: '测试==复制至剪切板的文本==测试',
          showSuccessTip: 'Copy Success',
        });
      }
    }
  }
</script>
复制代码

$Clipboard参数

text: 复制的文本
showSuccessTip: 设置复制成功文案, 默认值：复制成功
showFailureTip: 设置复制失败文案, 默认值：复制失败
successCallback: 执行成功后调用
failureCallback: 执行失败后调用

兼容性

支持IE9+，以及其他主流浏览器。

Avatar头像

其实之前一直在考虑avatar头像的组件。参考了iview与ant design的，但是感觉不太符合我的需求。这一次，我们的业务系统做了一次改版升级，在升级的过程中，我发现，其实对于头像的开发中，有三个痛点。

1、头像url处理，我们使用类似imageView2的后缀来进行图片剪裁
2、默认头像，比如系统中没有头像数据，男，女，公司需要使用不同的默认头像
3、图像与文字的排版，一般图片信息都是如下图设计，而根据不同头像的大小，排版也要调整

至于一般排版的方案有三种：

flex
float: left
absoulte，padding-left

我们选择的是第三种，兼容度高，并且效果比较理想。

组件使用

<template>
  <div>
    <Avatar :src="src">
      <div style="font-size: 18px;">默认尺寸的显示</div>
      <p class="dark2-color">描述</p>
    </Avatar>
    <br>
    <Avatar :src="src" :width="60" v-width="300" :imageTop="5">
      <div style="font-size: 20px;" class="text-ellipsis">超出部分省略，自定义尺寸的显示</div>
      <p class="dark2-color">描述1</p>
      <p class="dark2-color">描述2</p>
      <p class="dark2-color">描述3</p>
    </Avatar>

  </div>
</template>

<script>

export default {
  data() {
    return {
      src: 'https://pic.52112.com/icon/256/20180507/15471/722194.png'
    }
  }
}
</script>
复制代码

Avatar 参数

src: 图像地址 String
width: 图像大小，默认50
distance: 图片与文字的间距，默认15
imageTop: 设置图片与顶部的位移，如果不设置的话，图像居中对齐
type: 设置不同类型，自定义样式

如果传递不同的type，则可以设置不同的类型默认图，获取其他控制。


<style lang="less">
.h-avatar-type-org .h-avatar-image{
  background-image: url('../../../static/images/avatar-org.png')
}
.h-avatar-type-female .h-avatar-image{
  background-image: url('../../../static/images/avatar-female.png');
}
.h-avatar-type-male .h-avatar-image{
  background-image: url('../../../static/images/avatar-male.png');
}
</style>

<template>
  <Avatar type="org">
    <div style="font-size: 16px;">唐门</div>
    <p class="dark2-color">描述</p>
  </Avatar>
  <Avatar type="male">
    <div style="font-size: 16px;" class="text-ellipsis">霍雨浩</div>
    <p class="dark2-color">描述</p>
  </Avatar>
  <Avatar type="female">
    <div style="font-size: 16px;" class="text-ellipsis">唐舞桐</div>
    <p class="dark2-color">描述</p>
  </Avatar>
</template>
复制代码

还剩下最后一个需求：
使用类似imageView2的后缀来进行图片剪裁


// 通过配置可以设置src的全局处理方式，比如根据width参数设置不同的图片大小
HeyUI.config("avatar.handleSrc", (src) {
   // this.width 可以获取组件的参数
   return src;
});

// 比如以下处理：
handleSrc(src) {
  let width = this.width;
  if (!src) return '';
  if (width == undefined) return src;
  return `${src}?imageView2/1/w/${width*2}/h/${width*2}`;  //此处width*2是为了获取质量更高一些的图片
}
复制代码