ow

WebVue/src/components/basic/check-box/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <Checkbox v-bind="getProps" v-model:checked="checkedModel" @change="handleChange">
+    <slot></slot>
+  </Checkbox>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import { checkboxProps } from 'ant-design-vue/es/checkbox';
+import { omit } from 'lodash-es';
+import { Checkbox } from 'ant-design-vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  ...checkboxProps(),
+  Value: {
+    type: [Number, Boolean, String],
+    default: false,
+  },
+  trueValue: {
+    type: [Number, Boolean, String],
+    default: true,
+  },
+  falseValue: {
+    type: [Number, Boolean, String],
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:checked', 'update:value', 'change']);
+
+const getProps = computed(() => {
+  return omit(props, ['onUpdate:checked', 'onChange']);
+});
+
+computed({
+  get() {
+    return props.value;
+  },
+  set(value) {
+    emit('update:value', value);
+  }
+});
+
+const checkedModel = ref<boolean>(props.value == props.trueValue);
+
+watch(() => props.value, (value) => {
+  checkedModel.value = value == props.trueValue;
+});
+
+const handleChange = (e: any) => {
+  const evt = {
+    ...e,
+    target: {
+      ...e.target,
+      checked: e.target.checked ? props.trueValue : props.falseValue,
+    },
+  };
+  emit('update:value', e.target.checked ? props.trueValue : props.falseValue);
+  emit('change', evt);
+};
+</script>