65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<switch
|
||
|
|
class="cl-switch"
|
||
|
|
:checked="checked"
|
||
|
|
:disabled="isDisabled"
|
||
|
|
:color="color"
|
||
|
|
@change="onChange"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { computed, defineComponent } from "vue";
|
||
|
|
import { useForm } from "../../hooks";
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
props: {
|
||
|
|
// 绑定值
|
||
|
|
modelValue: [Boolean, String, Number],
|
||
|
|
// 是否禁用
|
||
|
|
disabled: {
|
||
|
|
type: Boolean,
|
||
|
|
default: null,
|
||
|
|
},
|
||
|
|
// 打开时的值
|
||
|
|
activeValue: {
|
||
|
|
type: [Boolean, String, Number],
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
// 关闭时的值
|
||
|
|
inactiveValue: {
|
||
|
|
type: [Boolean, String, Number],
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
// 打开时的背景色
|
||
|
|
color: String,
|
||
|
|
},
|
||
|
|
|
||
|
|
emits: ["update:modelValue", "change"],
|
||
|
|
|
||
|
|
setup(props, { emit }) {
|
||
|
|
const { disabled } = useForm();
|
||
|
|
|
||
|
|
// 是否选中
|
||
|
|
const checked = computed(() => props.modelValue === props.activeValue);
|
||
|
|
|
||
|
|
// 是否禁用
|
||
|
|
const isDisabled = computed(() => disabled.value || props.disabled);
|
||
|
|
|
||
|
|
// 监听变化
|
||
|
|
function onChange(e: any) {
|
||
|
|
const v = e.detail.value ? props.activeValue : props.inactiveValue;
|
||
|
|
|
||
|
|
emit("update:modelValue", v);
|
||
|
|
emit("change", v);
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
checked,
|
||
|
|
isDisabled,
|
||
|
|
onChange,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|