refactor: demo using script setup (#9235)

2021-08-11 10:55:10 +08:00
parent 010238b63c
commit 4c41908ac1
86 changed files with 4277 additions and 5151 deletions
@@ -1,3 +1,75 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { ActionSheetAction } from '..';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    option1: '选项一',
+    option2: '选项二',
+    option3: '选项三',
+    subname: '描述信息',
+    showCancel: '展示取消按钮',
+    buttonText: '弹出菜单',
+    customPanel: '自定义面板',
+    description: '这是一段描述信息',
+    optionStatus: '选项状态',
+    coloredOption: '着色选项',
+    disabledOption: '禁用选项',
+    showDescription: '展示描述信息',
+  },
+  'en-US': {
+    option1: 'Option 1',
+    option2: 'Option 2',
+    option3: 'Option 3',
+    subname: 'Description',
+    showCancel: 'Show Cancel Button',
+    buttonText: 'Show ActionSheet',
+    customPanel: 'Custom Panel',
+    description: 'Description',
+    optionStatus: 'Option Status',
+    coloredOption: 'Colored Option',
+    disabledOption: 'Disabled Option',
+    showDescription: 'Show Description',
+  },
+};
+
+const t = useTranslate(i18n);
+const show = reactive({
+  basic: false,
+  cancel: false,
+  title: false,
+  status: false,
+  description: false,
+});
+
+const simpleActions = computed<ActionSheetAction[]>(() => [
+  { name: t('option1') },
+  { name: t('option2') },
+  { name: t('option3') },
+]);
+
+const statusActions = computed<ActionSheetAction[]>(() => [
+  { name: t('coloredOption'), color: '#ee0a24' },
+  { name: t('disabledOption'), disabled: true },
+  { loading: true },
+]);
+
+const actionsWithDescription = computed<ActionSheetAction[]>(() => [
+  { name: t('option1') },
+  { name: t('option2') },
+  { name: t('option3'), subname: t('subname') },
+]);
+
+const onSelect = (item: ActionSheetAction) => {
+  show.basic = false;
+  Toast(item.name);
+};
+
+const onCancel = () => Toast(t('cancel'));
+</script>
+
 <template>
  <demo-block card :title="t('basicUsage')">
    <van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
@@ -51,94 +123,6 @@
  </van-action-sheet>
 </template>

-<script lang="ts">
-import { computed, reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { ActionSheetAction } from '..';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    option1: '选项一',
-    option2: '选项二',
-    option3: '选项三',
-    subname: '描述信息',
-    showCancel: '展示取消按钮',
-    buttonText: '弹出菜单',
-    customPanel: '自定义面板',
-    description: '这是一段描述信息',
-    optionStatus: '选项状态',
-    coloredOption: '着色选项',
-    disabledOption: '禁用选项',
-    showDescription: '展示描述信息',
-  },
-  'en-US': {
-    option1: 'Option 1',
-    option2: 'Option 2',
-    option3: 'Option 3',
-    subname: 'Description',
-    showCancel: 'Show Cancel Button',
-    buttonText: 'Show ActionSheet',
-    customPanel: 'Custom Panel',
-    description: 'Description',
-    optionStatus: 'Option Status',
-    coloredOption: 'Colored Option',
-    disabledOption: 'Disabled Option',
-    showDescription: 'Show Description',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      show: {
-        basic: false,
-        cancel: false,
-        title: false,
-        status: false,
-        description: false,
-      },
-    });
-
-    const simpleActions = computed<ActionSheetAction[]>(() => [
-      { name: t('option1') },
-      { name: t('option2') },
-      { name: t('option3') },
-    ]);
-
-    const statusActions = computed<ActionSheetAction[]>(() => [
-      { name: t('coloredOption'), color: '#ee0a24' },
-      { name: t('disabledOption'), disabled: true },
-      { loading: true },
-    ]);
-
-    const actionsWithDescription = computed<ActionSheetAction[]>(() => [
-      { name: t('option1') },
-      { name: t('option2') },
-      { name: t('option3'), subname: t('subname') },
-    ]);
-
-    const onSelect = (item: ActionSheetAction) => {
-      state.show.basic = false;
-      Toast(item.name);
-    };
-
-    const onCancel = () => Toast(t('cancel'));
-
-    return {
-      ...toRefs(state),
-      t,
-      onSelect,
-      onCancel,
-      simpleActions,
-      statusActions,
-      actionsWithDescription,
-    };
-  },
-};
-</script>
-
 <style lang="less">
@import '../../style/var';