@opentiny/vue-docs 3.19.0 → 3.19.2

package/demos/pc/app/grid/operation-column/selection-operation.vue

@@ -26,23 +26,23 @@ export default {
       toolbarButtons: [
         {
           code: 'clearSelection',
-          name: '手动取消多选行'
+          name: '取消多选行'
         },
         {
           code: 'setAllSelection',
-          name: '手动选中所有行'
+          name: '选中所有行'
         },
         {
           code: 'setSelection',
-          name: '手动选中指定行'
+          name: '选中指定行'
         },
         {
           code: 'toggleAllSelection',
-          name: '手动切换所有行选中状态'
+          name: '切换所有行选中状态'
         },
         {
           code: 'toggleRowSelection',
-          name: '手动切换指定行选中状态'
+          name: '切换指定行选中状态'
         }
       ],
       tableData: [

package/demos/pc/app/grid/serial-column/start-index-composition-api.vue

@@ -5,7 +5,7 @@
       seq-serial
       :start-index="200"
       :pager="{
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,

package/demos/pc/app/grid/serial-column/start-index.vue

@@ -5,7 +5,7 @@
       seq-serial
       :start-index="200"
       :pager="{
-        component: Pager,
+        component: TinyPager,
         attrs: {
           currentPage: 1,
           pageSize: 5,

package/demos/pc/app/grid/size/fixed-column-width-composition-api.vue

@@ -1,9 +1,9 @@
 <template>
   <tiny-grid :data="tableData">
     <tiny-grid-column field="name" title="名称" width="150"></tiny-grid-column>
-    <tiny-grid-column field="area" title="所属区域" width="80"></tiny-grid-column>
+    <tiny-grid-column field="area" title="所属区域" width="100"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址" width="20%"></tiny-grid-column>
-    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
   </tiny-grid>
 </template>
 

package/demos/pc/app/grid/size/fixed-column-width.spec.js

@@ -4,5 +4,5 @@ test('列属性设置宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-size#size-fixed-column-width')
   await expect(page.getByRole('cell', { name: '名称' }).first()).toHaveCSS('width', '150px')
-  await expect(page.getByRole('cell', { name: '所属区域' })).toHaveCSS('width', '80px')
+  await expect(page.getByRole('cell', { name: '所属区域' })).toHaveCSS('width', '100px')
 })

package/demos/pc/app/grid/size/fixed-column-width.vue

@@ -1,9 +1,9 @@
 <template>
   <tiny-grid :data="tableData">
     <tiny-grid-column field="name" title="名称" width="150"></tiny-grid-column>
-    <tiny-grid-column field="area" title="所属区域" width="80"></tiny-grid-column>
+    <tiny-grid-column field="area" title="所属区域" width="100"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址" width="20%"></tiny-grid-column>
-    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介"></tiny-grid-column>
   </tiny-grid>
 </template>
 

package/demos/pc/app/grid/webdoc/grid-import-export.js

@@ -20,7 +20,7 @@ export default {
           <p>本示例使用的xlsx版本为0.18.2，导入的excel表格，表头字段需与表格field字段保持一致。</p>
           <p>提示: xlsx 是一个非常强大的前端 EXCEL 文件操作库，支持表格带格式导入导出，可兼容 IE9+ 版本的浏览器。</p>
           <p>详情参考：<a href="https://github.com/SheetJS/sheetjs" target="_blank">https://github.com/SheetJS/sheetjs</a></p>
-          <p>注意：如需体验demo，需要将demo中注释部分代码取消注释，切自行安装相关依赖。</p>
+          <p>注意：如需体验demo，需要将demo中注释部分代码取消注释，且自行安装相关依赖。</p>
         </div>
         `,
         'en-US': 'For details, see the following example.'

package/demos/pc/app/loading/fullscreen.vue

@@ -15,7 +15,7 @@ export default {
     TinyButton
   },
   directives: {
-    TinyLoading: TinyLoading.directive
+    Loading: TinyLoading.directive
   },
   data() {
     return {

package/demos/pc/app/milestone/custom-bottom-top-composition-api.vue

@@ -2,7 +2,7 @@
   <div class="demo-milestone">
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
       <template #top="data">
-        <span class="f18 ml50">{{ data.slotScope.status }}</span>
+        <span class="status f18 ml50 mb8">{{ data.slotScope.status }}</span>
       </template>
       <template #bottom="data">
         <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
@@ -19,7 +19,7 @@ const timeActive1 = ref(1)
 const normalActive = ref(2)
 const advancedActive = ref(2)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',
@@ -55,4 +55,7 @@ const milestoneData = ref([
 .demo-milestone ::v-deep .tiny-milestone__description-status {
   margin-top: 4px;
 }
+.status {
+  display: inline-block;
+}
 </style>

package/demos/pc/app/milestone/custom-bottom-top.vue

@@ -2,7 +2,7 @@
   <div class="demo-milestone">
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
       <template #top="data">
-        <span class="f18 ml50">{{ data.slotScope.status }}</span>
+        <span class="status f18 ml50 mb8">{{ data.slotScope.status }}</span>
       </template>
       <template #bottom="data">
         <span class="f12">{{ data.slotScope.name }} {{ data.slotScope.time }}</span>
@@ -24,7 +24,7 @@ export default {
       normalActive: 2,
       advancedActive: 2,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',
@@ -63,4 +63,7 @@ export default {
 .demo-milestone ::v-deep .tiny-milestone__description-status {
   margin-top: 4px;
 }
+.status {
+  display: inline-block;
+}
 </style>

package/demos/pc/app/milestone/custom-flag-composition-api.vue

@@ -16,7 +16,7 @@ const timeActive1 = ref(1)
 const normalActive = ref(2)
 const advancedActive = ref(2)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',

package/demos/pc/app/milestone/custom-flag.vue

@@ -21,7 +21,7 @@ export default {
       normalActive: 2,
       advancedActive: 2,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',

package/demos/pc/app/milestone/custom-icon-slot-composition-api.vue

@@ -2,7 +2,7 @@
   <div class="demo-milestone">
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
       <template #icon="data">
-        <component :is="data.slotScope.icon" class="custom"> </component>
+        <component :is="data.slotScope.icon" class="custom-milestone"> </component>
       </template>
     </tiny-milestone>
   </div>
@@ -64,7 +64,7 @@ const milestoneData = ref([
 </script>
 
 <style>
-.custom {
+.custom-milestone {
   width: 16px;
   height: 16px;
   line-height: 16px;

package/demos/pc/app/milestone/custom-icon-slot.vue

@@ -2,7 +2,7 @@
   <div class="demo-milestone">
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap">
       <template #icon="data">
-        <component :is="data.slotScope.icon" class="custom"> </component>
+        <component :is="data.slotScope.icon" class="custom-milestone"> </component>
       </template>
     </tiny-milestone>
   </div>
@@ -77,7 +77,7 @@ export default {
 </script>
 
 <style>
-.custom {
+.custom-milestone {
   width: 16px;
   height: 16px;
   line-height: 16px;

package/demos/pc/app/milestone/data-field-mapping-composition-api.vue

@@ -20,7 +20,7 @@ import { ref } from 'vue'
 import { TinyMilestone } from '@opentiny/vue'
 
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',

package/demos/pc/app/milestone/data-field-mapping.vue

@@ -25,7 +25,7 @@ export default {
   data() {
     return {
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',

package/demos/pc/app/milestone/flag-before-composition-api.vue

@@ -13,11 +13,11 @@ import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 const isBefore = ref(false)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
-  doing: '#7ED321',
-  back: '#f5222d',
-  end: '#faad14',
-  cancel: '#d9d9d9'
+  completed: 'var(--tv-color-bg-disabled-control-active)', // 组件库基础变量
+  doing: '#9edb58',
+  back: '#c2c2c2',
+  end: '#edf7df',
+  cancel: '#f23030'
 })
 const milestoneData = ref([
   {

package/demos/pc/app/milestone/flag-before.spec.ts

@@ -12,8 +12,8 @@ test('旗子数据来源', async ({ page }) => {
   const flagAfterContents = [/引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/, /test6/]
   const flagBeforeContents = [/test1已完成/, /引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/]
   const button = page.getByRole('button').filter({ hasText: '设置flag-before值为true' })
-  const flagAfterLineColors = ['rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)', 'rgba(0, 0, 0, 0)']
-  const flagBeforeLineColors = ['rgba(0, 0, 0, 0)', 'rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)']
+  const flagAfterLineColors = ['rgb(194, 194, 194)', 'rgb(194, 194, 194)', 'rgb(158, 219, 88)', 'rgb(179, 214, 255)']
+  const flagBeforeLineColors = ['rgb(179, 214, 255)', 'rgb(194, 194, 194)', 'rgb(194, 194, 194)', 'rgb(158, 219, 88)']
 
   for (let i = 0; i < flagCount; i++) {
     const { x, y, width, height } = await flags.nth(i).boundingBox()

package/demos/pc/app/milestone/flag-before.vue

@@ -19,11 +19,11 @@ export default {
     return {
       isBefore: false,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
-        doing: '#7ED321',
-        back: '#f5222d',
-        end: '#faad14',
-        cancel: '#d9d9d9'
+        completed: 'var(--tv-color-bg-disabled-control-active)', // 组件库基础变量
+        doing: '#9edb58',
+        back: '#c2c2c2',
+        end: '#edf7df',
+        cancel: '#f23030'
       },
       milestoneData: [
         {

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

@@ -17,7 +17,7 @@ const timeActive1 = ref(1)
 const normalActive = ref(2)
 const advancedActive = ref(2)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',

package/demos/pc/app/milestone/milestone-events.vue

@@ -22,7 +22,7 @@ export default {
       normalActive: 2,
       advancedActive: 2,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',

package/demos/pc/app/milestone/show-number-composition-api.vue

@@ -18,7 +18,7 @@ import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 const showNum = ref(true)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',

package/demos/pc/app/milestone/show-number.spec.ts

@@ -23,12 +23,12 @@ test('序号显示', async ({ page }) => {
   const iconStyles = [
     {
       'background-color': 'rgb(255, 255, 255)',
-      'color': 'rgb(0, 0, 0)',
+      'color': 'rgb(179, 214, 255)',
       'box-shadow': 'none'
     },
     {
       'background-color': 'rgb(255, 255, 255)',
-      'color': 'rgb(0, 0, 0)',
+      'color': 'rgb(179, 214, 255)',
       'box-shadow': 'none'
     },
     {

package/demos/pc/app/milestone/show-number.vue

@@ -24,7 +24,7 @@ export default {
     return {
       showNum: true,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',

package/demos/pc/app/milestone/solid-style-composition-api.vue

@@ -11,7 +11,7 @@ import { TinyMilestone, TinyButton } from '@opentiny/vue'
 
 const isSolid = ref(false)
 const statusMap = ref({
-  completed: 'var(--ti-common-color-line-active)',
+  completed: 'var(--tv-color-bg-disabled-control-active)',
   doing: '#7ED321',
   back: '#f5222d',
   end: '#faad14',

package/demos/pc/app/milestone/solid-style.spec.ts

@@ -23,12 +23,12 @@ test('实心显示', async ({ page }) => {
   const iconStyles = [
     {
       'background-color': 'rgb(255, 255, 255)',
-      'color': 'rgb(0, 0, 0)',
+      'color': 'rgb(179, 214, 255)',
       'box-shadow': 'none'
     },
     {
       'background-color': 'rgb(255, 255, 255)',
-      'color': 'rgb(0, 0, 0)',
+      'color': 'rgb(179, 214, 255)',
       'box-shadow': 'none'
     },
     {
@@ -98,6 +98,6 @@ test('实心显示', async ({ page }) => {
   await button.click()
 
   for (let i = 0; i < 2; i++) {
-    await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+    await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(179, 214, 255)')
   }
 })

package/demos/pc/app/milestone/solid-style.vue

@@ -17,7 +17,7 @@ export default {
     return {
       isSolid: false,
       statusMap: {
-        completed: 'var(--ti-common-color-line-active)',
+        completed: 'var(--tv-color-bg-disabled-control-active)',
         doing: '#7ED321',
         back: '#f5222d',
         end: '#faad14',

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

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { TinySticky, TinyButton } from '@opentiny/vue'
+import { TinySticky, TinyButton, TinyModal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     change(isFixed) {
-      Modal.message({
+      TinyModal.message({
         message: `触发 change 事件，当前isFixed为：${isFixed}`,
         status: 'info'
       })

package/demos/pc/app/tabs/custom-more-icon-composition-api.vue

@@ -3,7 +3,7 @@
     <template #moreIcon>
       <tiny-icon-popup />
     </template>
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -14,13 +14,13 @@ import { reactive } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
-const Tabs = reactive([])
+const tabs = reactive([])
 const TinyIconPopup = iconPopup()
 
 // 创建tabs
 for (let i = 1; i < 9; i++) {
   const title = `Tab ${i}`
-  Tabs.push({
+  tabs.push({
     title,
     name: i + '',
     content: `${title} content `

package/demos/pc/app/tabs/custom-more-icon.vue

@@ -3,7 +3,7 @@
     <template #moreIcon>
       <tiny-icon-popup />
     </template>
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -21,14 +21,14 @@ export default {
   },
   data() {
     return {
-      TinyTabs: []
+      tabs: []
     }
   },
   created() {
     // 创建tabs
     for (let i = 1; i < 9; i++) {
       const title = `Tab ${i}`
-      this.TinyTabs.push({
+      this.tabs.push({
         title,
         name: i + '',
         content: `${title} content `

package/demos/pc/app/tabs/more-show-all-composition-api.vue

@@ -3,7 +3,7 @@
     <template #moreIcon>
       <tiny-icon-popup />
     </template>
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -14,13 +14,13 @@ import { reactive } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 import { iconPopup } from '@opentiny/vue-icon'
 
-const Tabs = reactive([])
+const tabs = reactive([])
 const TinyIconPopup = iconPopup()
 
 // 创建tabs
 for (let i = 1; i < 101; i++) {
   const title = `Tab ${i}`
-  Tabs.push({
+  tabs.push({
     title,
     name: i + '',
     content: `${title} content `

package/demos/pc/app/tabs/more-show-all.vue

@@ -3,7 +3,7 @@
     <template #moreIcon>
       <tiny-icon-popup />
     </template>
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -21,14 +21,14 @@ export default {
   },
   data() {
     return {
-      TinyTabs: []
+      tabs: []
     }
   },
   created() {
     // 创建tabs
     for (let i = 1; i < 101; i++) {
       const title = `Tab ${i}`
-      this.TinyTabs.push({
+      this.tabs.push({
         title,
         name: i + '',
         content: `${title} content `

package/demos/pc/app/tabs/size-composition-api.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <tiny-tabs v-model="activeName" size="small">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
     <tiny-tabs v-model="activeName" separator size="small">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
     <tiny-tabs v-model="activeName" tab-style="button-card" size="small">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
   </div>
 </template>
@@ -17,12 +17,12 @@ import { ref, reactive } from 'vue'
 import { TinyTabs, TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('1')
-const Tabs = reactive([])
+const tabs = reactive([])
 
 // 创建tabs
 for (let i = 1; i < 5; i++) {
   const title = `Tab ${i}`
-  Tabs.push({
+  tabs.push({
     title,
     name: i + '',
     content: `${title} content `

package/demos/pc/app/tabs/size.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <tiny-tabs v-model="activeName" size="small">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
     <tiny-tabs v-model="activeName" separator size="small">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
     <tiny-tabs v-model="activeName" tab-style="button-card" size="small">
-      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
+      <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name"> </tiny-tab-item>
     </tiny-tabs>
   </div>
 </template>
@@ -23,14 +23,14 @@ export default {
   data() {
     return {
       activeName: '1',
-      TinyTabs: []
+      tabs: []
     }
   },
   created() {
     // 创建tabs
     for (let i = 1; i < 5; i++) {
       const title = `Tab ${i}`
-      this.TinyTabs.push({
+      this.tabs.push({
         title,
         name: i + '',
         content: `${title} content `

package/demos/pc/app/tabs/tabs-draggable-composition-api.vue

@@ -10,7 +10,7 @@
     @tab-drag-over="handleOver"
     @tab-drag-end="handleEnd"
   >
-    <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+    <tiny-tab-item :key="item.name" v-for="item in tabs" :title="item.title" :name="item.name">
       {{ item.content }}
     </tiny-tab-item>
   </tiny-tabs>
@@ -25,7 +25,7 @@ const tabName = ref('2')
 const dropConfig = ref({
   plugin: Sortable
 })
-const Tabs = ref([
+const tabs = ref([
   {
     title: 'Tab 1',
     name: '1',
@@ -53,16 +53,16 @@ function handleOver(event) {
 
 function handleEnd(event) {
   const { oldDraggableIndex, newDraggableIndex } = event
-  const tab = Tabs.value.splice(oldDraggableIndex, 1)[0]
-  Tabs.value.splice(newDraggableIndex, 0, tab)
+  const tab = tabs.value.splice(oldDraggableIndex, 1)[0]
+  tabs.value.splice(newDraggableIndex, 0, tab)
 
-  console.log(Tabs.value)
+  console.log(tabs.value)
 }
 
 function handleAdd() {
-  Tabs.value.push({
-    title: 'Tab ' + String(Tabs.value.length + 1),
-    name: String(Tabs.value.length + 1),
+  tabs.value.push({
+    title: 'Tab ' + String(tabs.value.length + 1),
+    name: String(tabs.value.length + 1),
     content: '动态增加tabitem'
   })
 }