From 53fc7de3db162d2ea01d91a0b4b5f63b70519db9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Tue, 18 Apr 2023 23:39:26 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20`vueVModel`=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=88=B6=E5=AD=90=E7=BB=84=E4=BB=B6=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=8F=8C=E5=90=91=E7=BB=91=E5=AE=9A=E5=92=8C=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 44aeaae6f5e8501915108c008d580989fb15df5b
---
 src/components/Pagination/index.vue    | 18 ++--------
 src/components/Upload/SingleUpload.vue | 13 ++-----
 src/components/WangEditor/index.vue    | 49 +++++++++++++-------------
 3 files changed, 29 insertions(+), 51 deletions(-)

diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 7e1c82bd..24c5ed00 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -55,23 +55,11 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:page", "update:limit", "pagination"]);
+const emit = defineEmits(["pagination"]);
 
-const currentPage = computed<number | undefined>({
-  get: () => props.page,
-  set: (value) => {
-    emit("update:page", value);
-  },
-});
+const currentPage = useVModel(props, "page", emit);
 
-const pageSize = computed<number | undefined>({
-  get() {
-    return props.limit;
-  },
-  set(val) {
-    emit("update:limit", val);
-  },
-});
+const pageSize = useVModel(props, "limit", emit);
 
 function handleSizeChange(val: number) {
   emit("pagination", { page: currentPage, limit: val });
diff --git a/src/components/Upload/SingleUpload.vue b/src/components/Upload/SingleUpload.vue
index 0f2e8341..6cacc62d 100644
--- a/src/components/Upload/SingleUpload.vue
+++ b/src/components/Upload/SingleUpload.vue
@@ -17,8 +17,6 @@
 import { UploadRawFile, UploadRequestOptions } from "element-plus";
 import { uploadFileApi } from "@/api/file";
 
-const emit = defineEmits(["update:modelValue"]);
-
 const props = defineProps({
   modelValue: {
     type: String,
@@ -26,15 +24,8 @@ const props = defineProps({
   },
 });
 
-const imgUrl = computed<string | undefined>({
-  get() {
-    return props.modelValue;
-  },
-  set(val) {
-    // imgUrl改变时触发修改父组件绑定的v-model的值
-    emit("update:modelValue", val);
-  },
-});
+const emit = defineEmits(["update:modelValue"]);
+const imgUrl = useVModel(props, "modelValue", emit);
 
 /**
  * 自定义图片上传
diff --git a/src/components/WangEditor/index.vue b/src/components/WangEditor/index.vue
index aeab4d1f..963be94f 100644
--- a/src/components/WangEditor/index.vue
+++ b/src/components/WangEditor/index.vue
@@ -20,52 +20,51 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, shallowRef, reactive, toRefs } from 'vue';
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+import { onBeforeUnmount, shallowRef, reactive, toRefs } from "vue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 
 // API 引用
-import { uploadFileApi } from '@/api/file';
+import { uploadFileApi } from "@/api/file";
 
 const props = defineProps({
   modelValue: {
     type: [String],
-    default: ''
-  }
+    default: "",
+  },
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);
+
+const defaultHtml = useVModel(props, "modelValue", emit);
 
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef();
 
-const state = reactive({
-  toolbarConfig: {},
-  editorConfig: {
-    placeholder: '请输入内容...',
-    MENU_CONF: {
-      uploadImage: {
-        // 自定义图片上传
-        async customUpload(file: any, insertFn: any) {
-          uploadFileApi(file).then(response => {
-            const url = response.data.url;
-            insertFn(url);
-          });
-        }
-      }
-    }
+const toolbarConfig = ref({});
+
+const editorConfig = ref({
+  placeholder: "请输入内容...",
+  MENU_CONF: {
+    uploadImage: {
+      // 自定义图片上传
+      async customUpload(file: any, insertFn: any) {
+        uploadFileApi(file).then((response) => {
+          const url = response.data.url;
+          insertFn(url);
+        });
+      },
+    },
   },
-  defaultHtml: props.modelValue,
-  mode: 'default'
 });
 
-const { toolbarConfig, editorConfig, defaultHtml, mode } = toRefs(state);
+const mode = ref("default");
 
 const handleCreated = (editor: any) => {
   editorRef.value = editor; // 记录 editor 实例，重要！
 };
 
 function handleChange(editor: any) {
-  emit('update:modelValue', editor.getHtml());
+  emit("update:modelValue", editor.getHtml());
 }
 
 // 组件销毁时，也及时销毁编辑器