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,52 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+import { Toast } from '../../toast';
+
+const i18n = {
+  'zh-CN': {
+    close: '完成',
+    input: '输入',
+    title: '键盘标题',
+    button1: '弹出默认键盘',
+    button2: '弹出带右侧栏的键盘',
+    button3: '弹出身份证号键盘',
+    button4: '弹出带标题的键盘',
+    button5: '弹出配置多个按键的键盘',
+    button6: '弹出配置随机数字的键盘',
+    bindValue: '双向绑定',
+    clickToInput: '点此输入',
+    extraKey: '左下角按键内容',
+    multiExtraKey: '配置多个按键',
+    randomKeyOrder: '随机数字键盘',
+  },
+  'en-US': {
+    close: 'Close',
+    input: 'Input',
+    title: 'Keyboard Title',
+    button1: 'Show Default Keyboard',
+    button2: 'Show Keyboard With Sidebar',
+    button3: 'Show IdNumber Keyboard',
+    button4: 'Show Keyboard With Title',
+    button5: 'Show Keyboard With Multiple ExtraKey',
+    button6: 'Show Keyboard With Random Key Order',
+    bindValue: 'Bind Value',
+    clickToInput: 'Click To Input',
+    extraKey: 'IdNumber Keyboard',
+    multiExtraKey: 'Multiple ExtraKey',
+    randomKeyOrder: 'Random Key Order',
+  },
+};
+
+const t = useTranslate(i18n);
+const value = ref('');
+const keyboard = ref('default');
+
+const onInput = (value: string) => Toast(`${t('input')}: ${value}`);
+const onDelete = () => Toast(t('delete'));
+const isTest = process.env.NODE_ENV === 'test';
+</script>
+
 <template>
  <demo-block card>
    <van-cell
@@ -103,68 +152,6 @@
  />
 </template>

-<script lang="ts">
-import { reactive, toRefs } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { Toast } from '../../toast';
-
-const i18n = {
-  'zh-CN': {
-    close: '完成',
-    input: '输入',
-    title: '键盘标题',
-    button1: '弹出默认键盘',
-    button2: '弹出带右侧栏的键盘',
-    button3: '弹出身份证号键盘',
-    button4: '弹出带标题的键盘',
-    button5: '弹出配置多个按键的键盘',
-    button6: '弹出配置随机数字的键盘',
-    bindValue: '双向绑定',
-    clickToInput: '点此输入',
-    extraKey: '左下角按键内容',
-    multiExtraKey: '配置多个按键',
-    randomKeyOrder: '随机数字键盘',
-  },
-  'en-US': {
-    close: 'Close',
-    input: 'Input',
-    title: 'Keyboard Title',
-    button1: 'Show Default Keyboard',
-    button2: 'Show Keyboard With Sidebar',
-    button3: 'Show IdNumber Keyboard',
-    button4: 'Show Keyboard With Title',
-    button5: 'Show Keyboard With Multiple ExtraKey',
-    button6: 'Show Keyboard With Random Key Order',
-    bindValue: 'Bind Value',
-    clickToInput: 'Click To Input',
-    extraKey: 'IdNumber Keyboard',
-    multiExtraKey: 'Multiple ExtraKey',
-    randomKeyOrder: 'Random Key Order',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      value: '',
-      keyboard: 'default',
-    });
-
-    const onInput = (value: string) => Toast(`${t('input')}: ${value}`);
-    const onDelete = () => Toast(t('delete'));
-
-    return {
-      ...toRefs(state),
-      t,
-      isTest: process.env.NODE_ENV === 'test',
-      onInput,
-      onDelete,
-    };
-  },
-};
-</script>
-
 <style lang="less">
@import '../../style/var';