refactor: demo using script setup (#9235)

src/notice-bar/demo/index.vue

@@ -1,3 +1,32 @@
+<script setup lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
+    mode: '通知栏模式',
+    content: '内容',
+    wrapable: '多行展示',
+    shortText: '技术是开发它的人的共同灵魂。',
+    scrollable: '滚动播放',
+    customStyle: '自定义样式',
+    verticalScroll: '垂直滚动',
+  },
+  'en-US': {
+    text: 'Technology is the common soul of the people who developed it.',
+    mode: 'Mode',
+    content: 'Content',
+    wrapable: 'Wrapable',
+    shortText: 'Some short text.',
+    customStyle: 'Custom Style',
+    scrollable: 'Scrollable',
+    verticalScroll: 'Vertical Scroll',
+  },
+};
+
+const t = useTranslate(i18n);
+</script>
+
 <template>
   <demo-block :title="t('basicUsage')">
     <van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
@@ -42,40 +71,6 @@
   </demo-block>
 </template>
 
-<script lang="ts">
-import { useTranslate } from '@demo/use-translate';
-
-const i18n = {
-  'zh-CN': {
-    text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
-    mode: '通知栏模式',
-    content: '内容',
-    wrapable: '多行展示',
-    shortText: '技术是开发它的人的共同灵魂。',
-    scrollable: '滚动播放',
-    customStyle: '自定义样式',
-    verticalScroll: '垂直滚动',
-  },
-  'en-US': {
-    text: 'Technology is the common soul of the people who developed it.',
-    mode: 'Mode',
-    content: 'Content',
-    wrapable: 'Wrapable',
-    shortText: 'Some short text.',
-    customStyle: 'Custom Style',
-    scrollable: 'Scrollable',
-    verticalScroll: 'Vertical Scroll',
-  },
-};
-
-export default {
-  setup() {
-    const t = useTranslate(i18n);
-    return { t };
-  },
-};
-</script>
-
 <style lang="less">
 @import '../../style/var';