HeyUI组件库12月更新日志：Clipboard复制剪切板，Avatar头像-白红宇

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

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

HeyUI

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

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

同时也欢迎大家的吐槽：

Clipboard复制剪切板

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

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

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


    
    Mussum ipsum cacilds...
    复制代码

如果使用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方法

复制代码

$Clipboard参数

text: 复制的文本

showSuccessTip: 设置复制成功文案, 默认值：复制成功

showFailureTip: 设置复制失败文案, 默认值：复制失败

successCallback: 执行成功后调用

failureCallback: 执行失败后调用

兼容性

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

Avatar头像

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

1、头像url处理，我们使用类似imageView2的后缀来进行图片剪裁

2、默认头像，比如系统中没有头像数据，男，女，公司需要使用不同的默认头像

3、图像与文字的排版，一般图片信息都是如下图设计，而根据不同头像的大小，排版也要调整

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

flex

float: left

absoulte，padding-left

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

组件使用


    复制代码

Avatar 参数

src: 图像地址 String

width: 图像大小，默认50

distance: 图片与文字的间距，默认15

imageTop: 设置图片与顶部的位移，如果不设置的话，图像居中对齐

type: 设置不同类型，自定义样式

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


    复制代码

还剩下最后一个需求：

使用类似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是为了获取质量更高一些的图片}复制代码

全局方法

本次除了新增这两个组件，我们还做了很多其他的处理，当然最重要的是整理了HeyUI支持的全局方法：

HeyUI.config(key, value)

HeyUI.getOption(key)

HeyUI.initDict({key: value})

HeyUI.addDict(key, value)

{
{value | dictMapping(key)}}

HeyUI.dictMapping(value, key, connector)

v-tooltip

v-wordcount

v-wordlimit

v-autosize

$Message, $Notice, $Modal, $Confirm

$Clipboard

$LoadingBar

$Loading

$ScrollIntoView

具体文档：

结语

希望更多的人能参与到我们的开源项目中。

加入 HeyUI 微信交流群

由于微信群已满100人

请感兴趣的朋友添加微信号：heyui-robot

我们会定期拉人入群。

官网:

Github仓库：