50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<template>
|
|
<span @click="handleClick">
|
|
<input type="checkbox" :name="name" title="写作" :value="label" />
|
|
<div
|
|
class="layui-unselect"
|
|
:class="[
|
|
{
|
|
'layui-checkbox-disbaled layui-disabled': disabled,
|
|
},
|
|
'layui-form-checkbox',
|
|
props.modelValue.includes(props.label) ? 'layui-form-checked' : '',
|
|
]"
|
|
:lay-skin="skin"
|
|
>
|
|
<span><slot></slot></span>
|
|
<i v-if="skin == 'primary'" class="layui-icon layui-icon-ok"></i>
|
|
<i v-if="!skin" class="layui-icon layui-icon-ok"></i>
|
|
</div>
|
|
</span>
|
|
</template>
|
|
|
|
<script setup name="LayCheckbox" lang="ts">
|
|
import { defineProps, ref, watch } from 'vue'
|
|
|
|
const props =
|
|
defineProps<{
|
|
modelValue: string[]
|
|
label: string
|
|
disabled?: boolean
|
|
name?: string
|
|
skin?: string
|
|
}>()
|
|
|
|
const hasValue = ref(false)
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const handleClick = function () {
|
|
if (!props.disabled) {
|
|
if (!props.modelValue.includes(props.label)) {
|
|
props.modelValue.push(props.label)
|
|
} else {
|
|
let index = props.modelValue.indexOf(props.label)
|
|
props.modelValue.splice(index, 1)
|
|
}
|
|
emit('update:modelValue', props.modelValue)
|
|
}
|
|
}
|
|
</script>
|