refactor: demo using script setup (#9235)

src/field/demo/Autosize.vue

@@ -1,19 +1,4 @@
-<template>
-  <demo-block :title="t('autosize')">
-    <van-cell-group inset>
-      <van-field
-        v-model="value"
-        autosize
-        rows="1"
-        type="textarea"
-        :label="t('message')"
-        :placeholder="t('placeholder')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
@@ -30,12 +15,21 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const value = ref('');
-
-    return { t, value };
-  },
-};
+const t = useTranslate(i18n);
+const value = ref('');
 </script>
+
+<template>
+  <demo-block :title="t('autosize')">
+    <van-cell-group inset>
+      <van-field
+        v-model="value"
+        autosize
+        rows="1"
+        type="textarea"
+        :label="t('message')"
+        :placeholder="t('placeholder')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>

src/field/demo/BasicUsage.vue

@@ -1,16 +1,4 @@
-<template>
-  <demo-block :title="t('basicUsage')">
-    <van-cell-group inset>
-      <van-field
-        v-model="value"
-        :label="t('label')"
-        :placeholder="t('placeholder')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
@@ -25,11 +13,18 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const value = ref('');
-    return { t, value };
-  },
-};
+const t = useTranslate(i18n);
+const value = ref('');
 </script>
+
+<template>
+  <demo-block :title="t('basicUsage')">
+    <van-cell-group inset>
+      <van-field
+        v-model="value"
+        :label="t('label')"
+        :placeholder="t('placeholder')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>

src/field/demo/CustomType.vue

@@ -1,41 +1,5 @@
-<template>
-  <demo-block :title="t('customType')">
-    <van-cell-group inset>
-      <van-field
-        v-model="text"
-        :label="t('text')"
-        :placeholder="t('textPlaceholder')"
-      />
-      <van-field
-        v-model="phone"
-        type="tel"
-        :label="t('phone')"
-        :placeholder="t('phonePlaceholder')"
-      />
-      <van-field
-        v-model="digit"
-        type="digit"
-        :label="t('digit')"
-        :placeholder="t('digitPlaceholder')"
-      />
-      <van-field
-        v-model="number"
-        type="number"
-        :label="t('number')"
-        :placeholder="t('numberPlaceholder')"
-      />
-      <van-field
-        v-model="password"
-        type="password"
-        :label="t('password')"
-        :placeholder="t('passwordPlaceholder')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -65,21 +29,48 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      text: '',
-      phone: '',
-      digit: '',
-      number: '',
-      password: '',
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-    };
-  },
-};
+const t = useTranslate(i18n);
+const state = reactive({
+  text: '',
+  phone: '',
+  digit: '',
+  number: '',
+  password: '',
+});
 </script>
+
+<template>
+  <demo-block :title="t('customType')">
+    <van-cell-group inset>
+      <van-field
+        v-model="state.text"
+        :label="t('text')"
+        :placeholder="t('textPlaceholder')"
+      />
+      <van-field
+        v-model="state.phone"
+        type="tel"
+        :label="t('phone')"
+        :placeholder="t('phonePlaceholder')"
+      />
+      <van-field
+        v-model="state.digit"
+        type="digit"
+        :label="t('digit')"
+        :placeholder="t('digitPlaceholder')"
+      />
+      <van-field
+        v-model="state.number"
+        type="number"
+        :label="t('number')"
+        :placeholder="t('numberPlaceholder')"
+      />
+      <van-field
+        v-model="state.password"
+        type="password"
+        :label="t('password')"
+        :placeholder="t('passwordPlaceholder')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>

src/field/demo/Disabled.vue

@@ -1,21 +1,4 @@
-<template>
-  <demo-block :title="t('disabled')">
-    <van-cell-group inset>
-      <van-field
-        :model-value="t('inputReadonly')"
-        :label="t('text')"
-        readonly
-      />
-      <van-field
-        :model-value="t('inputDisabled')"
-        :label="t('text')"
-        disabled
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -32,11 +15,22 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-
-    return { t };
-  },
-};
+const t = useTranslate(i18n);
 </script>
+
+<template>
+  <demo-block :title="t('disabled')">
+    <van-cell-group inset>
+      <van-field
+        :model-value="t('inputReadonly')"
+        :label="t('text')"
+        readonly
+      />
+      <van-field
+        :model-value="t('inputDisabled')"
+        :label="t('text')"
+        disabled
+      />
+    </van-cell-group>
+  </demo-block>
+</template>

src/field/demo/ErrorInfo.vue

@@ -1,26 +1,5 @@
-<template>
-  <demo-block :title="t('errorInfo')">
-    <van-cell-group inset>
-      <van-field
-        v-model="username"
-        error
-        required
-        :label="t('username')"
-        :placeholder="t('usernamePlaceholder')"
-      />
-      <van-field
-        v-model="phone"
-        required
-        :label="t('phone')"
-        :placeholder="t('phonePlaceholder')"
-        :error-message="t('phoneError')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -38,18 +17,30 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      phone: '123',
-      username: '',
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-    };
-  },
-};
+const t = useTranslate(i18n);
+const state = reactive({
+  phone: '123',
+  username: '',
+});
 </script>
+
+<template>
+  <demo-block :title="t('errorInfo')">
+    <van-cell-group inset>
+      <van-field
+        v-model="state.username"
+        error
+        required
+        :label="t('username')"
+        :placeholder="t('usernamePlaceholder')"
+      />
+      <van-field
+        v-model="state.phone"
+        required
+        :label="t('phone')"
+        :placeholder="t('phonePlaceholder')"
+        :error-message="t('phoneError')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>

src/field/demo/FormatValue.vue

@@ -1,25 +1,5 @@
-<template>
-  <demo-block v-if="!isWeapp" :title="t('formatValue')">
-    <van-cell-group inset>
-      <van-field
-        v-model="value1"
-        :label="t('text')"
-        :formatter="formatter"
-        :placeholder="t('formatOnChange')"
-      />
-      <van-field
-        v-model="value2"
-        :label="t('text')"
-        :formatter="formatter"
-        format-trigger="onBlur"
-        :placeholder="t('formatOnBlur')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -37,20 +17,30 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      value1: '',
-      value2: '',
-    });
-    const formatter = (value: string) => value.replace(/\d/g, '');
-
-    return {
-      ...toRefs(state),
-      t,
-      formatter,
-    };
-  },
-};
+const t = useTranslate(i18n);
+const state = reactive({
+  value1: '',
+  value2: '',
+});
+const formatter = (value: string) => value.replace(/\d/g, '');
 </script>
+
+<template>
+  <demo-block v-if="!isWeapp" :title="t('formatValue')">
+    <van-cell-group inset>
+      <van-field
+        v-model="state.value1"
+        :label="t('text')"
+        :formatter="formatter"
+        :placeholder="t('formatOnChange')"
+      />
+      <van-field
+        v-model="state.value2"
+        :label="t('text')"
+        :formatter="formatter"
+        format-trigger="onBlur"
+        :placeholder="t('formatOnBlur')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>

src/field/demo/InputAlign.vue

@@ -1,17 +1,4 @@
-<template>
-  <demo-block :title="t('inputAlign')">
-    <van-cell-group inset>
-      <van-field
-        v-model="value"
-        :label="t('text')"
-        :placeholder="t('alignPlaceHolder')"
-        input-align="right"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
@@ -28,12 +15,19 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const value = ref('');
-
-    return { t, value };
-  },
-};
+const t = useTranslate(i18n);
+const value = ref('');
 </script>
+
+<template>
+  <demo-block :title="t('inputAlign')">
+    <van-cell-group inset>
+      <van-field
+        v-model="value"
+        :label="t('text')"
+        :placeholder="t('alignPlaceHolder')"
+        input-align="right"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>

src/field/demo/InsertButton.vue

@@ -1,3 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    sms: '短信验证码',
+    sendSMS: '发送验证码',
+    insertButton: '插入按钮',
+    smsPlaceholder: '请输入短信验证码',
+  },
+  'en-US': {
+    sms: 'SMS',
+    sendSMS: 'Send SMS',
+    insertButton: 'Insert Button',
+    smsPlaceholder: 'SMS',
+  },
+};
+
+const t = useTranslate(i18n);
+const sms = ref('');
+</script>
+
 <template>
   <demo-block :title="t('insertButton')">
     <van-cell-group inset>
@@ -17,32 +40,3 @@
     </van-cell-group>
   </demo-block>
 </template>
-
-<script lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    sms: '短信验证码',
-    sendSMS: '发送验证码',
-    insertButton: '插入按钮',
-    smsPlaceholder: '请输入短信验证码',
-  },
-  'en-US': {
-    sms: 'SMS',
-    sendSMS: 'Send SMS',
-    insertButton: 'Insert Button',
-    smsPlaceholder: 'SMS',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const sms = ref('');
-
-    return { t, sms };
-  },
-};
-</script>

src/field/demo/ShowIcon.vue

@@ -1,26 +1,5 @@
-<template>
-  <demo-block :title="t('showIcon')">
-    <van-cell-group inset>
-      <van-field
-        v-model="icon1"
-        :label="t('text')"
-        left-icon="smile-o"
-        right-icon="warning-o"
-        :placeholder="t('showIcon')"
-      />
-      <van-field
-        v-model="icon2"
-        clearable
-        :label="t('text')"
-        left-icon="music-o"
-        :placeholder="t('showClearIcon')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
 const i18n = {
@@ -36,18 +15,30 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const state = reactive({
-      icon1: '',
-      icon2: '123',
-    });
-
-    return {
-      ...toRefs(state),
-      t,
-    };
-  },
-};
+const t = useTranslate(i18n);
+const state = reactive({
+  icon1: '',
+  icon2: '123',
+});
 </script>
+
+<template>
+  <demo-block :title="t('showIcon')">
+    <van-cell-group inset>
+      <van-field
+        v-model="state.icon1"
+        :label="t('text')"
+        left-icon="smile-o"
+        right-icon="warning-o"
+        :placeholder="t('showIcon')"
+      />
+      <van-field
+        v-model="state.icon2"
+        clearable
+        :label="t('text')"
+        left-icon="music-o"
+        :placeholder="t('showClearIcon')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>

src/field/demo/ShowWordLimit.vue

@@ -1,21 +1,4 @@
-<template>
-  <demo-block v-if="!isWeapp" :title="t('showWordLimit')">
-    <van-cell-group inset>
-      <van-field
-        v-model="value"
-        autosize
-        show-word-limit
-        rows="2"
-        type="textarea"
-        maxlength="50"
-        :label="t('message')"
-        :placeholder="t('placeholder')"
-      />
-    </van-cell-group>
-  </demo-block>
-</template>
-
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
@@ -32,12 +15,23 @@ const i18n = {
   },
 };
 
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    const value = ref('');
-
-    return { t, value };
-  },
-};
+const t = useTranslate(i18n);
+const value = ref('');
 </script>
+
+<template>
+  <demo-block v-if="!isWeapp" :title="t('showWordLimit')">
+    <van-cell-group inset>
+      <van-field
+        v-model="value"
+        autosize
+        show-word-limit
+        rows="2"
+        type="textarea"
+        maxlength="50"
+        :label="t('message')"
+        :placeholder="t('placeholder')"
+      />
+    </van-cell-group>
+  </demo-block>
+</template>

src/field/demo/index.vue

@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import BasicUsage from './BasicUsage.vue';
+import CustomType from './CustomType.vue';
+import Disabled from './Disabled.vue';
+import ShowIcon from './ShowIcon.vue';
+import ErrorInfo from './ErrorInfo.vue';
+import InsertButton from './InsertButton.vue';
+import FormatValue from './FormatValue.vue';
+import Autosize from './Autosize.vue';
+import ShowWordLimit from './ShowWordLimit.vue';
+import InputAlign from './InputAlign.vue';
+</script>
+
 <template>
   <basic-usage />
   <custom-type />
@@ -10,31 +23,3 @@
   <show-word-limit />
   <input-align />
 </template>
-
-<script lang="ts">
-import BasicUsage from './BasicUsage.vue';
-import CustomType from './CustomType.vue';
-import Disabled from './Disabled.vue';
-import ShowIcon from './ShowIcon.vue';
-import ErrorInfo from './ErrorInfo.vue';
-import InsertButton from './InsertButton.vue';
-import FormatValue from './FormatValue.vue';
-import Autosize from './Autosize.vue';
-import ShowWordLimit from './ShowWordLimit.vue';
-import InputAlign from './InputAlign.vue';
-
-export default {
-  components: {
-    BasicUsage,
-    CustomType,
-    Disabled,
-    ShowIcon,
-    ErrorInfo,
-    InsertButton,
-    FormatValue,
-    Autosize,
-    ShowWordLimit,
-    InputAlign,
-  },
-};
-</script>