阅读 104

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的,但是感觉不太符合我的需求。 这一次,我们的业务系统做了一次改版升级,在升级的过程中,我发现,其实对于头像的开发中,有三个痛点。

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

全局方法

本次除了新增这两个组件,我们还做了很多其他的处理,当然最重要的是整理了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

关注下面的标签,发现更多相似文章
评论