refactor: some feat pages transfer setup grammar (#3292)

* refactor: some feat pages transfer setup grammar * refactor: update
vbenjs · Nov 18, 2023 · cb90716 · cb90716
1 parent 72ef3df
commit cb90716
Show file tree

Hide file tree

Showing 19 changed files with 305 additions and 447 deletions.
diff --git a/src/views/demo/feat/breadcrumb/ChildrenList.vue b/src/views/demo/feat/breadcrumb/ChildrenList.vue
@@ -3,11 +3,7 @@
     <router-link to="/feat/breadcrumb/children/childrenDetail"> 进入子级详情页 </router-link>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
 
-  export default defineComponent({
-    components: { PageWrapper },
-  });
+<script lang="ts" setup>
+  import { PageWrapper } from '/@/components/Page';
 </script>
diff --git a/src/views/demo/feat/breadcrumb/ChildrenListDetail.vue b/src/views/demo/feat/breadcrumb/ChildrenListDetail.vue
@@ -3,9 +3,7 @@
     <div>子级详情页内容在此</div>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { PageWrapper } from '/@/components/Page';
 
-  export default defineComponent({ components: { PageWrapper } });
+<script lang="ts" setup>
+  import { PageWrapper } from '/@/components/Page';
 </script>
diff --git a/src/views/demo/feat/breadcrumb/FlatList.vue b/src/views/demo/feat/breadcrumb/FlatList.vue
@@ -3,11 +3,6 @@
     <router-link to="/feat/breadcrumb/flatDetail"> 进入平级详情页 </router-link>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import { PageWrapper } from '/@/components/Page';
-
-  export default defineComponent({
-    components: { PageWrapper },
-  });
 </script>
diff --git a/src/views/demo/feat/breadcrumb/FlatListDetail.vue b/src/views/demo/feat/breadcrumb/FlatListDetail.vue
@@ -1,8 +1,3 @@
 <template>
   <div>平级详情页</div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({});
-</script>
diff --git a/src/views/demo/feat/click-out-side/index.vue b/src/views/demo/feat/click-out-side/index.vue
@@ -7,25 +7,21 @@
     </ClickOutSide>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { ClickOutSide } from '/@/components/ClickOutSide';
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
   import { PageWrapper } from '/@/components/Page';
+  import { ClickOutSide } from '/@/components/ClickOutSide';
 
-  export default defineComponent({
-    components: { ClickOutSide, PageWrapper },
-    setup() {
-      const text = ref('Click');
-      function handleClickOutside() {
-        text.value = 'Click Out Side';
-      }
+  const text = ref('Click');
 
-      function innerClick() {
-        text.value = 'Click Inner';
-      }
-      return { innerClick, handleClickOutside, text };
-    },
-  });
+  function handleClickOutside() {
+    text.value = 'Click Out Side';
+  }
+
+  function innerClick() {
+    text.value = 'Click Inner';
+  }
 </script>
 
 <style lang="less" scoped>

diff --git a/src/views/demo/feat/context-menu/index.vue b/src/views/demo/feat/context-menu/index.vue
@@ -9,77 +9,71 @@
     </CollapseContainer>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { useContextMenu } from '/@/hooks/web/useContextMenu';
-  import { CollapseContainer } from '/@/components/Container';
+<script lang="ts" setup>
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { useContextMenu } from '/@/hooks/web/useContextMenu';
+
   import { PageWrapper } from '/@/components/Page';
+  import { CollapseContainer } from '/@/components/Container';
 
-  export default defineComponent({
-    components: { CollapseContainer, PageWrapper },
-    setup() {
-      const [createContextMenu] = useContextMenu();
-      const { createMessage } = useMessage();
-      function handleContext(e: MouseEvent) {
-        createContextMenu({
-          event: e,
-          items: [
-            {
-              label: 'New',
-              icon: 'bi:plus',
-              handler: () => {
-                createMessage.success('click new');
-              },
-            },
-            {
-              label: 'Open',
-              icon: 'bx:bxs-folder-open',
-              handler: () => {
-                createMessage.success('click open');
-              },
-            },
-          ],
-        });
-      }
+  const { createMessage } = useMessage();
+  const [createContextMenu] = useContextMenu();
+
+  function handleContext(e: MouseEvent) {
+    createContextMenu({
+      event: e,
+      items: [
+        {
+          label: 'New',
+          icon: 'bi:plus',
+          handler: () => {
+            createMessage.success('click new');
+          },
+        },
+        {
+          label: 'Open',
+          icon: 'bx:bxs-folder-open',
+          handler: () => {
+            createMessage.success('click open');
+          },
+        },
+      ],
+    });
+  }
 
-      function handleMultipleContext(e: MouseEvent) {
-        createContextMenu({
-          event: e,
-          items: [
+  function handleMultipleContext(e: MouseEvent) {
+    createContextMenu({
+      event: e,
+      items: [
+        {
+          label: 'New',
+          icon: 'bi:plus',
+
+          children: [
             {
-              label: 'New',
+              label: 'New1-1',
               icon: 'bi:plus',
-
+              divider: true,
               children: [
                 {
-                  label: 'New1-1',
-                  icon: 'bi:plus',
-                  divider: true,
-                  children: [
-                    {
-                      label: 'New1-1-1',
-                      handler: () => {
-                        createMessage.success('click new');
-                      },
-                    },
-                    {
-                      label: 'New1-2-1',
-                      disabled: true,
-                    },
-                  ],
+                  label: 'New1-1-1',
+                  handler: () => {
+                    createMessage.success('click new');
+                  },
                 },
                 {
-                  label: 'New1-2',
-                  icon: 'bi:plus',
+                  label: 'New1-2-1',
+                  disabled: true,
                 },
               ],
             },
+            {
+              label: 'New1-2',
+              icon: 'bi:plus',
+            },
           ],
-        });
-      }
-
-      return { handleContext, handleMultipleContext };
-    },
-  });
+        },
+      ],
+    });
+  }
 </script>
diff --git a/src/views/demo/feat/copy/index.vue b/src/views/demo/feat/copy/index.vue
@@ -2,35 +2,29 @@
   <PageWrapper title="文本复制示例">
     <CollapseContainer class="w-full h-32 bg-white rounded-md" title="Copy Example">
       <div class="flex justify-center">
-        <a-input placeholder="请输入" v-model:value="value" />
+        <a-input placeholder="请输入" v-model:value="copyValue" />
         <a-button type="primary" @click="handleCopy"> Copy </a-button>
       </div>
     </CollapseContainer>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, unref, ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
+<script lang="ts" setup>
+  import { unref, ref } from 'vue';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { PageWrapper } from '/@/components/Page';
   import { copyText } from '/@/utils/copyTextToClipboard';
 
-  export default defineComponent({
-    name: 'Copy',
-    components: { CollapseContainer, PageWrapper },
-    setup() {
-      const valueRef = ref('');
-      const { createMessage } = useMessage();
+  import { PageWrapper } from '/@/components/Page';
+  import { CollapseContainer } from '/@/components/Container/index';
+
+  const copyValue = ref('');
+  const { createMessage } = useMessage();
 
-      function handleCopy() {
-        const value = unref(valueRef);
-        if (!value) {
-          createMessage.warning('请输入要拷贝的内容！');
-          return;
-        }
-        copyText(value);
-      }
-      return { handleCopy, value: valueRef };
-    },
-  });
+  function handleCopy() {
+    const value = unref(copyValue);
+    if (!value) {
+      createMessage.warning('请输入要拷贝的内容！');
+      return;
+    }
+    copyText(value);
+  }
 </script>
diff --git a/src/views/demo/feat/download/index.vue b/src/views/demo/feat/download/index.vue
@@ -15,8 +15,7 @@
     </a-button>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="ts" setup>
   import {
     downloadByUrl,
     downloadByData,
@@ -27,40 +26,32 @@
   import { PageWrapper } from '/@/components/Page';
   import { Alert } from 'ant-design-vue';
 
-  export default defineComponent({
-    components: { PageWrapper, [Alert.name]: Alert },
-    setup() {
-      function handleDownByData() {
-        downloadByData('text content', 'testName.txt');
-      }
-      function handleDownloadByUrl() {
-        downloadByUrl({
-          url: 'https://codeload.github.com/anncwb/vue-vben-admin-doc/zip/master',
-          target: '_self',
-        });
+  const AAlert = Alert;
 
-        downloadByUrl({
-          url: 'https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png',
-          target: '_self',
-        });
-      }
+  function handleDownByData() {
+    downloadByData('text content', 'testName.txt');
+  }
 
-      function handleDownloadByBase64() {
-        downloadByBase64(imgBase64, 'logo.png');
-      }
+  function handleDownloadByUrl() {
+    downloadByUrl({
+      url: 'https://codeload.github.com/anncwb/vue-vben-admin-doc/zip/master',
+      target: '_self',
+    });
 
-      function handleDownloadByOnlineUrl() {
-        downloadByOnlineUrl(
-          'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5944817f47b8408e9f1442ece49d68ca~tplv-k3u1fbpfcp-watermark.image',
-          'logo.png',
-        );
-      }
-      return {
-        handleDownloadByUrl,
-        handleDownByData,
-        handleDownloadByBase64,
-        handleDownloadByOnlineUrl,
-      };
-    },
-  });
+    downloadByUrl({
+      url: 'https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png',
+      target: '_self',
+    });
+  }
+
+  function handleDownloadByBase64() {
+    downloadByBase64(imgBase64, 'logo.png');
+  }
+
+  function handleDownloadByOnlineUrl() {
+    downloadByOnlineUrl(
+      'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5944817f47b8408e9f1442ece49d68ca~tplv-k3u1fbpfcp-watermark.image',
+      'logo.png',
+    );
+  }
 </script>
diff --git a/src/views/demo/feat/ellipsis/index.vue b/src/views/demo/feat/ellipsis/index.vue
@@ -22,26 +22,16 @@
     </CollapseContainer>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { CollapseContainer } from '/@/components/Container/index';
+<script lang="ts" setup>
   import { PageWrapper } from '/@/components/Page';
   import { EllipsisText } from '@/components/EllipsisText';
+  import { CollapseContainer } from '/@/components/Container/index';
 
-  export default defineComponent({
-    name: 'Ellipsis',
-    components: { CollapseContainer, PageWrapper, EllipsisText },
-    setup() {
-      const text =
-        ref(`Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
+  const text = `Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
       包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
       也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
       包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
       也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
       包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
-      也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`);
-
-      return { text };
-    },
-  });
+      也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`;
 </script>