目录

• 一. VUE
• 二. index
• 三. SCSS
• 四. 公用样式
• 五. 工具类

一. VUE

因为组件内容少，所以直接使用渲染。
特例需求：theme 为 default 时，背景颜色为字体颜色的0.15透明度
工具类：hexadecimalToRGBA 判断颜色是否为十六进制,转为rgba模式

<script>
  // 判断颜色是否为十六进制,转为rgba模式
  import { hexadecimalToRGBA } from "../../../src/utils/util.js"
  export default {
    name: 'ZoehisTag',
    props: {
      type: {
        type: String,
        default: 'plain'
      }, // 类型 朴素 plain，圆角 fillet，默认朴素
      theme: {
        type: String,
        default: 'default'
      }, // 样式主题 default,other 默认default
      customClass: {
        type: String,
        default: ''
      }, // 自定义类名
      color: {
        type: String,
        default: ''
      }, // 自定义字体颜色
      backgroundColor: {
        type: String,
        default: ''
      }, // 自定义背景颜色
    },
    methods: {
	// 点击事件
      handleClick(event) {
        this.$emit('click', event);
      },
    },
    render(h) {
      const { type, customClass } = this;
      const classes =
      [ customClass,
        'zoehis_tag',
        type ? `zoehis_tag_${type}` : '',
      ];
      let newStyle = {
            color: this.color,
          }
      const newBackgroundColor = this.backgroundColor?this.backgroundColor:this.theme == 'default'?hexadecimalToRGBA(this.color,0.15):''
      if (newBackgroundColor) {
        newStyle.backgroundColor = newBackgroundColor
      }
      const tagEl = (
        <span
          class={ classes }
          style={ newStyle }
          on-click={ this.handleClick }>
          { this.$slots.default }
        </span>
      );
      return tagEl;
    }
  };
</script>

二. index

导出组件

/**
 * Created by *n on 2021/12/15.
 */
 import ZoehisTag from './src/tag.vue';

 // 装了但没用到
 /* istanbul ignore next */
 ZoehisTag.install = function(Vue) {
   Vue.component(ZoehisTag.name, ZoehisTag);
 };

 export default ZoehisTag;

三. SCSS

.zoehis_tag{
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 14px;
    font-family: $FONTNORMAL;
    color: $MAINBG;
    background-color: $SCROLLBARHOVE;
    min-height: 20px;
    line-height: 20px;
    padding: 0 6px;
}
.zoehis_tag_plain {
    border-radius: 2px;
}
.zoehis_tag_fillet {
    border-radius: 10px;
}

四. 公用样式

$FONTNORMAL:Arial,"Microsoft YaHei";
$MAINBG:#FFF;
$SCROLLBARHOVE:#808080;

五. 工具类

/**
 * 判断颜色是否为十六进制,转为rgba模式
 * @param {String} val: 颜色十六进制字符串 如："#000"、""#000000"
 * @param {String} opacity: rgba的透明度 如："0.15"
 **/
export function hexadecimalToRGBA(val, opacity) {
  if (!val) return '';
  const reg = '^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$';
  const length = val.length || 0;
  let newBackgroundColor = '';
  if (val.match(reg)) {
    if (length === 7) {
      newBackgroundColor = `rgba(${parseInt('0x' + val.slice(1, 3))},${parseInt('0x' + val.slice(3, 5))},${parseInt('0x' + val.slice(5, 7))},${opacity})`;
    } else if (length === 4) {
      newBackgroundColor = `rgba(${parseInt('0x' + val.slice(1, 2))},${parseInt('0x' + val.slice(2, 3))},${parseInt('0x' + val.slice(3, 4))},${opacity})`;
    }
  } else {
    newBackgroundColor = val || '';
  }
  return newBackgroundColor;
}