自定义多选框组件
<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>