@opentiny/vue-docs 2.2.17 → 2.2.19

package/demos/pc/app/steps/line-horizontal-composition-api.vue

@@ -21,6 +21,6 @@ const data = reactive([
 
 const handleClick = (index, node) => {
   active.value = index
-  Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+  Modal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
 }
 </script>

package/demos/pc/app/steps/line-horizontal.vue

@@ -29,7 +29,7 @@ export default {
     advancedClick(index, node) {
       this.advancedActive = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      Modal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
     }
   }
 }

package/demos/pc/app/steps/line-vertical-composition-api.vue

@@ -26,6 +26,6 @@ const data = reactive([
 const advancedClick = (index, node) => {
   active.value = index
 
-  Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+  Modal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
 }
 </script>

package/demos/pc/app/steps/line-vertical.vue

@@ -33,7 +33,7 @@ export default {
     advancedClick(index, node) {
       this.active = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      Modal.message({ message: `节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`, status: 'info' })
     }
   }
 }

package/demos/pc/app/tabs/overflow-title-composition-api.vue

@@ -0,0 +1,19 @@
+<template>
+  <tiny-tabs v-model="activeName" overflow-title title-width="100px">
+    <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>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
+
+const activeName = ref('second')
+</script>

package/demos/pc/app/tabs/overflow-title.vue

@@ -0,0 +1,28 @@
+<template>
+  <tiny-tabs v-model="activeName" overflow-title title-width="100px">
+    <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>
+</template>
+
+<script>
+import { Tabs, TabItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTabs: Tabs,
+    TinyTabItem: TabItem
+  },
+  data() {
+    return {
+      activeName: 'second'
+    }
+  }
+}
+</script>

package/demos/pc/app/tabs/tabs-events-close-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" @close="close">
+  <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" :before-close="beforeClose" @close="close">
     <tiny-tab-item
       :key="item.name"
       v-for="item in Tabs"
@@ -48,6 +48,10 @@ const Tabs = ref([
 const instance = getCurrentInstance()
 const { $message } = instance.appContext.config.globalProperties
 
+function beforeClose(name) {
+  // 只能关闭标签页“其他组件”
+  return name === 'fifth'
+}
 function close(name) {
   $message({
     title: 'close 事件',

package/demos/pc/app/tabs/tabs-events-close.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" @close="close">
+  <tiny-tabs v-model="activeName" tab-style="card" :with-close="true" :before-close="beforeClose" @close="close">
     <tiny-tab-item
       :key="item.name"
       v-for="item in Tabs"
@@ -54,6 +54,10 @@ export default {
     }
   },
   methods: {
+    beforeClose(name) {
+      // 只能关闭标签页“其他组件”
+      return name === 'fifth'
+    },
     close(name) {
       this.$message({
         title: 'close 事件',

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

@@ -90,10 +90,10 @@ export default {
         'en-US': 'Delete'
       },
       desc: {
-        'zh-CN':
-          '通过 <code>with-close</code> 打开关闭按钮，并监听 <code>close</code> 事件自定义实现删除页签项的逻辑。',
-        'en-US':
-          'Open the close button through <code>with-close</code> and listen to the <code>close</code> event to customize the logic of deleting tag items.'
+        'zh-CN': `通过 <code>with-close</code> 打开关闭按钮，并监听 <code>close</code> 事件自定义实现删除页签项的逻辑。
+          通过 <code>beforeClose</code> 函数属性，在关闭前回调该函数，其类型声明为：<code>(name: string)=> boolean | Promise&lt;boolean&gt;</code>`,
+        'en-US': `Use <code>with-close</code> to enable the close button and listen to the <code>close</code> event to customize the logic for deleting tab items.
+          The <code>beforeClose</code> function attribute is used to call back the function before the function is closed. The type of the function is declared as <code>(name: string)=> boolean | Promise<boolean></code>.`
       },
       codeFiles: ['tabs-events-close.vue']
     },
@@ -240,6 +240,20 @@ export default {
           'By setting <code>edit</code> to display both <code>delete</code> and <code>add</code> buttons, <code>edit</code> listens for click events of these two types of buttons.'
       },
       codeFiles: ['tabs-events-edit.vue']
+    },
+    {
+      demoId: 'overflow-title',
+      name: {
+        'zh-CN': '标题超出显示 tooltip',
+        'en-US': 'The title exceeds the displayed tooltip.'
+      },
+      desc: {
+        'zh-CN':
+          '设置<code>overflow-title</code>属性可让标题超出一定长度（默认 256px）时隐藏并显示...，鼠标移到标题上可显示 tooltip，<code>title-width</code>属性可设置标题超出的长度。',
+        'en-US':
+          'Set the <code>overflow-title</code> attribute to hide and display the title when the title exceeds a certain length (256px by default). Move the cursor to the title to display the tooltip. Set the <code>title-width</code> attribute to set the length of the title.'
+      },
+      codeFiles: ['overflow-title.vue']
     }
   ]
 }

package/demos/pc/app/tag/delete.spec.ts

@@ -9,11 +9,11 @@ test('是否能阻止删除或正常删除标签', async ({ page }) => {
   const modal = page.locator('.tiny-modal__box').getByText('消息提示确认删除？确认取消')
 
   await close.click()
-  await modal.waitFor({ state: 'attached', timeout: 100 })
+  await modal.isVisible()
   await page.getByRole('button', { name: '取消' }).click()
   await first.isVisible()
   await close.click()
-  await modal.waitFor({ state: 'attached', timeout: 100 })
-  await page.getByRole('button', { name: '确认' }).click()
+  await modal.isVisible()
+  await page.getByRole('button', { name: '确定' }).click()
   await expect(first).not.toBeVisible()
 })

package/demos/pc/app/time-line/shape-composition-api.vue

@@ -3,7 +3,7 @@
     <tiny-button type="primary" @click="changeShape">
       点击切换 shape 为 {{ shape === 'dot' ? 'circle' : 'dot' }}
     </tiny-button>
-    <tiny-time-line vertical :data="data" :shape="shape"></tiny-time-line>
+    <tiny-time-line vertical :data="data" :shape="shape" :active="active" @click="onClick"></tiny-time-line>
   </div>
 </template>
 
@@ -17,12 +17,15 @@ const data = reactive([
   { name: '已签收', time: '2019-11-13 20:45:50' },
   { name: '已评价', time: '2019-11-14 20:45:50' }
 ])
-
+const active = ref(1)
 const shape = ref('dot')
 
 const changeShape = () => {
   shape.value = shape.value === 'dot' ? 'circle' : 'dot'
 }
+const onClick = (index: number) => {
+  active.value = index
+}
 </script>
 
 <style>

package/demos/pc/app/time-line/shape.spec.ts

@@ -7,6 +7,8 @@ test('圆点外观', async ({ page }) => {
   const timeline = page.locator('#shape .tiny-steps-timeline')
   await expect(timeline.locator('.dot').first()).toBeVisible()
   await expect(timeline.locator('.tiny-timeline-item__content .time').first()).toBeVisible()
+  await timeline.getByText('已签收').click()
+  await expect(timeline.locator('.tiny-timeline-item').nth(2)).toHaveClass(/process-current/)
 
   await page.getByRole('button', { name: '点击切换 shape 为 circle' }).click()
   await expect(timeline.locator('.dot').first()).not.toBeVisible()

package/demos/pc/app/time-line/shape.vue

@@ -3,7 +3,7 @@
     <tiny-button type="primary" @click="changeShape">
       点击切换 shape 为 {{ shape === 'dot' ? 'circle' : 'dot' }}
     </tiny-button>
-    <tiny-time-line vertical :data="data" :shape="shape"></tiny-time-line>
+    <tiny-time-line vertical :data="data" :shape="shape" :active="active" @click="onClick"></tiny-time-line>
   </div>
 </template>
 
@@ -23,12 +23,16 @@ export default {
         { name: '已签收', time: '2019-11-13 20:45:50' },
         { name: '已评价', time: '2019-11-14 20:45:50' }
       ],
+      active: 1,
       shape: 'dot'
     }
   },
   methods: {
     changeShape() {
       this.shape = this.shape === 'dot' ? 'circle' : 'dot'
+    },
+    onClick(index: number) {
+      this.active = index
     }
   }
 }

package/demos/pc/app/time-line/show-divider-composition-api.vue

@@ -13,6 +13,6 @@ const data = reactive([{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'In
 const normalClick = (index, node) => {
   normalActive.value = index
 
-  Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+  Modal.message({ message: `节点 index: ${index}; 节点信息: ${JSON.stringify(node)}`, status: 'info' })
 }
 </script>

package/demos/pc/app/time-line/show-divider.vue

@@ -20,7 +20,7 @@ export default {
     normalClick(index, node) {
       this.normalActive = index
 
-      Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
+      Modal.message({ message: `节点 index: ${index}; 节点信息: ${JSON.stringify(node)}`, status: 'info' })
     }
   }
 }

package/demos/pc/app/time-picker/disabled.spec.ts

@@ -12,7 +12,15 @@ test('测试禁用状态', async ({ page }) => {
   // 部分禁用
   const timePicker = page.getByRole('textbox', { name: '18:40:00' }).nth(1)
   await page.getByRole('textbox', { name: '18:40:00' }).nth(1).click()
-  await page.locator('div:nth-child(9) > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(18) > span').first().click()
+  await page.waitForTimeout(100)
+  await page
+    .locator(
+      'div:nth-child(8) > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(18)'
+    )
+    .first()
+    .click()
+  await page.waitForTimeout(100)
   await page.getByRole('button', { name: '确定' }).click()
+  await page.waitForTimeout(100)
   await expect(timePicker).toBeVisible()
 })

package/demos/pc/app/time-picker/event.spec.ts

@@ -15,6 +15,5 @@ test('事件', async ({ page }) => {
   await confirmBtn.click()
   await expect(modal.filter({ hasText: 'blur事件' })).toBeVisible()
   await focusBtn.click()
-  // TINY-TODO: focus 方法不生效，picker 组件 renderless 中的 focus 方法存在问题
-  // await expect(timeSelect).toBeVisible()
+  await expect(timeSelect).toBeVisible()
 })

package/demos/pc/app/time-picker/format.spec.ts

@@ -32,10 +32,17 @@ test('时间格式化', async ({ page }) => {
   await expect(page.getByRole('textbox', { name: '19:30:00' })).toBeVisible()
 
   // picker-options.format: 下拉框中显示的格式
-  const timePickerHour = page.locator('.of-hidden > div:nth-child(14) .tiny-scrollbar').nth(0)
-  const timePickerMinute = page.locator('.of-hidden > div:nth-child(14) .tiny-scrollbar').nth(1)
-  const timePickerSecond = page.locator('.of-hidden > div:nth-child(14) .tiny-scrollbar').nth(2)
+  const timePickerHour = page
+    .locator(
+      'div:nth-child(13) > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(19)'
+    )
+    .first()
+  const timePickerMinute = page.locator(
+    'div:nth-child(13) > .tiny-time-panel__content > .tiny-time-spinner > div:nth-child(2) > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(41)'
+  )
+  const timePickerSecond = page.locator('.of-hidden > div:nth-child(12) .tiny-scrollbar').nth(2)
   await page.getByRole('textbox', { name: '18:40:00' }).click()
+  await page.waitForTimeout(200)
   await expect(timePickerHour).toBeVisible()
   await expect(timePickerMinute).toBeVisible()
   await expect(timePickerSecond).not.toBeVisible()

package/demos/pc/app/time-picker/step.spec.ts

@@ -5,7 +5,10 @@ test('步长', async ({ page }) => {
   await page.goto('time-picker#step')
 
   await page.getByRole('textbox', { name: '18:40:00' }).click()
-  await page.locator('div:nth-child(9) > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(11) > span').first().click()
+  await page.waitForTimeout(100)
+  await page.locator('li').filter({ hasText: '20' }).first().click()
+  await page.waitForTimeout(100)
   await page.getByRole('button', { name: '确定' }).click()
+  await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '20:40:00' })).toBeVisible()
 })

package/demos/pc/app/time-select/basic-usage.spec.ts

@@ -6,7 +6,7 @@ test('基础用法', async ({ page }) => {
   const input = page.locator('#basic-usage').locator('.tiny-input__inner')
   const timeInput = page.locator('#basic-usage').getByRole('textbox', { name: '选择时间' })
   await timeInput.click()
-  await page.getByText('10:00').nth(1).click()
+  await page.getByText('10:00').click()
   await expect(input).toHaveValue('10:00')
 
   //   手动输入

package/demos/pc/app/time-select/clear-icon.spec.ts

@@ -7,7 +7,7 @@ test('自定义清空图标', async ({ page }) => {
   const timeInput = page.getByRole('textbox', { name: '选择时间' })
   const input = demo.locator('.tiny-input__inner')
   await timeInput.click()
-  await page.getByText('10:00').nth(1).click()
+  await page.getByText('10:00').click()
   await input.hover()
   //   点击图标，清除输入框内容
   await page.locator('#clear-icon svg').first().click()

package/demos/pc/app/time-select/default-value.spec.ts

@@ -5,6 +5,6 @@ test('选择器打开时默认时间设置', async ({ page }) => {
   await page.goto('time-select#default-value')
   const demo = page.locator('#default-value')
   await demo.locator('.tiny-date-editor').click()
-  const defaultSelect = page.getByText('10:00').nth(1)
+  const defaultSelect = page.getByText('10:00')
   await expect(defaultSelect).toHaveClass(/default/)
 })

package/demos/pc/app/time-select/event-blur-composition-api.vue

@@ -17,15 +17,15 @@ import { TimeSelect as TinyTimeSelect, Modal } from '@opentiny/vue'
 const value1 = ref('08:30')
 
 function bulr() {
-  Modal.message('blur事件')
+  Modal.message({ message: 'blur事件', status: 'info' })
 }
 
 function change() {
-  Modal.message('change事件')
+  Modal.message({ message: 'change事件', status: 'info' })
 }
 
 function focus() {
-  Modal.message('focus事件')
+  Modal.message({ message: 'focus事件', status: 'info' })
 }
 </script>
 

package/demos/pc/app/time-select/event-blur.spec.ts

@@ -6,7 +6,7 @@ test('事件', async ({ page }) => {
   await page.getByPlaceholder('选择时间范围').getByTitle('08:30').first().click()
   const focusDiv = page.locator('div').filter({ hasText: 'focus事件' }).nth(1)
   await expect(focusDiv).toBeVisible()
-  await page.getByText('10:00').nth(1).click()
+  await page.getByText('10:00').click()
   const change = page.locator('div:nth-child(9) > .tiny-modal__box')
   await expect(change).toBeVisible
   const blurDiv = page.locator('div').filter({ hasText: 'blur事件' }).nth(1)

package/demos/pc/app/time-select/event-blur.vue

@@ -24,13 +24,13 @@ export default {
   },
   methods: {
     bulr() {
-      Modal.message('blur事件')
+      Modal.message({ message: 'blur事件', status: 'info' })
     },
     change(value) {
-      Modal.message(value)
+      Modal.message({ message: value, status: 'info' })
     },
     focus() {
-      Modal.message('focus事件')
+      Modal.message({ message: 'focus事件', status: 'info' })
     }
   }
 }

package/demos/pc/app/time-select/focus-composition-api.vue

@@ -13,7 +13,7 @@ const value = ref('')
 const timeSelectRef = ref()
 
 function hanleFocus() {
-  timeSelectRef.value.handleFocus()
+  timeSelectRef.value.focus()
 }
 </script>
 

package/demos/pc/app/time-select/focus.spec.ts

@@ -4,7 +4,6 @@ test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#focus')
   await page.getByRole('button', { name: '手动获取焦点' }).click()
-  // 需要先解决time-select的focus事件
-  // const focus = page.getByRole('textbox', { name: '选择时间' })
-  // await expect(focus).toBeFocused()
+  const focus = page.getByRole('textbox', { name: '选择时间' })
+  await expect(focus).toBeFocused()
 })

package/demos/pc/app/time-select/focus.vue

@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     hanleFocus() {
-      this.$refs.timeSelect.handleFocus()
+      this.$refs.timeSelect.focus()
     }
   }
 }

package/demos/pc/app/time-select/range-placeholder.spec.ts

@@ -4,7 +4,7 @@ test('固定时间范围', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#range-placeholder')
   const timeInput = page.getByRole('textbox', { name: '起始时间' })
-  const options = page.locator('.tiny-picker-panel').nth(3).locator('div')
+  const options = page.locator('.tiny-picker-panel').nth(1).locator('div')
   await timeInput.click()
   // options的第一条是options.first()，时间是08:30；最后一条（最大时间）是options.nth(43)，时间是18：30
   await expect(options.first()).toContainText('08:30')
@@ -14,7 +14,7 @@ test('固定时间范围', async ({ page }) => {
   await expect(page.locator('.tiny-input-suffix .tiny-input__inner').first()).toHaveValue('10:00')
 
   const timeEnd = page.getByRole('textbox', { name: '结束时间' })
-  const endOptions = page.locator('.tiny-picker-panel').nth(3).locator('div')
+  const endOptions = page.locator('.tiny-picker-panel').nth(1).locator('div')
   await timeEnd.click()
   await expect(endOptions.first()).toContainText('08:30')
   await expect(endOptions.nth(43)).toContainText('18:30')

package/demos/pc/app/tooltip/theme-composition-api.vue

@@ -1,30 +1,32 @@
 <template>
-  <div class="box">
-    Effects 示例：
-    <tiny-tooltip content="dark 提示文字" placement="top">
-      <tiny-button>Dark</tiny-button>
-    </tiny-tooltip>
-    <tiny-tooltip effect="light" content="light 提示文字" placement="top">
-      <tiny-button>Light</tiny-button>
-    </tiny-tooltip>
-  </div>
-  <div class="box">
-    Types 示例：
-    <tiny-tooltip type="normal" content="normal 提示文字" placement="top">
-      <tiny-button>normal</tiny-button>
-    </tiny-tooltip>
-    <tiny-tooltip type="warning" content="warning 提示文字" placement="top">
-      <tiny-button>warning</tiny-button>
-    </tiny-tooltip>
-    <tiny-tooltip type="error" content="error 提示文字" placement="top">
-      <tiny-button>error</tiny-button>
-    </tiny-tooltip>
-    <tiny-tooltip type="info" content="info 提示文字" placement="top">
-      <tiny-button>info</tiny-button>
-    </tiny-tooltip>
-    <tiny-tooltip type="success" content="success 提示文字" placement="top">
-      <tiny-button>success</tiny-button>
-    </tiny-tooltip>
+  <div>
+    <div class="box">
+      Effects 示例：
+      <tiny-tooltip content="dark 提示文字" placement="top">
+        <tiny-button>Dark</tiny-button>
+      </tiny-tooltip>
+      <tiny-tooltip effect="light" content="light 提示文字" placement="top">
+        <tiny-button>Light</tiny-button>
+      </tiny-tooltip>
+    </div>
+    <div class="box">
+      Types 示例：
+      <tiny-tooltip type="normal" content="normal 提示文字" placement="top">
+        <tiny-button>normal</tiny-button>
+      </tiny-tooltip>
+      <tiny-tooltip type="warning" content="warning 提示文字" placement="top">
+        <tiny-button>warning</tiny-button>
+      </tiny-tooltip>
+      <tiny-tooltip type="error" content="error 提示文字" placement="top">
+        <tiny-button>error</tiny-button>
+      </tiny-tooltip>
+      <tiny-tooltip type="info" content="info 提示文字" placement="top">
+        <tiny-button>info</tiny-button>
+      </tiny-tooltip>
+      <tiny-tooltip type="success" content="success 提示文字" placement="top">
+        <tiny-button>success</tiny-button>
+      </tiny-tooltip>
+    </div>
   </div>
 </template>
 

package/demos/pc/app/tooltip/theme.vue

@@ -1,30 +1,32 @@
 <template>
-  <div class="box">
-    Effects 示例：
-    <tiny-tooltip content="dark 提示文字" placement="top">
-      <tiny-button>Dark</tiny-button>
-    </tiny-tooltip>
-    <tiny-tooltip effect="light" content="light 提示文字" placement="top">
-      <tiny-button>Light</tiny-button>
-    </tiny-tooltip>
-  </div>
-  <div class="box">
-    Types 示例：
-    <tiny-tooltip type="normal" content="normal 提示文字" placement="top">
-      <tiny-button>normal</tiny-button>
-    </tiny-tooltip>
-    <tiny-tooltip type="warning" content="warning 提示文字" placement="top">
-      <tiny-button>warning</tiny-button>
-    </tiny-tooltip>
-    <tiny-tooltip type="error" content="error 提示文字" placement="top">
-      <tiny-button>error</tiny-button>
-    </tiny-tooltip>
-    <tiny-tooltip type="info" content="info 提示文字" placement="top">
-      <tiny-button>info</tiny-button>
-    </tiny-tooltip>
-    <tiny-tooltip type="success" content="success 提示文字" placement="top">
-      <tiny-button>success</tiny-button>
-    </tiny-tooltip>
+  <div>
+    <div class="box">
+      Effects 示例：
+      <tiny-tooltip content="dark 提示文字" placement="top">
+        <tiny-button>Dark</tiny-button>
+      </tiny-tooltip>
+      <tiny-tooltip effect="light" content="light 提示文字" placement="top">
+        <tiny-button>Light</tiny-button>
+      </tiny-tooltip>
+    </div>
+    <div class="box">
+      Types 示例：
+      <tiny-tooltip type="normal" content="normal 提示文字" placement="top">
+        <tiny-button>normal</tiny-button>
+      </tiny-tooltip>
+      <tiny-tooltip type="warning" content="warning 提示文字" placement="top">
+        <tiny-button>warning</tiny-button>
+      </tiny-tooltip>
+      <tiny-tooltip type="error" content="error 提示文字" placement="top">
+        <tiny-button>error</tiny-button>
+      </tiny-tooltip>
+      <tiny-tooltip type="info" content="info 提示文字" placement="top">
+        <tiny-button>info</tiny-button>
+      </tiny-tooltip>
+      <tiny-tooltip type="success" content="success 提示文字" placement="top">
+        <tiny-button>success</tiny-button>
+      </tiny-tooltip>
+    </div>
   </div>
 </template>