98 lines
1.7 KiB
Vue
98 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<view class="form-checkbox">
|
||
|
|
<view v-for="(item, index) in options" :key="index" class="checkbox-item" @click="toggle(item)">
|
||
|
|
<view :class="['checkbox-dot', { checked: isSelected(item.value) }]">
|
||
|
|
<text v-if="isSelected(item.value)" class="check-icon">✓</text>
|
||
|
|
</view>
|
||
|
|
<text class="checkbox-label">{{ item.label }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'FormItemCheckbox',
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: Array,
|
||
|
|
default: function () {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
type: Array,
|
||
|
|
default: function () {
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: function () {
|
||
|
|
return {
|
||
|
|
selectedValues: []
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
value: {
|
||
|
|
handler: function (val) {
|
||
|
|
this.selectedValues = Array.isArray(val) ? val.slice() : [];
|
||
|
|
},
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
isSelected: function (val) {
|
||
|
|
return this.selectedValues.indexOf(val) > -1;
|
||
|
|
},
|
||
|
|
toggle: function (item) {
|
||
|
|
var index = this.selectedValues.indexOf(item.value);
|
||
|
|
if (index > -1) {
|
||
|
|
this.selectedValues.splice(index, 1);
|
||
|
|
} else {
|
||
|
|
this.selectedValues.push(item.value);
|
||
|
|
}
|
||
|
|
this.$emit('input', this.selectedValues.slice());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.form-checkbox {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkbox-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 16rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkbox-dot {
|
||
|
|
width: 36rpx;
|
||
|
|
height: 36rpx;
|
||
|
|
border-radius: 6rpx;
|
||
|
|
border: 2rpx solid #dddddd;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-right: 12rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkbox-dot.checked {
|
||
|
|
border-color: #e8101e;
|
||
|
|
background-color: #e8101e;
|
||
|
|
}
|
||
|
|
|
||
|
|
.check-icon {
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkbox-label {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
</style>
|