HeyUI組件庫12月更新日誌：Clipboard複製剪切板，Avatar頭像

時間 2019-11-05

標籤 heyui 組件 12月更新日誌 clipboard 複製剪切板 avatar 頭像简体版

原文原文鏈接

時隔好久，HeyUI終於有了一些新的組件補充了javascript

這個組件都是來自於近期的一些開發思考，但願你們多多指點css

HeyUI

對於不熟悉HeyUI組件庫的同窗，我在這裏補充一下信息：html

HeyUI是一個基於Vue.js的高質量UI組件庫vue

www.heyui.top/java

同時也歡迎你們的吐槽：Issuejquery

Clipboard複製剪切板

這個組件是基於咱們一直使用的clipboard.js插件引發的一些問題的思考。git

clipboard.js這個插件的定義方式還停留在jquery的方式上，因此我決定在heyui上補充clipboard功能，這樣咱們就能夠少一個依賴了。github

咱們來看看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是爲了獲取質量更高一些的圖片
}
複製代碼