|
@@ -1,20 +1,31 @@
|
|
|
<template>
|
|
|
- <div class="input checkbox" :style="{ width, height }">
|
|
|
- <input :id="id" type="checkbox" class="replace-input" :checked="props.modelValue" @input="ev => emit('update:modelValue', ev.target.checked)" />
|
|
|
- <span class="replace">
|
|
|
- <icon type="checkbox" :size="width > height ? height : width" />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <label class="label" v-if="props.label" :for="id">
|
|
|
- {{ props.label }}
|
|
|
- </label>
|
|
|
+ <div class="input checkbox" :style="{ width, height }">
|
|
|
+ <input
|
|
|
+ :id="id"
|
|
|
+ type="checkbox"
|
|
|
+ class="replace-input"
|
|
|
+ :checked="props.modelValue"
|
|
|
+ @input="updateInput"
|
|
|
+ />
|
|
|
+ <span class="replace">
|
|
|
+ <icon type="checkbox" :size="width > height ? height : width" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <label class="label" v-if="props.label" :for="id">
|
|
|
+ {{ props.label }}
|
|
|
+ </label>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import icon from '../icon'
|
|
|
-import { checkboxPropsDesc } from './state'
|
|
|
-import { randomId } from '../../utils'
|
|
|
-const props = defineProps(checkboxPropsDesc)
|
|
|
-const emit = defineEmits(['update:modelValue'])
|
|
|
-const id = randomId(4)
|
|
|
+import icon from "../icon";
|
|
|
+import { checkboxPropsDesc } from "./state";
|
|
|
+import { randomId } from "../../utils";
|
|
|
+const props = defineProps(checkboxPropsDesc);
|
|
|
+const emit = defineEmits(["update:modelValue"]);
|
|
|
+const id = randomId(4);
|
|
|
+
|
|
|
+const updateInput = (ev) => {
|
|
|
+ console.error("ev.target.checked", ev.target.checked);
|
|
|
+ emit("update:modelValue", ev.target.checked);
|
|
|
+};
|
|
|
</script>
|