vue 自定义多选框组件

自定义多选框组件

<template>
  <div class="checkBox">
    <input v-model="isInherit" @click="handlerChecked" :style="`width: ${width}px; height: ${height}px;`" type="checkbox" id="inp" />
    <label for="inp">  
      <span :style="`font-size: ${fontSize}px`"><slot /></span>
    </label>
  </div>
</template>
<script lang="ts">
export default {
  props: {
    isInherit: Boolean, // 是否选中
    width: {
      default: 20,
      type: Number
    }, // 多选框的宽度
    height: {
      default: 20,
      type: Number
    }, // 多选框的高度
    fontSize: {
      default: 14,
      type: Number
    } // 附带字体大小
  },
  name: 'checkBox',
  methods: {
    handlerChecked() {
      this.$emit('change-checked')
    }
  }
}
</script>
<style lang="less" scoped>
.checkBox {
  padding: 10px 20px 0;
  display: flex;
  align-items: center;

  label {
    span {
      margin-left: 6px;
    }
  }
}
</style>

使用

// 引入
import MyCheckBox from './MyCheckBox'
// 注册
// 使用
<MyCheckBox>可以根据选择放入描述</MyCheckBox>