@opentiny/vue-docs 2.2.8 → 2.2.9

package/demos/pc/app/progress/custom-status-composition-api.vue

@@ -7,9 +7,15 @@
           <div class="tiny-progress-content-des">
             <div class="tiny-progress-content-des-title">安装进度</div>
           </div>
-          <tiny-progress class="progress" type="line" :percentage="percentage" status="exception"></tiny-progress>
+          <tiny-progress
+            class="progress"
+            type="line"
+            :percentage="percentage"
+            status="exception"
+            :stroke-width="24"
+          ></tiny-progress>
           <div class="tiny-progress-demo-status">
-            <icon-operationfaild-l class="tiny-progress-demo-status-icon"></icon-operationfaild-l>
+            <tiny-icon-operationfaild-l class="tiny-progress-demo-status-icon"></tiny-icon-operationfaild-l>
             <div class="tiny-progress-demo-status-des">上传失败</div>
           </div>
         </div>
@@ -26,7 +32,7 @@
                 <div class="tiny-progress-content-des-on" @click="cancel">取消</div>
               </div>
             </div>
-            <tiny-progress class="progress" type="line" :percentage="percentage1"></tiny-progress>
+            <tiny-progress class="progress" type="line" :percentage="percentage1" :stroke-width="24"></tiny-progress>
           </div>
         </div>
       </div>
@@ -38,9 +44,15 @@
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
             </div>
-            <tiny-progress class="progress" type="line" :percentage="percentage2" status="exception"></tiny-progress>
+            <tiny-progress
+              class="progress"
+              type="line"
+              :percentage="percentage2"
+              status="exception"
+              :stroke-width="24"
+            ></tiny-progress>
             <div class="tiny-progress-demo-status">
-              <icon-operationfaild-l class="tiny-progress-demo-status-icon"></icon-operationfaild-l>
+              <tiny-icon-operationfaild-l class="tiny-progress-demo-status-icon"></tiny-icon-operationfaild-l>
               <div class="tiny-progress-demo-status-des">
                 安装失败，请<i class="tiny-progress-demo-status-des-again" @click="reload">重试</i>
               </div>
@@ -56,9 +68,15 @@
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
             </div>
-            <tiny-progress class="progress" type="line" :percentage="percentage3" status="success"></tiny-progress>
+            <tiny-progress
+              class="progress"
+              type="line"
+              :percentage="percentage3"
+              status="success"
+              :stroke-width="24"
+            ></tiny-progress>
             <div class="tiny-progress-demo-status">
-              <icon-successfull class="tiny-progress-demo-status-icon"></icon-successfull>
+              <tiny-icon-successfull class="tiny-progress-demo-status-icon"></tiny-icon-successfull>
               <div class="tiny-progress-demo-status-des">安装成功</div>
             </div>
           </div>
@@ -73,8 +91,8 @@ import { ref, onMounted } from 'vue'
 import { Progress as TinyProgress } from '@opentiny/vue'
 import { iconOperationfaildL, iconSuccessful } from '@opentiny/vue-icon'
 
-const IconOperationfaildL = iconOperationfaildL()
-const IconSuccessfull = iconSuccessful()
+const TinyIconOperationfaildL = iconOperationfaildL()
+const TinyIconSuccessfull = iconSuccessful()
 
 const percentage = ref(50)
 const percentage1 = ref(0)
@@ -103,8 +121,9 @@ const getTimer1 = () => {
 }
 
 const reload = () => {
+  clearInterval(process2.value)
   percentage2.value = 0
-  location.reload()
+  getTimer2()
 }
 
 const getTimer2 = () => {
@@ -112,7 +131,7 @@ const getTimer2 = () => {
     percentage2.value += 5
 
     if (percentage2.value == 50) {
-      clearTimeout(process2.value)
+      clearInterval(process2.value)
     }
   }, 300)
 }

package/demos/pc/app/progress/custom-status.vue

@@ -7,9 +7,15 @@
           <div class="tiny-progress-content-des">
             <div class="tiny-progress-content-des-title">安装进度</div>
           </div>
-          <tiny-progress class="progress" type="line" :percentage="percentage" status="exception"></tiny-progress>
+          <tiny-progress
+            class="progress"
+            type="line"
+            :percentage="percentage"
+            status="exception"
+            :stroke-width="24"
+          ></tiny-progress>
           <div class="tiny-progress-demo-status">
-            <icon-operationfaild-l class="tiny-progress-demo-status-icon"></icon-operationfaild-l>
+            <tiny-icon-operationfaild-l class="tiny-progress-demo-status-icon"></tiny-icon-operationfaild-l>
             <div class="tiny-progress-demo-status-des">上传失败</div>
           </div>
         </div>
@@ -26,7 +32,7 @@
                 <div class="tiny-progress-content-des-on" @click="cancel">取消</div>
               </div>
             </div>
-            <tiny-progress class="progress" type="line" :percentage="percentage1"></tiny-progress>
+            <tiny-progress class="progress" type="line" :percentage="percentage1" :stroke-width="24"></tiny-progress>
           </div>
         </div>
       </div>
@@ -38,9 +44,15 @@
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
             </div>
-            <tiny-progress class="progress" type="line" :percentage="percentage2" status="exception"></tiny-progress>
+            <tiny-progress
+              class="progress"
+              type="line"
+              :percentage="percentage2"
+              status="exception"
+              :stroke-width="24"
+            ></tiny-progress>
             <div class="tiny-progress-demo-status">
-              <icon-operationfaild-l class="tiny-progress-demo-status-icon"></icon-operationfaild-l>
+              <tiny-icon-operationfaild-l class="tiny-progress-demo-status-icon"></tiny-icon-operationfaild-l>
               <div class="tiny-progress-demo-status-des">
                 安装失败，请<i class="tiny-progress-demo-status-des-again" @click="reload">重试</i>
               </div>
@@ -56,9 +68,15 @@
             <div class="tiny-progress-content-des">
               <div class="tiny-progress-content-des-title">安装进度</div>
             </div>
-            <tiny-progress class="progress" type="line" :percentage="percentage3" status="success"></tiny-progress>
+            <tiny-progress
+              class="progress"
+              type="line"
+              :percentage="percentage3"
+              status="success"
+              :stroke-width="24"
+            ></tiny-progress>
             <div class="tiny-progress-demo-status">
-              <icon-successfull class="tiny-progress-demo-status-icon"></icon-successfull>
+              <tiny-icon-successfull class="tiny-progress-demo-status-icon"></tiny-icon-successfull>
               <div class="tiny-progress-demo-status-des">安装成功</div>
             </div>
           </div>
@@ -75,8 +93,8 @@ import { iconOperationfaildL, iconSuccessful } from '@opentiny/vue-icon'
 export default {
   components: {
     TinyProgress: Progress,
-    IconOperationfaildL: iconOperationfaildL(),
-    IconSuccessfull: iconSuccessful()
+    TinyIconOperationfaildL: iconOperationfaildL(),
+    TinyIconSuccessfull: iconSuccessful()
   },
   data() {
     return {
@@ -112,8 +130,9 @@ export default {
       }, 300)
     },
     reload() {
+      clearInterval(this.process2)
       this.percentage2 = 0
-      location.reload()
+      this.getTimer2()
     },
     getTimer2() {
       var that = this
@@ -121,7 +140,7 @@ export default {
         that.percentage2 += 5
 
         if (this.percentage2 == 50) {
-          clearTimeout(this.process2)
+          clearInterval(this.process2)
         }
       }, 300)
     }

package/demos/pc/app/progress/webdoc/progress.js

@@ -115,12 +115,11 @@ export default {
         },
         {
           'name': 'status',
-          'type': 'string',
+          'type': `'success' | 'exception' | 'warning'`,
           'defaultValue': '',
           'desc': {
-            'zh-CN': '进度条当前状态；该属性的可选值为 success / exception / warning',
-            'en-US':
-              'Current status of the progress bar; The value of this attribute can be success, exception, or warning'
+            'zh-CN': '进度条当前状态',
+            'en-US': 'Current status of the progress bar'
           },
           'demoId': 'progress-status'
         },
@@ -147,11 +146,11 @@ export default {
         },
         {
           'name': 'type',
-          'type': 'string',
-          'defaultValue': 'line',
+          'type': `'line' | 'circle' | 'dashboard'`,
+          'defaultValue': `'line'`,
           'desc': {
-            'zh-CN': '进度条类型；该属性的可选值为 line / circle / dashboard',
-            'en-US': 'Progress bar type; The value of this attribute can be line, circle, or dashboard'
+            'zh-CN': '进度条类型',
+            'en-US': 'Progress bar type'
           },
           'demoId': 'progress-type-circle'
         },

package/demos/pc/app/qr-code/level-composition-api.vue

@@ -1,5 +1,6 @@
 <template>
   <tiny-qr-code v-bind="params" @change="change"></tiny-qr-code>
+
   <tiny-radio-group v-model="params.level" size="small">
     <tiny-radio-button label="Low">Low</tiny-radio-button>
     <tiny-radio-button label="Medium">Medium</tiny-radio-button>
@@ -9,18 +10,14 @@
 </template>
 
 <script setup>
-import {
-  QrCode as TinyQrCode,
-  Radio as TinyRadio,
-  RadioButton as TinyRadioButton,
-  RadioGroup as TinyRadioGroup
-} from '@opentiny/vue'
+import { QrCode as TinyQrCode, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
+import { reactive } from 'vue'
 
-const params = {
+const params = reactive({
   value: '测试二维码数据',
   size: 250,
   level: 'High'
-}
+})
 
 function change() {
   console.log('qrcode change')

package/demos/pc/app/qr-code/style-composition-api.vue

@@ -8,6 +8,7 @@ import { QrCode as TinyQrCode } from '@opentiny/vue'
 const params = {
   value: '测试二维码数据',
   color: '#1677ff',
+  size: 250,
   style: { background: '#f5f5f5', padding: '24px' }
 }
 </script>

package/demos/pc/app/qr-code/style.vue

@@ -14,6 +14,7 @@ export default {
       params: {
         value: '测试二维码数据',
         color: '#1677ff',
+        size: 250,
         style: { background: '#f5f5f5', padding: '24px' }
       }
     }

package/demos/pc/app/qr-code/webdoc/qr-code.js

@@ -11,25 +11,37 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example' },
+      'desc': {
+        'zh-CN': '通过 <code>value</code> 设置二维码的内容， <code>size</code> 设置二维码的大小。',
+        'en-US': 'Set the content of the QR code<code>value</code> , and <code>type</code> Set the size of the QR code.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'style',
       'name': { 'zh-CN': '自定义样式', 'en-US': 'style' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>style</code> 设置二维码样式。</p>',
+        'en-US': '<p> <code>style</code>, see QR code style</p>'
+      },
       'codeFiles': ['style.vue']
     },
     {
       'demoId': 'icon',
-      'name': { 'zh-CN': '自定义icon', 'en-US': 'icon' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example' },
+      'name': { 'zh-CN': '自定义 icon ', 'en-US': 'icon' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>icon</code> 设置二维码图标。</p>',
+        'en-US': '<p> <code>icon</code>, see QR code icon</p>'
+      },
       'codeFiles': ['icon.vue']
     },
     {
       'demoId': 'level',
       'name': { 'zh-CN': '二维码纠错等级', 'en-US': 'Error Code Level' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>level</code> 设置二维码纠错等级。</p>',
+        'en-US': '<p> <code>level</code> , see QR code error correction level</p>'
+      },
       'codeFiles': ['level.vue']
     }
   ],
@@ -61,7 +73,7 @@ export default {
         {
           'name': 'color',
           'type': 'string',
-          'defaultValue': '#000',
+          'defaultValue': "'#000'",
           'desc': {
             'zh-CN': '二维码颜色, 仅支持十六进制',
             'en-US': 'QRCode Color'
@@ -93,7 +105,7 @@ export default {
           'type': 'number',
           'defaultValue': '50',
           'desc': {
-            'zh-CN': '二维码中图片的大小，icon 覆盖面积不能超过 30%， 否则影响扫码',
+            'zh-CN': '二维码中图片的大小，icon 覆盖面积不能超过二维码面积的 30%， 否则影响扫码',
             'en-US': 'include image size，no more than 30%'
           },
           'demoId': 'icon'
@@ -101,7 +113,7 @@ export default {
         {
           'name': 'level',
           'type': 'string',
-          'defaultValue': 'Medium',
+          'defaultValue': "'Medium'",
           'desc': {
             'zh-CN': "二维码纠错等级, 可选 'Low' | 'Medium' | 'Quality' | 'High'",
             'en-US': 'Error Code Level'
@@ -112,9 +124,9 @@ export default {
       'events': [
         {
           'name': 'change',
-          'type': 'function',
+          'type': '()=> void',
           'desc': {
-            'zh-CN': '二维码变化回调',
+            'zh-CN': '二维码发生变化后的回调',
             'en-US': 'chang callback'
           },
           'demoId': 'level'

package/demos/pc/app/radio/group-options-composition-api.vue

@@ -1,5 +1,8 @@
 <template>
   <tiny-radio-group v-model="value" :options="options"></tiny-radio-group>
+  <div class="mt-20">
+    <tiny-radio-group v-model="value" type="button" :options="burronOptions"></tiny-radio-group>
+  </div>
 </template>
 
 <script setup>
@@ -14,4 +17,14 @@ const options = ref([
   { label: 'A', text: '很好', events: { click: handleClick } },
   { label: 'B', text: '一般' }
 ])
+const burronOptions = ref([
+  { label: 'A', text: '公交', events: { click: handleClick } },
+  { label: 'B', text: '地铁' }
+])
 </script>
+
+<style scoped>
+.mt-20 {
+  margin-top: 20px;
+}
+</style>

package/demos/pc/app/radio/group-options.vue

@@ -1,5 +1,10 @@
 <template>
-  <tiny-radio-group v-model="value" :options="options"></tiny-radio-group>
+  <div>
+    <tiny-radio-group v-model="value" :options="options"></tiny-radio-group>
+    <div class="mt-20">
+      <tiny-radio-group v-model="value" type="button" :options="burronOptions"></tiny-radio-group>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -15,13 +20,26 @@ export default {
       options: [
         { label: 'A', text: '很好', events: { click: this.handleClick } },
         { label: 'B', text: '一般' }
+      ],
+      burronOptions: [
+        { label: 'A', text: '公交', events: { click: this.handleClick } },
+        { label: 'B', text: '地铁' }
       ]
     }
   },
   methods: {
     handleClick() {
-      Modal.message({ message: 'click' })
+      Modal.message({
+        message: 'click',
+        status: 'info'
+      })
     }
   }
 }
 </script>
+
+<style scoped>
+.mt-20 {
+  margin-top: 20px;
+}
+</style>

package/demos/pc/app/radio/webdoc/radio.js

@@ -24,12 +24,12 @@ export default {
     },
     {
       'demoId': 'group-options',
-      'name': { 'zh-CN': '配置式单选组', 'en-US': 'Profile Radio Group' },
+      'name': { 'zh-CN': '单选组', 'en-US': 'Profile Radio Group' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>options</code> 配置式渲染单选组。 <code>options</code> 的类型为 <a href="#IRadioGroupOptions">IRadioGroupOptions[]</a> 。另外还提供 <code>type</code> 属性，配合 <code>options</code> 属性一起使用，默认值为 <code>radio</code> 。可以配置为 <code>button</code> ，配置后单选组将以按钮的形式展示。</p>\n',
+          '<p>通过 <code>options</code> 配置式渲染单选组。另外还提供 <code>type</code> 属性，配合 <code>options</code> 属性一起使用，默认值为 <code>radio</code> 。可以配置为 <code>button</code> ，配置后单选组将以按钮的形式展示。</p>\n',
         'en-US':
-          '<p>Provides the <code>options</code> attribute to render radio groups by configuring object array data. This property eliminates the need to insert a <code>&lt;radio&gt;</code> or <code>&lt;radio-button&gt;</code> tag as a slot in the tag. \n\nThe <code>options</code> object array contains three fields: <code>label</code> , <code>text</code> , and <code>events</code> . \n\n The <code>type</code> attribute is also provided, which is used together with the <code>options</code> attribute. The default value is <code>radio</code> . You can also set this parameter to <code>button</code> . After the configuration, the radio group is displayed as a button. </p>\n'
+          '<p>Rendaer radio groups with <code>options</code> profile. In addition, the <code>type</code> attribute is provided, which is used together with the <code>options</code> attribute. The default value is <code>radio</code>. The option gooup is displayed as a <code>button</code>. </p>\n'
       },
       'codeFiles': ['group-options.vue']
     },

package/demos/pc/app/rate/webdoc/rate.js

@@ -194,7 +194,7 @@ export default {
           'type': '[string, string, string]',
           'defaultValue': "['#FADB14', '#FADB14', '#FADB14']",
           'desc': {
-            'zh-CN': 'icon 的颜色数组，为 Threshold 3 个分段所对应的颜色',
+            'zh-CN': 'icon 的颜色数组，为 Threshold 三个分段所对应的颜色',
             'en-US': 'icon color array, which is the color corresponding to the Threshold three segments.'
           },
           'demoId': 'custom-3-threshold-colors'
@@ -209,12 +209,11 @@ export default {
         {
           'name': 'disabled-void-icon-class',
           'typeAnchorName': 'IRateIconName',
-          'type': "IRateIconName",
+          'type': 'IRateIconName',
           'defaultValue': "'icon-starActive'",
           'desc': {
             'zh-CN': '只读状态下未选中的图标样式名',
-            'en-US':
-              "Icon style name that is not selected in read-only state."
+            'en-US': 'Icon style name that is not selected in read-only state.'
           },
           'demoId': 'disabled-not-selected-class'
         },
@@ -305,11 +304,10 @@ export default {
           'name': 'void-icon-class',
           'type': 'IRateIconName',
           'typeAnchorName': 'IRateIconName',
-          'defaultValue': "'icon-starActive'",
+          'defaultValue': "'icon-starDisable'",
           'desc': {
             'zh-CN': '未选中 icon 的图标样式名',
-            'en-US':
-              "Class name of unselected icons."
+            'en-US': 'Class name of unselected icons.'
           },
           'demoId': 'not-selected-class'
         },
@@ -323,14 +321,14 @@ export default {
         {
           'name': 'size',
           'type': 'string',
-          'defaultValue': '18px',
+          'defaultValue': "'18px'",
           'desc': { 'zh-CN': '图标字体大小', 'en-US': 'Icon font size' },
           'demoId': 'size-and-space'
         },
         {
           'name': 'space',
           'type': 'string',
-          'defaultValue': '24px',
+          'defaultValue': "'24px'",
           'desc': { 'zh-CN': '每个图标所占宽度', 'en-US': 'Width of each icon' },
           'demoId': 'size-and-space'
         },
@@ -368,7 +366,7 @@ export default {
     {
       name: 'IRateIconName',
       type: 'type',
-      code: `type IRateIconName = 'icon-starDisable' | 'icon-frown' | 'icon-meh' | 'icon-smile'`
+      code: `type IRateIconName = 'icon-starDisable' | 'icon-starActive' | 'icon-frown' | 'icon-meh' | 'icon-smile'`
     }
   ]
 }

package/demos/pc/app/search/events-composition-api.vue

@@ -31,19 +31,19 @@ const searchTypes = ref([
 ])
 
 function search(key, value) {
-  Modal.message(`${value}`)
+  Modal.message({ message: `search: ${value}`, status: 'info' })
 }
 
 function change(key, value) {
-  Modal.message(`change: ${value}`)
+  Modal.message({ message: `change: ${value}`, status: 'info' })
 }
 
 function clear() {
-  Modal.message('clear')
+  Modal.message({ message: 'clear', status: 'info' })
 }
 
 function input(key, value) {
-  Modal.message(`input: ${key}, ${JSON.stringify(value)}`)
+  Modal.message({ message: `input: ${key}, ${JSON.stringify(value)}`, status: 'info' })
 }
 
 function select(value) {

package/demos/pc/app/search/events.vue

@@ -38,16 +38,16 @@ export default {
   },
   methods: {
     search(key, value) {
-      Modal.message(`${value}`)
+      Modal.message({ message: `search: ${value}`, status: 'info' })
     },
     change(key, value) {
-      Modal.message(`change: ${value}`)
+      Modal.message({ message: `change: ${value}`, status: 'info' })
     },
     clear() {
-      Modal.message('clear')
+      Modal.message({ message: 'clear', status: 'info' })
     },
     input(key, value) {
-      Modal.message(`input: ${key}, ${JSON.stringify(value)}`)
+      Modal.message({ message: `input: ${key}, ${JSON.stringify(value)}`, status: 'info' })
     },
     select(value) {
       Modal.message({ message: `${value.text}`, status: 'info' })

package/demos/pc/app/search/slot-prefix-composition-api.vue

@@ -5,7 +5,7 @@
         <tiny-icon-search />
       </template>
     </tiny-search>
-    {{ value }}
+    <div class="mt10">{{ value }}</div>
   </div>
 </template>
 

package/demos/pc/app/search/slot-prefix.vue

@@ -5,7 +5,7 @@
         <icon-search />
       </template>
     </tiny-search>
-    {{ value }}
+    <div class="mt10">{{ value }}</div>
   </div>
 </template>
 

package/demos/pc/app/search/webdoc/search.js

@@ -113,7 +113,7 @@ export default {
           'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
-            'zh-CN': '是否在按下键盘Enter键时触发search事件',
+            'zh-CN': '是否在按下键盘 Enter 键时触发 search 事件',
             'en-US': 'Whether to trigger the search event when pressing the Enter key on the keyboard'
           },
           'demoId': 'events'
@@ -123,7 +123,7 @@ export default {
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
-            'zh-CN': '是否为迷你模式，配置为true时，默认显示为一个带图标的圆形按钮，点击后展开',
+            'zh-CN': '是否为迷你模式，配置为 true 时，默认显示为一个带图标的圆形按钮，点击后展开',
             'en-US':
               'Is it mini mode? When configured to true, it will default to a circular button with an icon, which will expand after clicking'
           },

package/demos/pc/app/select/basic-usage-composition-api.vue

@@ -1,22 +1,27 @@
 <template>
   <div>
     <p>选中的值为： {{ value }}</p>
+    <p>场景1：标签式</p>
     <tiny-select v-model="value">
-      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
+      <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :icon="item.icon">
+      </tiny-option>
     </tiny-select>
+    <p>场景1：配置式</p>
+    <tiny-select v-model="value" :options="options"> </tiny-select>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { Select as TinySelect, Option as TinyOption } from '@opentiny/vue'
+import { iconFile } from '@opentiny/vue-icon'
 
 const options = ref([
-  { value: '选项1', label: '黄金糕' },
-  { value: '选项2', label: '双皮奶' },
-  { value: '选项3', label: '蚵仔煎' },
-  { value: '选项4', label: '龙须面' },
-  { value: '选项5', label: '北京烤鸭' }
+  { value: '选项1', label: '黄金糕', icon: iconFile() },
+  { value: '选项2', label: '双皮奶', icon: iconFile() },
+  { value: '选项3', label: '蚵仔煎', icon: iconFile() },
+  { value: '选项4', label: '龙须面', icon: iconFile() },
+  { value: '选项5', label: '北京烤鸭', icon: iconFile() }
 ])
 const value = ref('')
 </script>