From af224dceeaf0a5fa3d33997b87fc1c1a4490578e Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 21 Oct 2023 19:46:26 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=88=86=E6=AE=B5?=
 =?UTF-8?q?=E6=8E=A7=E5=88=B6=E5=99=A8=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0`v-model`=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReSegmented/src/index.tsx | 22 ++++++---
 src/views/components/segmented/index.vue | 63 +++++++++---------------
 2 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/src/components/ReSegmented/src/index.tsx b/src/components/ReSegmented/src/index.tsx
index f7f5a6796..8378f4ad6 100644
--- a/src/components/ReSegmented/src/index.tsx
+++ b/src/components/ReSegmented/src/index.tsx
@@ -2,31 +2,33 @@ import "./index.css";
 import {
   h,
   ref,
+  toRef,
   watch,
   nextTick,
   defineComponent,
   getCurrentInstance
 } from "vue";
 import type { OptionsType } from "./type";
-import { isFunction, useDark } from "@pureadmin/utils";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { isFunction, isNumber, useDark } from "@pureadmin/utils";
 
 const props = {
   options: {
     type: Array<OptionsType>,
     default: () => []
   },
-  /** 默认选中，按照第一个索引为 `0` 的模式 */
-  defaultValue: {
-    type: Number,
-    default: 0
+  /** 默认选中，按照第一个索引为 `0` 的模式，可选（`modelValue`只有传`number`类型时才为响应式） */
+  modelValue: {
+    type: undefined,
+    require: false,
+    default: "0"
   }
 };
 
 export default defineComponent({
   name: "ReSegmented",
   props,
-  emits: ["change"],
+  emits: ["change", "update:modelValue"],
   setup(props, { emit }) {
     const width = ref(0);
     const translateX = ref(0);
@@ -35,12 +37,16 @@ export default defineComponent({
     const curMouseActive = ref(-1);
     const segmentedItembg = ref("");
     const instance = getCurrentInstance()!;
-    const curIndex = ref(props.defaultValue);
+    const curIndex = isNumber(props.modelValue)
+      ? toRef(props, "modelValue")
+      : ref(0);
 
     function handleChange({ option, index }, event: Event) {
       if (option.disabled) return;
       event.preventDefault();
-      curIndex.value = index;
+      isNumber(props.modelValue)
+        ? emit("update:modelValue", index)
+        : (curIndex.value = index);
       segmentedItembg.value = "";
       emit("change", { index, option });
     }
diff --git a/src/views/components/segmented/index.vue b/src/views/components/segmented/index.vue
index 63cff62e3..03f3cedbd 100644
--- a/src/views/components/segmented/index.vue
+++ b/src/views/components/segmented/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { h } from "vue";
+import { h, ref } from "vue";
 import { message } from "@/utils/message";
 import HomeFilled from "@iconify-icons/ep/home-filled";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
@@ -10,51 +10,43 @@ defineOptions({
 });
 
 /** 基础用法 */
+const value = ref(4); // 必须为number类型
+
 const optionsBasis: Array<OptionsType> = [
   {
-    label: "周一",
-    value: 1
+    label: "周一"
   },
   {
-    label: "周二",
-    value: 2
+    label: "周二"
   },
   {
-    label: "周三",
-    value: 3
+    label: "周三"
   },
   {
-    label: "周四",
-    value: 4
+    label: "周四"
   },
   {
-    label: "周五",
-    value: 5
+    label: "周五"
   }
 ];
 
 /** 禁用 */
 const optionsDisabled: Array<OptionsType> = [
   {
-    label: "周一",
-    value: 1
+    label: "周一"
   },
   {
-    label: "周二",
-    value: 2
+    label: "周二"
   },
   {
     label: "周三",
-    value: 3,
     disabled: true
   },
   {
-    label: "周四",
-    value: 4
+    label: "周四"
   },
   {
     label: "周五",
-    value: 5,
     disabled: true
   }
 ];
@@ -63,26 +55,21 @@ const optionsDisabled: Array<OptionsType> = [
 const optionsIcon: Array<OptionsType> = [
   {
     label: "周一",
-    value: 1,
     icon: HomeFilled
   },
   {
-    label: "周二",
-    value: 2
+    label: "周二"
   },
   {
     label: "周三",
-    value: 3,
     icon: "terminalWindowLine"
   },
   {
     label: "周四",
-    value: 4,
     icon: "streamline-emojis:airplane"
   },
   {
     label: "周五",
-    value: 5,
     icon: "streamline-emojis:2"
   }
 ];
@@ -90,23 +77,18 @@ const optionsIcon: Array<OptionsType> = [
 /** 只设置图标 */
 const optionsOnlyIcon: Array<OptionsType> = [
   {
-    value: 1,
     icon: HomeFilled
   },
   {
-    value: 2,
     icon: "terminalWindowLine"
   },
   {
-    value: 3,
     icon: "streamline-emojis:cow-face"
   },
   {
-    value: 4,
     icon: "streamline-emojis:airplane"
   },
   {
-    value: 5,
     icon: "streamline-emojis:2"
   }
 ];
@@ -121,8 +103,7 @@ const optionsLabel: Array<OptionsType> = [
         })}
         <p>周一</p>
       </div>
-    ),
-    value: 1
+    )
   },
   {
     label: () => (
@@ -132,8 +113,7 @@ const optionsLabel: Array<OptionsType> = [
         })}
         <p>周二</p>
       </div>
-    ),
-    value: 2
+    )
   },
   {
     label: () => (
@@ -143,8 +123,7 @@ const optionsLabel: Array<OptionsType> = [
         })}
         <p>周三</p>
       </div>
-    ),
-    value: 3
+    )
   }
 ];
 
@@ -179,11 +158,15 @@ function onChange({ index, option }) {
         <span class="font-medium">分段控制器</span>
       </div>
     </template>
-    <p class="mb-2">基础用法</p>
-    <Segmented :options="optionsBasis" />
+    <p class="mb-2">
+      基础用法（v-model）<span class="text-primary">
+        {{ optionsBasis[value].label }}
+      </span>
+    </p>
+    <Segmented :options="optionsBasis" v-model="value" />
     <el-divider />
-    <p class="mb-2">默认选中和禁用</p>
-    <Segmented :options="optionsDisabled" :defaultValue="2" />
+    <p class="mb-2">禁用</p>
+    <Segmented :options="optionsDisabled" />
     <el-divider />
     <p class="mb-2">设置图标</p>
     <Segmented :options="optionsIcon" />