bill 4 maanden geleden
bovenliggende
commit
6d71aea5ab
2 gewijzigde bestanden met toevoegingen van 43 en 24 verwijderingen
  1. 26 15
      src/components/bill-ui/components/input/checkbox.vue
  2. 17 9
      src/components/view-setting/index.vue

+ 26 - 15
src/components/bill-ui/components/input/checkbox.vue

@@ -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>

+ 17 - 9
src/components/view-setting/index.vue

@@ -31,7 +31,7 @@ import {
   showTaggingsStack,
 } from "@/env";
 import { DownOutlined } from "@ant-design/icons-vue";
-import { computed, watchEffect } from "vue";
+import { computed, watch, watchEffect } from "vue";
 import { selectPaths } from "@/store";
 
 const props = defineProps<{ value?: Record<string, boolean> }>();
@@ -44,17 +44,25 @@ const showOptions = [
     key: "showPath",
     text: "路径",
     stack: computed({
-      get: () => selectPaths.all.value || selectPaths.selects.value.length > 0,
-      set: (val: boolean) => (selectPaths.all.value = val),
+      get: () => {
+        return selectPaths.all.value || selectPaths.selects.value.length > 0;
+      },
+      set: (val: boolean) => {
+        selectPaths.all.value = val;
+        console.log(selectPaths.selects.value);
+      },
     }),
   },
 ];
-watchEffect(() => {
-  if (!props.value) return;
-  showOptions.forEach((item) => {
-    item.stack.value = props.value![item.key];
-  });
-});
+watch(
+  () => props.value,
+  () => {
+    if (!props.value) return;
+    showOptions.forEach((item) => {
+      item.stack.value = props.value![item.key];
+    });
+  }
+);
 
 watchEffect(() => {
   emit(