tag-h-canvas

介绍(Introduction)

tag 组件，canvas 绘制，保证垂直居中

预览(Preview)

链接

安装(Installation)

npm install tag-h-canvas --save

引入(Import)

import tagCanvas from "tag-h-canvas";
// 或者
const tagCanvas = require("tag-h-canvas");

使用(Usage)

CODE

<template>
  <div>
    <tag-canvas
      :height="height"
      :width="width"
      :padding="padding"
      :bg-color="bgColor"
      :font-color="fontColor"
      :font-size="fontSize"
      :text="text"
      :borderRadius="borderRadius"
      :borderWidth="borderWidth"
      :borderColor="borderColor"
    ></tag-canvas>
  </div>
</template>

<script>
  import tagCanvas from "tag-h-canvas";
  export default {
    data() {
      return {
        //传入的所有长度单位支持px和rem，不填默认为px
        height: 15,
        width: "auto", //width和height支持auto，自动根据文字计算宽度，此时padding生效
        padding: [5, 0],
        text: "猜猜我是谁",
        fontSize: 10,
        bgColor: "#F63",
        fontColor: "#fff",
        borderRadius: 0,
        borderWidth: 0,
        borderColor: "#fff"
      };
    },
    computed: {},
    mounted() {},
    methods: {},
    components: {
      tagCanvas
    }
  };
</script>

组件参数(Prop)

传入的所有长度单位支持px和rem，不填默认为px

| 键值 | 类型 | 默认值 | 说明 | | :--: | :----: | :----: | :------------: | | height | Number|String | 'auto' | tag高度,支持auto，自动根据文字计算宽度，此时padding生效 | | width | Number|String | 'auto' | tag宽度,支持auto，自动根据文字计算宽度，此时padding生效 | | padding | Array | [5,2] | tag内边距 | | text | String | '猜猜我是谁' | tag内文案 | | fontSize | Number|String | 10 | tag字体大小 | | bgColor | String | '#F63' | tag背景色 | | fontColor| String | '#fff' | tag字体颜色 | | borderRadius | Number|String | 0 | tag边距弧度 | | borderColor | String | '#fff' | tag边框颜色 | | borderWidth | Number|String | 0 | tag边框宽度|