<template>
<div>
<div class="box">
<label
id="label"
:for="item3"
:title="item3"
:class="{ 'bg': checkedValue.includes(item3), 'bgColor': true }"
@click="chooseType($event, index3)"
v-for="(item3, index3) in type"
:key="index3"
>
<input
type="checkbox"
:value="item3"
:id="item3"
v-model="checkedValue"
/>
<div class="name">{{ text(item3) }}</div>
</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
checkedValue: [],
type: [
"中国中国中国中国中国中国",
"美国",
"日本",
"中国1",
"美国2",
"日本3",
"中国4",
"美国5",
"日本6",
],
};
},
mounted() {},
methods: {
chooseType(e, index) {
if (e.target.checked) {
this.checkedValue.push(e.target.defaultValue);
console.log(this.checkedValue.includes(e.target.defaultValue));
} else {
this.checkedValue = this.checkedValue.filter(
(item) => item != e.target.defaultValue
);
}
console.log(this.checkedValue, index);
},
text(texts) {
return texts;
},
},
};
</script>
<style lang="scss" scoped>
.box {
width: 600px;
display: flex;
flex-wrap: wrap;
}
.bg {
color: #FEFEFE !important;
background: #21AD89 !important;
}
.bgColor {
font-size: 14px;
font-weight: 400;
color: #666666;
background: #ffffff;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
border-radius: 10px;
}
.box label {
display: flex;
align-items: center;
margin: 0 10px;
cursor: pointer;
padding: 5px;
margin-bottom: 10px;
border-radius: 3px;
}
.box label input {
cursor: pointer;
}
.box .name {
margin-left: 8px;
}
input[type="checkbox"]{
width: 12px;
height: 12px;
// background: #fff;
// border: 1px solid #000;
float: left;
margin-right: 11px;
cursor: pointer;
-webkit-appearance:none;
outline: none;
background: url('../assets/image/Box unchecked.png') 0 0/12px 12px no-repeat;
}
input[type="checkbox"]:checked{
background: url('../assets/image/Check box.png') 0 0/12px 12px no-repeat;
}
</style>
原生实现多选框
最新推荐文章于 2024-05-21 18:30:03 发布