From c1b27dca89f7ce0fb9c7f5f894a907608f4bb85b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A5=A5=E6=96=AF?= <9068149@qq.com>
Date: Thu, 24 Feb 2022 09:58:50 +0800
Subject: [PATCH] =?UTF-8?q?=20refactor:=20=E4=BD=BF=E7=94=A8setup=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E9=99=A4src/components/rightslider=E5=A4=96=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                        | 160 ++++++------
 src/components/sliderassembly/index.vue  | 305 +++++++++++------------
 src/components/uploadCommodity/index.vue | 173 +++++++------
 src/components/uploadImg/index.vue       | 177 +++++++------
 4 files changed, 415 insertions(+), 400 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5af2811..ef6c020 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1827,63 +1827,6 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364668574&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -1892,28 +1835,6 @@
           "requires": {
             "minipass": "^3.1.1"
           }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -12323,6 +12244,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "4.0.12",
       "resolved": "https://registry.npmmirror.com/vue-router/download/vue-router-4.0.12.tgz",
diff --git a/src/components/sliderassembly/index.vue b/src/components/sliderassembly/index.vue
index 5d73d2d..b9705a6 100644
--- a/src/components/sliderassembly/index.vue
+++ b/src/components/sliderassembly/index.vue
@@ -16,7 +16,7 @@
           v-for="(item, ind) in items.comList"
           :key="ind"
         >
-          <i class="iconfont" :class="item.icon"  v-if="item.icon" />
+          <i class="iconfont" :class="item.icon" v-if="item.icon" />
           <van-icon :name="item.vanIcon" v-else />
           <p>{{ item.text }}</p>
         </div>
@@ -26,186 +26,175 @@
 </template>
 
 <script>
+import { reactive } from 'vue'
 export default {
   name: 'sliderassembly',
   props: {
     pointer: Object,
   },
-  data() {
-    return {
-      activeNames: [1, 2, 3] /* 侧边栏组件显示 */,
-      datas: [
-        {
-          title: '基础组件',
-          comList: [
-            {
-              text: '商品搜索',
-              type: '1-1',
-              icon: 'icon-shangpinsousuo',
-              name: 'commoditysearch',
-            },
-            {
-              text: '标题文本',
-              type: '1-3',
-              icon: 'icon-Component-biaotiwenzi',
-              name: 'captiontext',
-            },
+  setup(props) {
+    // 侧边栏组件显示
+    const activeNames = reactive([1, 2, 3])
 
-            {
-              text: '图片广告',
-              type: '1-3',
-              icon: 'icon-tupianguanggao',
-              name: 'pictureads',
-            },
-            {
-              text: '图文导航',
-              type: '1-4',
-              icon: 'icon-icon_tupiandaohang',
-              name: 'graphicnavigation',
-            },
-            {
-              text: '底部导航',
-              type: '1-5',
-              icon: 'icon-daohang',
-              name: 'tabBar',
-            },
-            {
-              text: '魔方',
-              type: '1-6',
-              icon: 'icon-mofang',
-              name: 'magiccube',
-            },
-            {
-              text: '公告',
-              type: '1-7',
-              icon: 'icon-gonggao',
-              name: 'notice',
-            },
-            
-            {
-              text: '视频',
-              type: '1-8',
-              icon: 'icon-shipin',
-              name: 'videoss',
-            },
-            {
-              text: '富文本',
-              type: '1-10',
-              icon: 'icon-fuwenben',
-              name: 'richtext',
-            },
-            {
-              text: '辅助分割',
-              type: '1-11',
-              icon: 'icon-Component-fuzhufenge',
-              name: 'auxiliarysegmentation',
-            },
+    // 组件信息配置
+    const datas = reactive([
+      {
+        title: '基础组件',
+        comList: [
+          {
+            text: '商品搜索',
+            type: '1-1',
+            icon: 'icon-shangpinsousuo',
+            name: 'commoditysearch',
+          },
+          {
+            text: '标题文本',
+            type: '1-3',
+            icon: 'icon-Component-biaotiwenzi',
+            name: 'captiontext',
+          },
 
-            {
-              text: '店铺信息',
-              type: '1-12',
-              icon: 'icon-dianpuxinxi',
-              name: 'storeinformation',
-            },
-            {
-              text: '单元格',
-              type: '1-13',
-              icon: 'icon-jinrudianpu',
-              name: 'entertheshop',
-            },            
-            {
-              text: '社群涨粉',
-              type: '1-14',
-              icon: 'icon-kuaisuzhangfen',
-              name: 'communitypowder',
-            },
-            /* {
-              text: 'xxx',
-              type: '1-17',
-              icon: 'icon-yunying',
-              name: ''
-            }, */
-            /* {
-              text: 'xxx',
-              type: '1-19',
-              icon: 'icon-weibiaoti-_huaban',
-              name: ''
-            }, */
-            /* {
-              text: 'xxxx',
-              type: '1-18',
-              icon: 'icon-gexinghuatuijian',
-              name: ''
-            }, */
-            {
-              text: '关注公众号',
-              type: '1-15',
-              icon: 'icon-gongzhonghao',
-              name: 'follow',
-            },
-            {
-              text: '悬浮',
-              type: '1-16',
-              icon: 'icon-wangye',
-              name: 'suspension',
-            },
-            {
-              text: '自定义模块',
-              type: 'demo',
-              icon: 'icon-zidingyimokuai',
-              name: 'custommodule'
-            }, 
-          ],
-        },
-        {
-          title: '业务组件',
-          comList: [
-            {
-              text: '商品',
-              type: '2-1',
-              icon: 'icon-goods',
-              name: 'listswitching',
-            },
-            {
-              text: '文章模块',
-              type: '2-2',
-              icon: 'icon-dianpubijikapian',
-              name: 'storenotecard',
-            },
-            {
-              text: '表单模块',
-              type: '2-3',
-              vanIcon: 'orders-o',
-              name: 'investigate',
-            }
-          ]
-        },
+          {
+            text: '图片广告',
+            type: '1-3',
+            icon: 'icon-tupianguanggao',
+            name: 'pictureads',
+          },
+          {
+            text: '图文导航',
+            type: '1-4',
+            icon: 'icon-icon_tupiandaohang',
+            name: 'graphicnavigation',
+          },
+          {
+            text: '底部导航',
+            type: '1-5',
+            icon: 'icon-daohang',
+            name: 'tabBar',
+          },
+          {
+            text: '魔方',
+            type: '1-6',
+            icon: 'icon-mofang',
+            name: 'magiccube',
+          },
+          {
+            text: '公告',
+            type: '1-7',
+            icon: 'icon-gonggao',
+            name: 'notice',
+          },
+
+          {
+            text: '视频',
+            type: '1-8',
+            icon: 'icon-shipin',
+            name: 'videoss',
+          },
+          {
+            text: '富文本',
+            type: '1-10',
+            icon: 'icon-fuwenben',
+            name: 'richtext',
+          },
+          {
+            text: '辅助分割',
+            type: '1-11',
+            icon: 'icon-Component-fuzhufenge',
+            name: 'auxiliarysegmentation',
+          },
+
+          {
+            text: '店铺信息',
+            type: '1-12',
+            icon: 'icon-dianpuxinxi',
+            name: 'storeinformation',
+          },
+          {
+            text: '单元格',
+            type: '1-13',
+            icon: 'icon-jinrudianpu',
+            name: 'entertheshop',
+          },
+          {
+            text: '社群涨粉',
+            type: '1-14',
+            icon: 'icon-kuaisuzhangfen',
+            name: 'communitypowder',
+          },
+          {
+            text: '关注公众号',
+            type: '1-15',
+            icon: 'icon-gongzhonghao',
+            name: 'follow',
+          },
+          {
+            text: '悬浮',
+            type: '1-16',
+            icon: 'icon-wangye',
+            name: 'suspension',
+          },
+          {
+            text: '自定义模块',
+            type: 'demo',
+            icon: 'icon-zidingyimokuai',
+            name: 'custommodule',
+          },
+        ],
+      },
+      {
+        title: '业务组件',
+        comList: [
+          {
+            text: '商品',
+            type: '2-1',
+            icon: 'icon-goods',
+            name: 'listswitching',
+          },
+          {
+            text: '文章模块',
+            type: '2-2',
+            icon: 'icon-dianpubijikapian',
+            name: 'storenotecard',
+          },
+          {
+            text: '表单模块',
+            type: '2-3',
+            vanIcon: 'orders-o',
+            name: 'investigate',
+          },
+        ],
+      },
+    ])
 
-      ],
-    }
-  },
-  methods: {
     /**
      * 当用户开始拖动元素或选择文本时触发此事件
      *
      * @param {Object} event event对象
      */
-    drag(event) {
+    const drag = (event) => {
       /* 开启穿透 */
-      this.pointer.show = true
+      props.pointer.show = true
       /* 传递参数 */
       event.dataTransfer.setData('componentName', event.target.dataset.name)
-    },
+    }
 
     /**
      * 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
      *
      * @param {Object} event event对象
      */
-    dragends() {
+    const dragends = () => {
       /* 关闭穿透 */
-      this.pointer.show = false
-    },
+      props.pointer.show = false
+    }
+
+    return {
+      activeNames,
+      datas,
+      drag,
+      dragends,
+    }
   },
 }
 </script>
diff --git a/src/components/uploadCommodity/index.vue b/src/components/uploadCommodity/index.vue
index d37bd66..6b658b6 100644
--- a/src/components/uploadCommodity/index.vue
+++ b/src/components/uploadCommodity/index.vue
@@ -77,10 +77,15 @@
 </template>
 
 <script>
+import { reactive, toRefs, computed } from 'vue'
+import { ElMessageBox } from 'element-plus'
+
 export default {
   name: 'uploadCommodity',
-  data() {
-    return {
+  emits: ['uploadListInformation'],
+  setup(props, ctx) {
+    // 数据集合
+    const datas = reactive({
       dialogVisible: false, //弹框默认隐藏
       dialogImageUrl: {}, // 选择的数据
       type: '2',
@@ -98,90 +103,94 @@ export default {
       options: [], //后端返回的列表提供下拉选择
       externalLink: null,
       emptyText: '',
-    }
-  },
-  created() {},
-  methods: {
-    selectType() {
-      // 清空 options
-      this.options = []
-    },
+    })
 
-    // 选择类型
-    changeType(isVisible, linkType) {
-      if (isVisible && linkType) {
-        this.emptyText = '正在搜索中'
-        /* 获取信息 */
-        let res = {
-          code: 0,
-          success: true,
-          error: false,
-          data: [
-            {
-              coverUrl:
-                'https://imgs.starfirelink.com/minicourse/非遗传承人@2x_1621504834414.png',
-              introduce: '',
-              price: 0,
-              name: '测试1',
-              videoId: '5285890818212341060',
-              id: 403,
-              type: 2,
-              seriesId: '0',
-            },
-            {
-              coverUrl:
-                'https://imgs.starfirelink.com/minicourse/QQ截图20210409170420_1621416051505.png',
-              introduce: '1',
-              price: 1,
-              name: '测试2',
-              videoId: '',
-              id: 396,
-              type: 2,
-              seriesId: '85',
-            },
-          ],
+    // 事件集合
+    const methods = {
+      selectType() {
+        // 清空 options
+        datas.options = []
+      },
+      // 选择类型
+      changeType(isVisible, linkType) {
+        if (isVisible && linkType) {
+          datas.emptyText = '正在搜索中'
+          /* 获取信息 */
+          let res = {
+            code: 0,
+            success: true,
+            error: false,
+            data: [
+              {
+                coverUrl:
+                  'https://imgs.starfirelink.com/minicourse/非遗传承人@2x_1621504834414.png',
+                introduce: '',
+                price: 0,
+                name: '测试1',
+                videoId: '5285890818212341060',
+                id: 403,
+                type: 2,
+                seriesId: '0',
+              },
+              {
+                coverUrl:
+                  'https://imgs.starfirelink.com/minicourse/QQ截图20210409170420_1621416051505.png',
+                introduce: '1',
+                price: 1,
+                name: '测试2',
+                videoId: '',
+                id: 396,
+                type: 2,
+                seriesId: '85',
+              },
+            ],
+          }
+          res.data.length === 0 ? (datas.emptyText = '暂无数据') : null
+          datas.options = res.data
         }
-        this.activ = 0
-        res.data.length === 0 ? (this.emptyText = '暂无数据') : null
-        this.options = res.data
-      }
-    },
-    // 保存跳转的地方
-    changeId(res) {
-      this.dialogImageUrl = res
-      console.log(this.dialogImageUrl, '----------------changeId')
-    },
-    /* 显示上传文件组件 */
-    showUpload() {
-      this.dialogVisible = true
-    },
-    /* 传递图片地址 */
-    uploadInformation() {
-      this.dialogImageUrl.httpType = this.type
-      this.$emit('uploadListInformation', this.dialogImageUrl)
+      },
+      // 保存跳转的地方
+      changeId(res) {
+        datas.dialogImageUrl = res
+        console.log(datas.dialogImageUrl, '----------------changeId')
+      },
+      /* 显示上传文件组件 */
+      showUpload() {
+        datas.dialogVisible = true
+      },
+      /* 传递图片地址 */
+      uploadInformation() {
+        datas.dialogImageUrl.httpType = datas.type
+        ctx.emit('uploadListInformation', datas.dialogImageUrl)
 
-      // 隐藏上传弹框
-      this.dialogVisible = false
-      this.uploadShow = false
-      this.dialogImageUrl = {}
-    },
-    // 关闭弹框
-    handleClose() {
-      this.$confirm('点击取消后您填写的信息将丢失，您确定取消？')
-        .then(() => {
-          // 隐藏上传文件
-          this.dialogVisible = false
-          this.dialogImageUrl = {}
-        })
-        .catch(() => {})
-    },
-  },
-  computed: {
-    // 提交按钮是否可以点击
-    disabl() {
-      if (!this.dialogImageUrl) return true
+        // 隐藏上传弹框
+        datas.dialogVisible = false
+        datas.uploadShow = false
+        datas.dialogImageUrl = {}
+      },
+      // 关闭弹框
+      handleClose() {
+        ElMessageBox.confirm('点击取消后您填写的信息将丢失，您确定取消？')
+          .then(() => {
+            // 隐藏上传文件
+            datas.dialogVisible = false
+            datas.dialogImageUrl = {}
+          })
+          .catch(() => {})
+      },
+    }
+
+    // 通过computed获得disabl
+    const disabl = computed(() => {
+      if (!datas.dialogImageUrl) return true
       return false
-    },
+    })
+
+    return {
+      ...toRefs(datas),
+      ...methods,
+      disabl,
+    }
   },
 }
 </script>
diff --git a/src/components/uploadImg/index.vue b/src/components/uploadImg/index.vue
index b59550d..de2a189 100644
--- a/src/components/uploadImg/index.vue
+++ b/src/components/uploadImg/index.vue
@@ -30,13 +30,16 @@
       </el-upload>
 
       <!-- 按钮 -->
-       <template #footer>
-      <span  class="dialog-footer">
-        <el-button @click="handleClose">取 消 上 传</el-button>
-        <el-button type="primary" @click="uploadInformation" :disabled="disabl"
-          >点 击 上 传</el-button
-        >
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleClose">取 消 上 传</el-button>
+          <el-button
+            type="primary"
+            @click="uploadInformation"
+            :disabled="disabl"
+            >点 击 上 传</el-button
+          >
+        </span>
       </template>
     </el-dialog>
 
@@ -53,89 +56,101 @@
 </template>
 
 <script>
+import { reactive, toRefs, computed } from 'vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
+
 export default {
   name: 'uploadImg',
-  data() {
-    return {
+  emits: ['uploadInformation', 'handleClose'],
+  setup(props, ctx) {
+    // 数据集合
+    const datas = reactive({
       dialogVisible: false, //弹框默认隐藏
       dialogVisibles: false, // 放大的图片
       dialogImageUrl: '', // 上传的图片
       uploadShow: false, //是否显示上传图片
+    })
+
+    // 事件集合
+    const methods = {
+      /* 显示上传文件组件 */
+      showUpload() {
+        datas.dialogVisible = true
+      },
+      /* 传递图片地址 */
+      uploadInformation() {
+        ctx.emit('uploadInformation', datas.dialogImageUrl)
+        // 隐藏上传弹框
+        datas.dialogVisible = false
+        datas.uploadShow = false
+        datas.dialogImageUrl = ''
+      },
+      // 关闭弹框
+      handleClose() {
+        ElMessageBox.confirm('点击取消后您填写的信息将丢失，您确定取消？')
+          .then(() => {
+            methods.handleRemove()
+            ctx.emit('handleClose')
+            // 隐藏上传文件
+            datas.dialogVisible = false
+            datas.dialogImageUrl = ''
+          })
+          .catch(() => {})
+      },
+
+      // 删除图片
+      handleRemove() {
+        datas.uploadShow = false
+        datas.dialogImageUrl = ''
+        return true
+      },
+
+      // 预览
+      preview() {
+        datas.dialogVisibles = true
+      },
+
+      // 上传成功
+      onSuccess(response) {
+        // 返回错误
+        if (response.success != true)
+          return ElMessage.error('上传图片失败，请删除后重新上传')
+
+        datas.dialogImageUrl = response.data.src
+      },
+
+      // 上传前
+      uploads(file) {
+        if (!file.type.includes('image')) {
+          ElMessage.error('请上传图片！')
+          return false
+        }
+        datas.uploadShow = true
+      },
+
+      // 上传失败
+      uploadError() {
+        ElMessage.error('请重新上传')
+        datas.uploadShow = false
+      },
     }
-  },
-  methods: {
-    /* 显示上传文件组件 */
-    showUpload() {
-      this.dialogVisible = true
-    },
-    /* 传递图片地址 */
-    uploadInformation() {
-      this.$emit('uploadInformation', this.dialogImageUrl)
-      // 隐藏上传弹框
-      this.dialogVisible = false
-      this.uploadShow = false
-      this.dialogImageUrl = ''
-    },
-    // 关闭弹框
-    handleClose() {
-      this.$confirm('点击取消后您填写的信息将丢失，您确定取消？')
-        .then(() => {
-          this.handleRemove()
-          this.$emit('handleClose')
-          // 隐藏上传文件
-          this.dialogVisible = false
-          this.dialogImageUrl = ''
-        })
-        .catch(() => {})
-    },
-
-    // 删除图片
-    handleRemove() {
-      this.uploadShow = false
-      this.dialogImageUrl = ''
-      return true
-    },
-
-    // 预览
-    preview() {
-      this.dialogVisibles = true
-    },
-
-    // 上传成功
-    onSuccess(response) {
-      // 返回错误
-      if (response.success != true)
-        return this.$message.error('上传图片失败，请删除后重新上传')
-
-      this.dialogImageUrl = response.data.src
-    },
-
-    // 上传前
-    uploads(file) {
-      if (!file.type.includes('image')) {
-        this.$message.error('请上传图片！')
-        return false
-      }
-      this.uploadShow = true
-    },
-
-    // 上传失败
-    uploadError() {
-      this.$message.error('请重新上传')
-      this.uploadShow = false
-    },
-  },
-  computed: {
-    // baseurl
-    baseupload() {
+    // 通过computed获得baseupload
+    const baseupload = computed(() => {
       return `${window.global_config.BASE_URL}upload/miniShop`
-    },
+    })
 
-    // 提交按钮是否可以点击
-    disabl() {
-      if (!this.dialogImageUrl) return true
+    // 通过computed获得disabl
+    const disabl = computed(() => {
+      if (!datas.dialogImageUrl) return true
       return false
-    },
+    })
+
+    return {
+      ...toRefs(datas),
+      ...methods,
+      baseupload,
+      disabl,
+    }
   },
 }
 </script>
@@ -158,7 +173,7 @@ export default {
       display: none !important;
     }
   }
-  .el-icon-plus{
+  .el-icon-plus {
     display: block;
     margin-top: 50px;
   }