@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/divider/basic-usage.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('Divider 基础用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('divider#basic-usage')
+  await page.locator('.tiny-divider').click()
+})

package/demos/pc/app/divider/content-position.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('Divider文案位置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('divider#content-position')
+  await page.getByText('文案在左侧').click()
+  await page.getByText('文案', { exact: true }).first().click()
+  await page.getByText('文案在中间').click()
+  await page.getByText('文案', { exact: true }).nth(1).click()
+  await page.getByText('文案在右侧').click()
+  await page.getByText('文案', { exact: true }).nth(2).click()
+})

package/demos/pc/app/divider/custom-style.spec.ts

@@ -0,0 +1,19 @@
+// divider#custom-style
+import { test, expect } from '@playwright/test'
+
+test('Divider样式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('divider#custom-style')
+  await page.getByText('自定义分隔线颜色').click()
+  await page.locator('.tiny-divider').first().click()
+  await page.getByText('自定义分隔线的样式').click()
+  await page.locator('.pc-demo > div:nth-child(4)').click()
+  await page.getByText('自定义文案的颜色').click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^文案$/ })
+    .first()
+    .click()
+  await page.getByText('文案的背景颜色', { exact: true }).click()
+  await page.getByText('文案', { exact: true }).nth(1).click()
+})

package/demos/pc/app/divider/direction.spec.ts

@@ -0,0 +1,12 @@
+// divider#custom-style
+import { test, expect } from '@playwright/test'
+
+test('Divider分隔线', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('divider#direction')
+  await page.getByText('分隔线', { exact: true }).first().click()
+  await page.locator('.tiny-divider').first().click()
+  await page.getByText('分隔线', { exact: true }).nth(1).click()
+  await page.locator('.pc-demo > div:nth-child(4)').click()
+  await page.getByText('分隔线', { exact: true }).nth(2).click()
+})

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

@@ -5,33 +5,36 @@ 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': 'You can refer to component label.' },
       'codeFiles': ['base.vue']
     },
     {
       'demoId': 'direction',
-      'name': { 'zh-CN': '垂直分隔线', 'en-US': '' },
+      'name': { 'zh-CN': '垂直分隔线', 'en-US': 'Vertical divider line' },
       'desc': {
         'zh-CN': '<p>通过 <code>direction</code> 属性可以设置分隔线的方向。</p>',
-        'en-US': ''
+        'en-US': '<p>The direction of the separator line can be set through the<code>direction</code>attribute.</p>'
       },
       'codeFiles': ['direction.vue']
     },
     {
       'demoId': 'content-position',
-      'name': { 'zh-CN': '分隔线文案的位置', 'en-US': '' },
+      'name': { 'zh-CN': '分隔线文案的位置', 'en-US': 'The position of the separator copy' },
       'desc': {
         'zh-CN': '<p>通过 <code>content-position</code> 属性 可以设置分隔线文案的位置。</p>',
-        'en-US': ''
+        'en-US':
+          '<p>The position of the separator text can be set through the<code>content position</code>attribute.</p>'
       },
       'codeFiles': ['contentPosition.vue']
     },
     {
       'demoId': 'custom-style',
-      'name': { 'zh-CN': '自定义分隔线样式', 'en-US': '' },
+      'name': { 'zh-CN': '自定义分隔线样式', 'en-US': 'Custom divider style' },
       'desc': {
-        'zh-CN': '<p>你可以自定义分割线样式。</p>',
-        'en-US': ''
+        'zh-CN':
+          '<p>通过<code>color</code><code>border-style</code><code>content-color</code>属性，自定义分割线样式。</p>',
+        'en-US':
+          '<p>Customize the split line style through the<code>color</code><code>border style</code><code>content color</code>attribute.</p>'
       },
       'codeFiles': ['customStyle.vue']
     }
@@ -40,7 +43,7 @@ export default {
     {
       'name': 'divider',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'color',
           'type': 'string',
@@ -51,32 +54,30 @@ export default {
         {
           'name': 'direction',
           'type': 'string',
-          'defaultValue': 'horizontal',
+          'defaultValue': `'horizontal'`,
           'desc': {
-            'zh-CN': '设置分隔线的方向，该属性的可选值为 horizontal / vertical 。',
-            'en-US':
-              'Set the direction of the divider; the possible values for this property are "horizontal" or "vertical".'
+            'zh-CN': '设置分隔线的方向，该属性的可选值为 horizontal / vertical',
+            'en-US': `Set the direction of the divider; the possible values for this property are "horizontal" or "vertical"`
           },
           'demoId': 'direction'
         },
         {
           'name': 'content-position',
           'type': 'string',
-          'defaultValue': 'center',
+          'defaultValue': `'center'`,
           'desc': {
-            'zh-CN': '设置分隔线文案的位置，该属性的可选值为 left / center / right 。',
-            'en-US':
-              'Set the position of the divider content; the possible values for this property are "left", "center", or "right".'
+            'zh-CN': '设置分隔线文案的位置，该属性的可选值为 left / center / right',
+            'en-US': `Set the position of the separator text, with optional values of left/center/right for this attribute`
           },
           'demoId': 'content-position'
         },
         {
           'name': 'border-style',
           'type': 'string',
-          'defaultValue': 'solid',
+          'defaultValue': `'solid'`,
           'desc': {
             'zh-CN': '设置分隔线的样式，该属性的可选值为 solid / dashed',
-            'en-US': 'Set the style of the divider; the possible values for this property are "solid" or "dashed".'
+            'en-US': 'Set the style of the separator line, with optional values of solid/dashed for this property'
           },
           'demoId': 'custom-style'
         },
@@ -84,14 +85,17 @@ export default {
           'name': 'content-color',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '设置分隔线文案的颜色', 'en-US': 'Set the color of the divider content.' },
+          'desc': { 'zh-CN': '设置分隔线文案的颜色', 'en-US': 'Set the color of the divider content' },
           'demoId': 'custom-style'
         },
         {
           'name': 'content-background-color',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '设置分割线文案的背景颜色', 'en-US': 'Set the background color of the divider content.' },
+          'desc': {
+            'zh-CN': '设置分割线文案的背景颜色',
+            'en-US': 'Set the background color of the divider content'
+          },
           'demoId': 'custom-style'
         }
       ],

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

@@ -31,3 +31,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+:deep(.tiny-drawer .tiny-drawer__main.is-right) {
+  height: calc(100% - 50px);
+  margin-top: 50px;
+}
+</style>

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

@@ -127,7 +127,7 @@ export default {
     {
       'name': 'drawer',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'visible',
           'type': 'boolean',

package/demos/pc/app/drop-roles/webdoc/drop-roles.js

@@ -43,7 +43,7 @@ export default {
     {
       'name': 'drop-roles',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue / v-model',
           'type': 'string , number',

package/demos/pc/app/drop-times/webdoc/drop-times.js

@@ -33,7 +33,7 @@ export default {
     {
       'name': 'drop-times',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue / v-model',
           'type': '—',

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

@@ -19,7 +19,7 @@
     </tiny-dropdown>
 
     <p>场景2：配置式</p>
-    <tiny-dropdown @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
+    <tiny-dropdown class="options-event" @item-click="itemClick" @visible-change="visibleChange">
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
       </template>

package/demos/pc/app/dropdown/events.spec.ts

@@ -35,6 +35,7 @@ test('配置式内置事件', async ({ page }) => {
   const wrap = page.locator('#events')
   const notify = page.locator('.tiny-notify')
   const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+
   await expect(dropDown).toHaveClass(/options-event/)
   const dropDownMenuItem = page.locator('body > .tiny-dropdown-menu > .tiny-dropdown-item')
 

package/demos/pc/app/dropdown/hide-on-click-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>点击后不收起菜单弹框:</p>
+    <p>点击后不收起菜单弹框：</p>
     <tiny-dropdown :hide-on-click="false">
       <template #dropdown>
         <tiny-dropdown-menu>

package/demos/pc/app/dropdown/hide-on-click.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p>点击后不收起菜单弹框:</p>
+    <p>点击后不收起菜单弹框：</p>
     <tiny-dropdown :hide-on-click="false">
       <template #dropdown>
         <tiny-dropdown-menu>

package/demos/pc/app/dropdown/inherit-width-composition-api.vue

@@ -13,12 +13,12 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景2：设置inherit-width</p>
+    <p>场景2：设置 inherit-width</p>
     <tiny-dropdown split-button type="success" :inherit-width="true">
       更多菜单
       <template #dropdown>
         <tiny-dropdown-menu>
-          <tiny-dropdown-item>黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
           <tiny-dropdown-item>狮子头</tiny-dropdown-item>
           <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
           <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>

package/demos/pc/app/dropdown/inherit-width.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test'
+
+test('默认', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#inherit-width')
+
+  const wrap = page.locator('#inherit-width')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(0)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
+
+  await page.waitForTimeout(1500)
+  await dropDown.locator('.tiny-dropdown-trigger').hover()
+  await expect(dropDownMenu).toBeVisible()
+  // 弹框宽度不设置最小宽度
+
+  const dropdownBox = await dropDown.boundingBox()
+  const dropdownMenuBox = await dropDownMenu.boundingBox()
+  const difference = dropdownBox.width - dropdownMenuBox.width
+
+  await expect(difference > 1).toBe(true)
+})
+
+test('弹框最小宽度继承触发源宽度', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#inherit-width')
+
+  const wrap = page.locator('#inherit-width')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
+
+  await page.waitForTimeout(1500)
+  await dropDown.locator('.tiny-dropdown-trigger').hover()
+  await expect(dropDownMenu).toBeVisible()
+  // 弹框最小宽度和触发源宽度相同
+  const dropdownBox = await dropDown.boundingBox()
+  const dropdownMenuBox = await dropDownMenu.boundingBox()
+  const difference = dropdownMenuBox.width - dropdownBox.width
+
+  await expect(difference >= 0).toBe(true)
+  await expect(dropDownMenu).toHaveCSS('min-width', `${dropdownBox.width}px`)
+})

package/demos/pc/app/dropdown/inherit-width.vue

@@ -13,12 +13,12 @@
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
-    <p>场景2：设置inherit-width</p>
+    <p>场景2：设置 inherit-width</p>
     <tiny-dropdown split-button type="success" :inherit-width="true">
       更多菜单
       <template #dropdown>
         <tiny-dropdown-menu>
-          <tiny-dropdown-item>黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
           <tiny-dropdown-item>狮子头</tiny-dropdown-item>
           <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
           <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>

package/demos/pc/app/dropdown/multi-level-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>场景1：使用 menu-options 属性定义 children</p>
-    <tiny-dropdown :menu-options="menuOptions"></tiny-dropdown>
+    <tiny-dropdown :menu-options="menuOptions" @item-click="itemClick"></tiny-dropdown>
     <p>场景2：使用 options 属性定义 children</p>
     <tiny-dropdown @item-click="itemClick">
       <template #dropdown>
@@ -14,7 +14,7 @@
 <script setup>
 import { reactive } from 'vue'
 import { iconStarDisable } from '@opentiny/vue-icon'
-import { Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, Notify } from '@opentiny/vue'
+import { Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, Modal } from '@opentiny/vue'
 
 const options = reactive([
   {
@@ -66,12 +66,8 @@ const menuOptions = reactive({
 })
 
 const itemClick = (data) => {
-  Notify({
-    type: 'info',
-    title: 'itemData',
-    message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`,
-    position: 'top-right',
-    duration: 2000
+  Modal.message({
+    message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`
   })
 }
 </script>

package/demos/pc/app/dropdown/multi-level.spec.ts

@@ -5,22 +5,27 @@ test('多级菜单,使用 menu-options', async ({ page }) => {
   await page.goto('dropdown#multi-level')
 
   const wrap = page.locator('#multi-level')
-  const dropDown = wrap.locator('.tiny-dropdown').first()
+  const dropDown = wrap.locator('.tiny-dropdown').nth(0)
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
-  const notify = page.locator('.tiny-notify')
 
-  await page.waitForTimeout(1500)
+  await page.waitForTimeout(2000)
   await dropDown.hover()
   await expect(dropDownMenu).toBeVisible()
+  await page.waitForTimeout(500)
   await dropDownMenuItem.first().hover()
+  await page.waitForTimeout(500)
   await dropDownMenuItem.getByText('老友粉2.1').hover()
+  await expect(dropDownMenuItem.getByText('狮子头3.1')).toBeVisible()
   await dropDownMenuItem.getByText('狮子头3.1').click()
+  await page.waitForTimeout(1000)
+
   await expect(
-    notify.filter({
+    page.locator('.tiny-modal').filter({
       hasText: '配置式可以通过 data.itemData 获取配置数据：{"label":"狮子头3.1"}'
     })
-  ).toBeVisible()
+  ).toHaveCount(1)
+  await page.waitForTimeout(500)
 })
 
 test('多级菜单,使用 options', async ({ page }) => {
@@ -31,17 +36,19 @@ test('多级菜单,使用 options', async ({ page }) => {
   const dropDown = wrap.locator('.tiny-dropdown').nth(1)
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
-  const notify = page.locator('.tiny-notify')
 
-  await page.waitForTimeout(1500)
+  await page.waitForTimeout(2000)
   await dropDown.hover()
   await expect(dropDownMenu).toBeVisible()
+  await page.waitForTimeout(500)
   await dropDownMenuItem.first().hover()
+  await page.waitForTimeout(500)
   await dropDownMenuItem.getByText('老友粉2.1').hover()
   await dropDownMenuItem.getByText('狮子头3.1').click()
+  await page.waitForTimeout(1000)
   await expect(
-    notify.filter({
+    page.locator('.tiny-modal').filter({
       hasText: '配置式可以通过 data.itemData 获取配置数据：{"label":"狮子头3.1"}'
     })
-  ).toBeVisible()
+  ).toHaveCount(1)
 })

package/demos/pc/app/dropdown/multi-level.vue

@@ -13,7 +13,7 @@
 
 <script>
 import { iconStarDisable } from '@opentiny/vue-icon'
-import { Dropdown, DropdownMenu, Notify } from '@opentiny/vue'
+import { Dropdown, DropdownMenu, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -73,12 +73,8 @@ export default {
   },
   methods: {
     itemClick(data) {
-      Notify({
-        type: 'info',
-        title: 'itemData',
-        message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`,
-        position: 'top-right',
-        duration: 2000
+      Modal.message({
+        message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`
       })
     }
   }

package/demos/pc/app/dropdown/options.spec.ts

@@ -51,7 +51,7 @@ test('配置式：使用 menu-options 和 text-field', async ({ page }) => {
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
 
-  await page.waitForTimeout(1200)
+  await page.waitForTimeout(2000)
   await dropDown.hover()
   await expect(dropDownMenu.first()).toBeVisible()
   await expect(dropDownMenuItem.first()).toContainText('老友粉')

package/demos/pc/app/dropdown/show-icon-composition-api.vue

@@ -1,26 +1,49 @@
 <template>
-  <tiny-dropdown :show-icon="false">
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
-        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
+  <div>
+    <p>场景1： 只显示文本</p>
+    <tiny-dropdown :show-icon="false">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+    <p>场景2：自定义图且只显示图标</p>
+    <tiny-dropdown title="" :suffix-icon="tinyIconEllipsis">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
-<script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+<script setup>
+import {
+  Dropdown as TinyDropdown,
+  DropdownMenu as TinyDropdownMenu,
+  DropdownItem as TinyDropdownItem
+} from '@opentiny/vue'
+import { iconEllipsis } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
-  }
-}
+const tinyIconEllipsis = iconEllipsis()
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+  margin-top: 30px;
+}
+</style>

package/demos/pc/app/dropdown/show-icon.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+
+test('只显示文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#show-icon')
+
+  const wrap = page.locator('#show-icon')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(0)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropdownTrigger = dropDown.locator('.tiny-dropdown-trigger')
+
+  await page.waitForTimeout(1500)
+  await expect(dropdownTrigger.locator('.tiny-dropdown__title')).toBeVisible()
+  await expect(dropdownTrigger.locator('.tiny-dropdown__title')).toHaveText('下拉菜单')
+  await expect(dropdownTrigger.locator('.tiny-dropdown__suffix-inner')).toBeHidden()
+  await dropdownTrigger.hover()
+  await expect(dropDownMenu).toBeVisible()
+})
+
+test('自定义图且只显示图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#show-icon')
+
+  const wrap = page.locator('#show-icon')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropdownTrigger = dropDown.locator('.tiny-dropdown-trigger')
+
+  await page.waitForTimeout(1500)
+  await expect(dropdownTrigger.locator('.tiny-dropdown__title')).toBeHidden()
+  await expect(dropdownTrigger.locator('.tiny-dropdown__suffix-inner')).toBeVisible()
+  await dropDown.locator('.tiny-dropdown-trigger').hover()
+  await expect(dropDownMenu).toBeVisible()
+})

package/demos/pc/app/dropdown/show-icon.vue

@@ -1,26 +1,56 @@
 <template>
-  <tiny-dropdown :show-icon="false">
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
-        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
+  <div>
+    <p>场景1： 只显示文本</p>
+    <tiny-dropdown :show-icon="false">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+    <p>场景2：自定义图且只显示图标</p>
+    <tiny-dropdown class="custom-icon" title="" :suffix-icon="tinyIconEllipsis">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
 <script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { iconEllipsis } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyDropdown: Dropdown,
     TinyDropdownMenu: DropdownMenu,
     TinyDropdownItem: DropdownItem
+  },
+  data() {
+    return {
+      tinyIconEllipsis: iconEllipsis()
+    }
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+  margin-top: 30px;
+}
+</style>

package/demos/pc/app/dropdown/slots-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-dropdown @visible-change="visibleChange">
+  <tiny-dropdown>
     <span>默认插槽</span>
     <template #suffix-icon>
       <tiny-icon-ascending></tiny-icon-ascending>