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

时隔好久，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的，可是感受不太符合个人需求。 这一次，咱们的业务系统作了一次改版升级，在升级的过程当中，我发现，其实对于头像的开发中，有三个痛点。

• 一、头像url处理，咱们使用相似imageView2的后缀来进行图片剪裁
• 二、默认头像，好比系统中没有头像数据，男，女，公司须要使用不一样的默认头像
• 三、图像与文字的排版，通常图片信息都是以下图设计，而根据不一样头像的大小，排版也要调整

至于通常排版的方案有三种：

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

全局方法

本次除了新增这两个组件，咱们还作了不少其余的处理，固然最重要的是整理了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

具体文档：
www.heyui.top/component/m…

结语

但愿更多的人能参与到咱们的开源项目中。

加入 HeyUI 微信交流群
因为微信群已满100人
请感兴趣的朋友添加微信号：heyui-robot

咱们会按期拉人入群。

官网: HEYUI，一个基于Vue.js的高质量UI组件库

Github仓库：heyui/heyui