vue实现自定义checkbox组件
效果展示父组件中使用<checkbox-group v-model="checkList"><checkboxv-for="(item,index) in data"v-bind:key="index":label="item.name":value="item.id"...
·
效果展示
父组件中使用
<checkbox-group v-model="checkList">
<checkbox
v-for="(item,index) in data"
v-bind:key="index"
:label="item.name"
:value="item.id"
></checkbox>
</checkbox-group>
Checkbox.vue
<template>
<div class="checkbox-wrap" @click="handleClick">
<div class="left" :class="isChecked?'box-click':''" ref="box">
<transition name="fade">
<div class="hook" v-show="isChecked"></div>
</transition>
</div>
<div class="right">{{label}}</div>
</div>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
components: {}
})
export default class extends Vue {
private isChecked: boolean = false;
@Prop()
private label!: string;
@Prop()
private value!: string;
private handleClick() {
this.isChecked = !this.isChecked;
if (this.isChecked) {
this.$parent.$emit("pushItem", this.value);
} else {
this.$parent.$emit("removeItem", this.value);
}
this.$emit("input", this.isChecked);
}
}
</script>
<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.checkbox-wrap {
height: 24px;
display: inline-block;
vertical-align: center;
margin-bottom: 5px;
.left {
height: 24px;
width: 24px;
border-radius: 7px;
background-color: #ffffff;
display: inline-block;
border: 1.2px solid #cccccc;
box-sizing: border-box;
}
.right {
margin-left: 5px;
padding-right: 10px;
display: inline;
vertical-align: top; // 内联元素默认的vertical-align为baseline。对象的内容与基线对齐。如果我们在right插入文字。则为出现left right不水平对齐的情况
line-height: 24px;
color: #66757f; // 在mounted
font-size: 15px;
}
.box-click {
background-color: #1da1f2;
border: 0.5px solid #cccccc;
}
.hook {
margin-left: 8px;
margin-top: 2px;
width: 5px;
height: 12px;
border-right: 1.3px solid #ffffff;
border-bottom: 1.3px solid #ffffff;
transform: rotate(40deg);
}
}
.checkbox-wrap:hover {
cursor: pointer;
}
</style>
CheckboxGroup.vue
<template>
<div class="checkbox-group-wrap">
<slot></slot>
</div>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
components: {}
})
export default class extends Vue {
private checkBoxGroup: string[] = [];
private pushItem(value) {
this.checkBoxGroup.push(value);
this.$emit("input", this.checkBoxGroup);
}
private removeItem(value) {
const index = this.checkBoxGroup.indexOf(value);
this.checkBoxGroup.splice(index, 1);
this.$emit("input", this.checkBoxGroup);
}
private mounted() {
this.$on("pushItem", this.pushItem);
this.$on("removeItem", this.removeItem);
}
}
</script>
<style scoped lang="scss">
</style>
这里script部分是用ts写的,你可以改成js的语法。template和style部分不用改。注意这里子组件checkbox作为slot触发父组件checkboxGroup事件pushItem的用法。slot不能绑定事件
更多推荐
已为社区贡献11条内容
所有评论(0)