@opentiny/vue-docs 2.1.8 → 2.1.10

package/demos/pc/app/slider/slider-event-composition-api.vue

@@ -0,0 +1,34 @@
+<template>
+  <tiny-slider v-model="value2" @change="change" @start="start" @stop="stop"></tiny-slider>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Slider as TinySlider, Notify } from '@opentiny/vue'
+
+const value2 = ref(40)
+
+function start(val) {
+  Notify({
+    title: '触发开始滑动事件',
+    message: `${JSON.stringify(val)}`,
+    offset: 100
+  })
+}
+
+function change(val) {
+  Notify({
+    title: '触发change事件',
+    message: `改变值为${val}`,
+    offset: 100
+  })
+}
+
+function stop(val) {
+  Notify({
+    title: '触发停止滑动事件',
+    message: `停止后值为${val}`,
+    offset: 150
+  })
+}
+</script>

package/demos/pc/app/slider/slider-event.spec.ts

@@ -0,0 +1,57 @@
+import { test, expect } from '@playwright/test'
+
+test('start 滑块开始滑动事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('slider#slider-event-start')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderBlock = slider.locator('div').nth(1)
+  // 获取进度条的宽度
+  const { width: sliderWidth } = await slider.boundingBox()
+  const { x, y } = await sliderBlock.boundingBox()
+
+  await sliderBlock.hover()
+  await page.mouse.down()
+  await page.mouse.move(sliderWidth * 0.4 + x, y)
+  await page.mouse.up()
+  //   弹出框事件
+  await expect(page.locator('div').filter({ hasText: '触发开始滑动事件{"isTrusted":false}' }).first()).toBeVisible()
+  await page.waitForTimeout(2000)
+})
+
+
+test('change事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('slider#slider-event-change')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderBlock = slider.locator('div').nth(1)
+  // 获取进度条的宽度
+  const { width: sliderWidth } = await slider.boundingBox()
+  // 获取当前滑块位置
+  const { x, y } = await sliderBlock.boundingBox()
+  await sliderBlock.hover()
+  await page.mouse.down()
+  // 滑块向右移动百分之二十
+  await page.mouse.move(sliderWidth * 0.2 + x, y)
+  await expect(page.locator('div').filter({ hasText: '触发change事件改变值为59' }).first()).toBeVisible()
+  await page.waitForTimeout(300)
+})
+
+test('stop 滑块停止滑动事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('slider#slider-event-stop')
+  const preview = page.locator('#preview')
+  const slider = preview.locator('.tiny-slider__wrapper > .tiny-slider')
+  const sliderBlock = slider.locator('div').nth(1)
+  // 获取进度条的宽度
+  const { width: sliderWidth } = await slider.boundingBox()
+  const { x, y } = await sliderBlock.boundingBox()
+
+  await sliderBlock.hover()
+  await page.mouse.down()
+  await page.mouse.move(sliderWidth * 0.4 + x, y)
+  await page.mouse.up()
+  //   弹出框事件
+  await expect(page.locator('div').filter({ hasText: '触发停止滑动事件停止后值为79' }).first()).toBeVisible()
+})

package/demos/pc/app/slider/slider-event.vue

@@ -0,0 +1,41 @@
+<template>
+  <tiny-slider v-model="value2" @change="change" @start="start" @stop="stop"></tiny-slider>
+</template>
+
+<script>
+import { Slider, Notify } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySlider: Slider
+  },
+  data() {
+    return {
+      value2: 40
+    }
+  },
+  methods: {
+    start(val) {
+      Notify({
+        title: '触发开始滑动事件',
+        message: `${JSON.stringify(val)}`,
+        offset: 100
+      })
+    },
+    change(val) {
+      Notify({
+        title: '触发change事件',
+        message: `改变值为${val}`,
+        offset: 100
+      })
+    },
+    stop(val) {
+      Notify({
+        title: '触发停止滑动事件',
+        message: `停止后值为${val}`,
+        offset: 150
+      })
+    }
+  }
+}
+</script>

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

@@ -5,7 +5,7 @@ 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': '', 'en-US': '' },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -13,7 +13,7 @@ export default {
       'name': { 'zh-CN': '竖向模式', 'en-US': 'vertical mode' },
       'desc': {
         'zh-CN':
-          '<p>通过设置<code>vertical</code> 属性来展示滑块竖向模式（不设置，默认为横向模式）\n竖向模式可以通过 <code>height</code> 设置组件高度</p>\n',
+          '<p>通过设置<code>vertical</code> 属性来展示滑块竖向模式（不设置，默认为横向模式）\n竖向模式可以通过 <code>height</code> 设置组件高度。</p>\n',
         'en-US':
           '<p>The vertical mode of the slider is displayed by setting the <code>vertical</code> attribute. landscape mode by default)\nIn vertical mode, you can set the height of the component by calling <code>height</code>\n'
       },
@@ -23,8 +23,8 @@ export default {
       'demoId': 'max-min',
       'name': { 'zh-CN': '最大最小值', 'en-US': 'Maximum/Minimum' },
       'desc': {
-        'zh-CN': '<p>通过设置<code>min</code> <code>max</code> 来设置滑块取值范围</p>\n',
-        'en-US': '<p>Set <code>min</code> <code>max</code> to set the value range of the slider.</p>\n'
+        'zh-CN': '<p>通过设置<code>min</code> <code>max</code> 来设置滑块取值范围。</p>',
+        'en-US': '<p>Set <code>min</code> <code>max</code> to set the value range of the slider.</p>'
       },
       'codeFiles': ['max-min.vue']
     },
@@ -32,7 +32,7 @@ export default {
       'demoId': 'format-tooltip',
       'name': { 'zh-CN': '提示当前值', 'en-US': 'Prompt current value' },
       'desc': {
-        'zh-CN': '<p>通过设置<code>format-tooltip</code> 来格式化提示值</p>\n',
+        'zh-CN': '<p>通过设置<code>format-tooltip</code> 来格式化提示值。</p>',
         'en-US': '<p>Set <code>format-tooltip</code> to set the format the prompt value</p>\n'
       },
       'codeFiles': ['format-tooltip.vue']
@@ -41,8 +41,8 @@ export default {
       'demoId': 'range-select',
       'name': { 'zh-CN': '范围选择', 'en-US': 'Range Selection' },
       'desc': {
-        'zh-CN': '<p>通过<code>v-model</code> 为数组 设定初始范围选择</p>\n',
-        'en-US': '<p>Set the initial range selection for the array through <code>v-model</code></p>\n'
+        'zh-CN': '<p>通过<code>v-model</code> 为数组 设定初始范围选择。</p>',
+        'en-US': '<p>Set the initial range selection for the array through <code>v-model</code></p>'
       },
       'codeFiles': ['range-select.vue']
     },
@@ -50,8 +50,8 @@ export default {
       'demoId': 'show-iput',
       'name': { 'zh-CN': '输入框模式', 'en-US': 'Text box mode' },
       'desc': {
-        'zh-CN': '<p>通过配置<code>show-input</code>，开启滑块输入框模式</p>\n',
-        'en-US': '<p>Enable the slider text box mode by configuring <code>show-input</code></p>\n'
+        'zh-CN': '<p>通过配置<code>show-input</code>，开启滑块输入框模式。</p>',
+        'en-US': '<p>Enable the slider text box mode by configuring <code>show-input</code>。</p>'
       },
       'codeFiles': ['show-iput.vue']
     },
@@ -59,9 +59,9 @@ export default {
       'demoId': 'shortcut-operation',
       'name': { 'zh-CN': '快捷键操作', 'en-US': 'Shortcut Key Operations' },
       'desc': {
-        'zh-CN': '<p>通过设置<code>num-pages</code>总步数，即按快捷键 PageDown/PageUp 时，每次移动的距离是"⌈(max-min)/num-pages⌉"</p>',
+        'zh-CN': '<p>通过设置<code>num-pages</code>总步数，即按快捷键 PageDown/PageUp 时，每次移动的距离是 "⌈(max-min)/num-pages⌉"。</p>',
         'en-US':
-          '<p>Set <code>num-pages</code>the total number of steps. That is, when you press the shortcut key PageDown or PageUp, the moving distance is "⌈(max-min)/num-pages⌉"</p>\n'
+          '<p>Set <code>num-pages</code>the total number of steps. That is, when you press the shortcut key PageDown or PageUp, the moving distance is "⌈(max-min)/num-pages⌉"。</p>'
       },
       'codeFiles': ['shortcut-operation.vue']
     },
@@ -69,8 +69,8 @@ export default {
       'demoId': 'dynamic-disable',
       'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
       'desc': {
-        'zh-CN': '<p>通过设置属性<code>disabled</code> ,设置滑动滑块禁止滑动</p>\n',
-        'en-US': '<p>Set the attribute <code>disabled</code> to disable the sliding slider</p>\n'
+        'zh-CN': '<p>通过设置属性<code>disabled</code> ,设置滑动滑块禁止滑动。</p>',
+        'en-US': '<p>Set the attribute <code>disabled</code> to disable the sliding slider。</p>'
       },
       'codeFiles': ['dynamic-disable.vue']
     },
@@ -78,9 +78,9 @@ export default {
       'demoId': 'show-tip',
       'name': { 'zh-CN': '提示', 'en-US': 'Prompt' },
       'desc': {
-        'zh-CN': '<p>通过设定<code>:show-tip=&quot;false&quot;</code>，关闭滑块提示。(默认开启)</p>\n',
+        'zh-CN': '<p>通过设定<code>:show-tip=&quot;false&quot;</code>，关闭滑块提示。(默认开启)。</p>',
         'en-US':
-          '<p>Disable the slider prompt by setting <code>:show-tip=&quot;false&quot;</code> . (enabled by default)</p>\n'
+          '<p>Disable the slider prompt by setting <code>:show-tip=&quot;false&quot;</code> . (enabled by default)。</p>'
       },
       'codeFiles': ['show-tip.vue']
     },
@@ -88,35 +88,23 @@ export default {
       'demoId': 'about-step',
       'name': { 'zh-CN': '步长', 'en-US': 'Step' },
       'desc': {
-        'zh-CN': '<p>通过设置<code>step</code>来配置滑块滑动的步长</p>\n',
-        'en-US': '<p>Set <code>step</code> to configure the slider sliding step</p>\n'
+        'zh-CN': '<p>通过设置<code>step</code>来配置滑块滑动的步长。</p>',
+        'en-US': '<p>Set <code>step</code> to configure the slider sliding step。</p>'
       },
       'codeFiles': ['about-step.vue']
     },
-    {
-      'demoId': 'slider-event-change',
-      'name': { 'zh-CN': 'change 事件', 'en-US': 'change event' },
-      'desc': { 'zh-CN': '<p>change 事件</p>\n', 'en-US': '<p>change event</p>\n' },
-      'codeFiles': ['slider-event-change.vue']
-    },
-    {
-      'demoId': 'slider-event-start',
-      'name': { 'zh-CN': 'start 滑块开始滑动事件', 'en-US': 'start Slider sliding start event' },
-      'desc': { 'zh-CN': '<p>start 滑块开始滑动事件</p>\n', 'en-US': '<p>start Slider Start Event</p>\n' },
-      'codeFiles': ['slider-event-start.vue']
-    },
-    {
-      'demoId': 'slider-event-stop',
-      'name': { 'zh-CN': 'stop 滑块停止滑动事件', 'en-US': 'stop slider sliding stop event' },
-      'desc': { 'zh-CN': '<p>stop 滑块停止滑动事件</p>\n', 'en-US': '<p>stop slider sliding stop event</p>\n' },
-      'codeFiles': ['slider-event-stop.vue']
-    },
     {
       'demoId': 'slider-slot',
       'name': { 'zh-CN': '自定义插槽', 'en-US': 'Custom Slot' },
-      'desc': { 'zh-CN': '显示滑块值的插槽', 'en-US': 'A slot for displaying details' },
+      'desc': { 'zh-CN': '显示滑块值的插槽。', 'en-US': 'A slot for displaying details。' },
       'codeFiles': ['slider-slot.vue']
-    }
+    },
+    {
+      'demoId': 'slider-event',
+      'name': { 'zh-CN': '事件', 'en-US': 'Event' },
+      'desc': { 'zh-CN': '<p>change、start、stop 事件。</p>', 'en-US': '<p>change, start, stop events.</p>' },
+      'codeFiles': ['slider-event.vue']
+    },
   ],
   apis: [
     {
@@ -148,9 +136,9 @@ export default {
           'type': 'number',
           'defaultValue': '100',
           'desc': {
-            'zh-CN': '设置最大值，必需是整数，可以负数。必需大于所设置的最小值。',
+            'zh-CN': '设置最大值，必需是整数，可以负数，必需大于所设置的最小值',
             'en-US':
-              'Set the maximum value. The value must be an integer and can be a negative number. The value must be greater than the minimum value set.'
+              'Set the maximum value. The value must be an integer and can be a negative number. The value must be greater than the minimum value set'
           },
           'demoId': 'max-min'
         },
@@ -191,7 +179,7 @@ export default {
         {
           'name': 'height',
           'type': 'string',
-          'defaultValue': '300px',
+          'defaultValue': `'300px'`,
           'desc': { 'zh-CN': 'Slider组件的高度，当vertical为true时有效', 'en-US': 'Height of Slider component, effective when vertical is true' },
           'demoId': 'vertical-mode'
         },
@@ -201,7 +189,7 @@ export default {
           'defaultValue': '1',
           'desc': {
             'zh-CN':
-              '设置总步数，即按快捷键 PageDown/PageUp 时，每次移动的距离是"⌈(max-min)/num-pages⌉"',
+              '设置总步数，即按快捷键 PageDown/PageUp 时，每次移动的距离是 "⌈(max-min)/num-pages⌉"',
             'en-US':
               'Set the total number of steps. That is, when you press PageDown or PageUp, the moving distance is "⌈(max-min)/num-pages⌉".'
           },
@@ -226,7 +214,7 @@ export default {
             'en-US':
               'Triggered when the value changes (When you drag the mouse, it is triggered only after you release the mouse).'
           },
-          'demoId': 'slider-event-change'
+          'demoId': 'slider-event'
         },
         {
           'name': 'start',
@@ -238,7 +226,7 @@ export default {
             'en-US':
               'This event is triggered when the slider starts to slide.'
           },
-          'demoId': 'slider-event-start'
+          'demoId': 'slider-event'
         },
         {
           'name': 'Stop',
@@ -250,7 +238,7 @@ export default {
             'en-US':
               'This event is triggered when the slider sliding ends. '
           },
-          'demoId': 'slider-event-stop'
+          'demoId': 'slider-event'
         }
       ],
       'slots': [

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

@@ -25,9 +25,9 @@ export default {
       'name': { 'zh-CN': '自定义开关显示', 'en-US': 'Customized switch display' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>show-text</code> 配置是否显示开关文本，默认文本为 <code>ON</code> 和 <code>OFF</code> 。开启配置后，可以使用具名插槽 <code>open</code> 和 <code>close</code> 自定义开关内容。</p>',
+          '<p>通过 <code>show-text</code> 配置是否显示开关文本，开启配置后，可以使用具名插槽 <code>open</code> 和 <code>close</code> 自定义开关内容。</p>',
         'en-US':
-          '<p>Configure whether to display switch text through <code>show text</code> . The default text is <code>ON</code> and <code>OFF</code> . After enabling the configuration, you can customize the switch content using named slots <code>open</code> and <code>close</code> .</p>'
+          '<p>Configure whether to display switch text through <code>show text</code> . After enabling the configuration, you can customize the switch content using named slots <code>open</code> and <code>close</code> .</p>'
       },
       'codeFiles': ['custom-open-close.vue']
     },
@@ -42,15 +42,6 @@ export default {
       },
       'codeFiles': ['before-change.vue']
     },
-    {
-      'demoId': 'event-change',
-      'name': { 'zh-CN': '变更事件', 'en-US': 'Event change' },
-      'desc': {
-        'zh-CN': '<p>当开关值变化后，会触发 <code>change</code> 事件。</p>',
-        'en-US': '<p>When the switch value changes, the <code>change</code> event will be triggered.</p>'
-      },
-      'codeFiles': ['event-change.vue']
-    },
     {
       'demoId': 'custom-true-false-value',
       'name': { 'zh-CN': '自定义开关取值', 'en-US': 'User-defined switch value' },
@@ -69,6 +60,15 @@ export default {
         'en-US': '<p>Set the switch disable status through <code>disabled</code> . </p>'
       },
       'codeFiles': ['dynamic-disable.vue']
+    },
+    {
+      'demoId': 'event-change',
+      'name': { 'zh-CN': '变更事件', 'en-US': 'Event change' },
+      'desc': {
+        'zh-CN': '<p>当开关值变化后，会触发 <code>change</code> 事件。</p>',
+        'en-US': '<p>When the switch value changes, the <code>change</code> event will be triggered.</p>'
+      },
+      'codeFiles': ['event-change.vue']
     }
   ],
   apis: [
@@ -79,10 +79,10 @@ export default {
         {
           'name': 'before-change',
           'type': '(done: () => void) => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '开关值变化前置处理，详见demo',
-            'en-US': 'Pre processing of switch value changes, See demo for details'
+            'zh-CN': '开关值变化前置处理',
+            'en-US': 'Pre processing of switch value changes'
           },
           'demoId': 'before-change'
         },
@@ -119,7 +119,7 @@ export default {
         {
           'name': 'modelValue / v-model',
           'type': 'boolean | string | number',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '开关绑定值',
             'en-US': 'Switch bind value'
@@ -151,9 +151,9 @@ export default {
         {
           'name': 'change',
           'type': '(value: boolean | string | number) => void',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': 'switch发生变化的回调函数',
+            'zh-CN': 'switch 发生变化的回调函数',
             'en-US': 'Callback function for switch changes'
           },
           'demoId': 'event-change'
@@ -163,9 +163,9 @@ export default {
         {
           'name': 'close',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '关闭内容',
+            'zh-CN': '关闭内容，当 show-text 为 true 时有效',
             'en-US': 'Close Content'
           },
           'demoId': 'custom-open-close'
@@ -173,9 +173,9 @@ export default {
         {
           'name': 'open',
           'type': '',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '开启内容',
+            'zh-CN': '开启内容，当 show-text 为 true 时有效',
             'en-US': 'Enable Content'
           },
           'demoId': 'custom-open-close'

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

@@ -15,3 +15,9 @@ import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
 
 const activeName = ref('second')
 </script>
+
+<style>
+.pc-demo .tiny-tabs__content {
+  line-height: 1.5;
+}
+</style>

package/demos/pc/app/tabs/basic-usage.vue

@@ -24,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style>
+.pc-demo .tiny-tabs__content {
+  line-height: 1.5;
+}
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <tiny-tabs v-model="activeName1" separator :with-close="true">
+      <tiny-tab-item title="表单组件" name="first">
+        表单组件,具有与用户交互，并可完成数据采集功能的控件。
+      </tiny-tab-item>
+      <tiny-tab-item title="数据组件" name="second">
+        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      </tiny-tab-item>
+      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    </tiny-tabs>
+    <br /><br /><br /><br />
+    <tiny-tabs v-model="activeName2" separator>
+      <tiny-tab-item title="表单组件" name="first">
+        表单组件,具有与用户交互，并可完成数据采集功能的控件。
+      </tiny-tab-item>
+      <tiny-tab-item title="数据组件" name="second">
+        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      </tiny-tab-item>
+      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    </tiny-tabs>
+    <br /><br /><br /><br />
+    <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px" show-more-tabs>
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+        {{ item.content }}
+      </tiny-tab-item>
+    </tiny-tabs>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref, reactive } from 'vue'
+import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+
+const activeName1 = ref('first')
+const activeName2 = ref('second')
+const tabIndex = ref(2)
+const Tabs = reactive([
+  {
+    title: 'Tab 1',
+    name: '1',
+    content: 'Tab content '
+  },
+  {
+    title: 'Tab 2',
+    name: '2',
+    content: 'Tab 2 content'
+  }
+])
+
+const handleadd = () => {
+  Tabs.push({
+    title: 'Tab ++',
+    name: ++tabIndex.value + '',
+    content: '动态增加tabitem'
+  })
+}
+</script>

package/demos/pc/app/tabs/tabs-separator.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('分隔符', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tabs#tabs-separator')
+
+  const tabs1 = page.locator('.tiny-tabs')
+  const content1 = tabs1.locator('.aui-tabs__item-separator')
+
+  await expect(content1.first()).toHaveCSS('width', '1px')
+  await expect(content1.first()).toHaveCSS('height', '12px')
+})

package/demos/pc/app/tabs/tabs-separator.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <tiny-tabs v-model="activeName1" separator :with-close="true">
+      <tiny-tab-item title="表单组件" name="first">
+        表单组件,具有与用户交互，并可完成数据采集功能的控件。
+      </tiny-tab-item>
+      <tiny-tab-item title="数据组件" name="second">
+        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      </tiny-tab-item>
+      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    </tiny-tabs>
+    <br /><br /><br /><br />
+    <tiny-tabs v-model="activeName2" separator>
+      <tiny-tab-item title="表单组件" name="first">
+        表单组件,具有与用户交互，并可完成数据采集功能的控件。
+      </tiny-tab-item>
+      <tiny-tab-item title="数据组件" name="second">
+        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      </tiny-tab-item>
+      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    </tiny-tabs>
+    <br /><br /><br /><br />
+    <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px" show-more-tabs>
+      <tiny-tab-item :key="item.name" v-for="item in Tabs" :title="item.title" :name="item.name">
+        {{ item.content }}
+      </tiny-tab-item>
+    </tiny-tabs>
+  </div>
+</template>
+
+<script>
+import { Tabs, TabItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem
+  },
+  data() {
+    return {
+      activeName1: 'first',
+      activeName2: 'second',
+      Tabs: [
+        {
+          title: 'Tab 1',
+          name: '1',
+          content: 'Tab content '
+        },
+        {
+          title: 'Tab 2',
+          name: '2',
+          content: 'Tab 2 content'
+        }
+      ],
+      tabIndex: 2
+    }
+  },
+  methods: {
+    handleadd() {
+      this.Tabs.push({
+        title: 'Tab ++',
+        name: ++this.tabIndex + '',
+        content: '动态增加tabitem'
+      })
+    }
+  }
+}
+</script>