@opentiny/vue-docs 2.2.6 → 2.2.8

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/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/basic-usage-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 270px">
+  <div class="drop-time-demo-basic">
     <tiny-drop-times v-model="value" placeholder="请选择" @change="change"></tiny-drop-times>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -15,3 +15,9 @@ function change(value) {
   Modal.message({ message: 'change 事件，当前值为 ' + value })
 }
 </script>
+
+<style scoped>
+.drop-time-demo-basic {
+  width: 270px;
+}
+</style>

package/demos/pc/app/drop-times/basic-usage.vue

@@ -1,11 +1,11 @@
 <template>
-  <div style="width: 270px">
+  <div class="drop-time-demo-basic">
     <tiny-drop-times v-model="value" placeholder="请选择" @change="change"></tiny-drop-times>
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { DropTimes, Modal } from '@opentiny/vue'
 
 export default {
@@ -24,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.drop-time-demo-basic {
+  width: 270px;
+}
+</style>

package/demos/pc/app/drop-times/size-composition-api.vue

@@ -1,13 +1,23 @@
 <template>
-  <div style="width: 270px">
-    <tiny-drop-times size="medium" v-model="value" placeholder="请选择"></tiny-drop-times>
-    <p>当前选中值：{{ value }}</p>
+  <div class="drop-time-demo-size">
+    <tiny-drop-times size="medium" v-model="value" placeholder="尺寸：medium"></tiny-drop-times>
+    <tiny-drop-times size="small" v-model="value" placeholder="尺寸：small"></tiny-drop-times>
+    <tiny-drop-times size="mini" v-model="value" placeholder="尺寸：mini"></tiny-drop-times>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { DropTimes as TinyDropTimes } from '@opentiny/vue'
 
 const value = ref('')
 </script>
+
+<style lang="less" scoped>
+.drop-time-demo-size {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/drop-times/size.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="width: 270px">
-    <tiny-drop-times size="medium" v-model="value" placeholder="请选择"></tiny-drop-times>
-    <p>当前选中值：{{ value }}</p>
+  <div class="drop-time-demo-size">
+    <tiny-drop-times size="medium" v-model="value" placeholder="尺寸：medium"></tiny-drop-times>
+    <tiny-drop-times size="small" v-model="value" placeholder="尺寸：small"></tiny-drop-times>
+    <tiny-drop-times size="mini" v-model="value" placeholder="尺寸：mini"></tiny-drop-times>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { DropTimes } from '@opentiny/vue'
 
 export default {
@@ -19,3 +20,12 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.drop-time-demo-size {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/drop-times/start-end-step-composition-api.vue

@@ -1,23 +1,18 @@
 <template>
-  <div style="width: 270px">
-    <tiny-drop-times
-      v-model="value"
-      placeholder="请选择"
-      :end="720"
-      :start="60"
-      :step="5"
-      @change="change"
-    ></tiny-drop-times>
+  <div class="drop-time-demo-sse">
+    <tiny-drop-times v-model="value" placeholder="请选择" :start="60" :step="5" :end="720"></tiny-drop-times>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { DropTimes as TinyDropTimes, Modal } from '@opentiny/vue'
+import { DropTimes as TinyDropTimes } from '@opentiny/vue'
 
 const value = ref('')
+</script>
 
-function change(value) {
-  Modal.message({ message: 'change 事件，当前值为 ' + value })
+<style scoped>
+.drop-time-demo-sse {
+  width: 270px;
 }
-</script>
+</style>

package/demos/pc/app/drop-times/start-end-step.vue

@@ -1,18 +1,11 @@
 <template>
-  <div style="width: 270px">
-    <tiny-drop-times
-      v-model="value"
-      placeholder="请选择"
-      :end="720"
-      :start="60"
-      :step="5"
-      @change="change"
-    ></tiny-drop-times>
+  <div class="drop-time-demo-sse">
+    <tiny-drop-times v-model="value" placeholder="请选择" :start="60" :step="5" :end="720"></tiny-drop-times>
   </div>
 </template>
 
-<script lang="jsx">
-import { DropTimes, Modal } from '@opentiny/vue'
+<script>
+import { DropTimes } from '@opentiny/vue'
 
 export default {
   components: {
@@ -22,11 +15,12 @@ export default {
     return {
       value: ''
     }
-  },
-  methods: {
-    change(value) {
-      Modal.message({ message: 'change 事件，当前值为 ' + value })
-    }
   }
 }
 </script>
+
+<style scoped>
+.drop-time-demo-sse {
+  width: 270px;
+}
+</style>

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

@@ -21,7 +21,7 @@ export default {
     },
     {
       'demoId': 'size',
-      'name': { 'zh-CN': '设置组件大小的size属性', 'en-US': 'Set the size attribute of the component size' },
+      'name': { 'zh-CN': '尺寸', 'en-US': 'Set the size attribute of the component size' },
       'desc': {
         'zh-CN': '<p>可设置为：medium，small，mini</p>\n',
         'en-US': '<p>The value can be medium, small, or mini</p>\n'
@@ -33,20 +33,20 @@ export default {
     {
       'name': 'drop-times',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue / v-model',
-          'type': '—',
-          'defaultValue': '该属性的默认值为 {}',
+          'type': 'string',
+          'defaultValue': '--',
           'desc': { 'zh-CN': '绑定值', 'en-US': 'Set the component size. The value can be medium, small, or mini.' },
-          'demoId': 'start-end-step'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'size',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置组件大小，可以设置为：medium，small，mini',
+            'zh-CN': '输入框尺寸',
             'en-US': 'Class name added to the DropTimes drop-down list box'
           },
           'demoId': 'size'
@@ -54,7 +54,7 @@ export default {
         {
           'name': 'popper-class',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '为 DropTimes 下拉弹框添加的 class 类名',
             'en-US':
@@ -65,7 +65,7 @@ export default {
         {
           'name': 'popper-append-to-body',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': ' true',
           'desc': {
             'zh-CN':
               '是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
@@ -81,14 +81,14 @@ export default {
             'zh-CN': '设置输入框内的提示占位文本',
             'en-US': 'Set the prompt placeholder text in the text box.'
           },
-          'demoId': 'start-end-step'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'end',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 1440',
+          'defaultValue': ' 1440',
           'desc': {
-            'zh-CN': '结束时间，以分钟计算，默认值为 1440。',
+            'zh-CN': '结束时间，以分钟计算',
             'en-US': 'End time, in minutes. The default value is 1440.'
           },
           'demoId': 'start-end-step'
@@ -96,9 +96,9 @@ export default {
         {
           'name': 'start',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 0',
+          'defaultValue': ' 0',
           'desc': {
-            'zh-CN': '开始时间，以分钟计算，默认值为 0。',
+            'zh-CN': '开始时间，以分钟计算',
             'en-US': 'Start time, in minutes. The default value is 0.'
           },
           'demoId': 'start-end-step'
@@ -106,24 +106,34 @@ export default {
         {
           'name': 'step',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 15',
+          'defaultValue': ' 15',
           'desc': {
-            'zh-CN': '间隔时间，以分钟计算，默认值为 15。',
+            'zh-CN': '间隔时间，以分钟计算',
             'en-US': 'Interval, in minutes. The default value is 15.'
           },
           'demoId': 'start-end-step'
+        },
+        {
+          'name': 'disabled',
+          'type': 'boolean',
+          'defaultValue': ' false',
+          'desc': {
+            'zh-CN': '禁用状态',
+            'en-US': 'Disabled state'
+          },
+          'demoId': ''
         }
       ],
       'events': [
         {
           'name': 'change',
-          'type': '',
+          'type': '(value: string) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '下拉切换当前时间后触发该事件',
             'en-US': 'This event is triggered after the current time is switched by the pull-down button.'
           },
-          'demoId': 'start-end-step'
+          'demoId': 'basic-usage'
         }
       ],
       'slots': []

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/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.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/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>

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

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test'
+
+test('配置式设置提示信息', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#tip')
+
+  const wrap = page.locator('#tip')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(0)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropdownTrigger = dropDown.locator('.tiny-dropdown-trigger')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
+
+  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')).toBeVisible()
+  await dropdownTrigger.hover()
+  await expect(dropDownMenu).toBeVisible()
+
+  await dropDownMenuItem.nth(1).hover()
+  await expect(page.locator('.tiny-tooltip').filter({ hasText: /^很好$/ })).toHaveCount(1)
+
+  await dropDownMenuItem.nth(2).hover()
+  await expect(page.locator('.tiny-tooltip').filter({ hasText: /^支持函数$/ })).toHaveCount(1)
+})
+
+test('使用 tip 和 tip-position 属性设置提示信息', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#tip')
+
+  const wrap = page.locator('#tip')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropdownTrigger = dropDown.locator('.tiny-dropdown-trigger')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
+
+  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')).toBeVisible()
+  await dropdownTrigger.hover()
+  await expect(dropDownMenu).toBeVisible()
+
+  await dropDownMenuItem.nth(0).hover()
+  await expect(page.locator('body > .tiny-tooltip').filter({ hasText: /^老友粉$/ })).toHaveCount(1)
+
+  await dropDownMenuItem.nth(1).hover()
+  await expect(page.locator('body > .tiny-tooltip').filter({ hasText: /^黄金糕$/ })).toHaveCount(1)
+})

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

@@ -17,11 +17,11 @@
     <tiny-dropdown trigger="click">
       <template #dropdown>
         <tiny-dropdown-menu>
-          <tiny-dropdown-item :icon="iconPlus">黄金糕</tiny-dropdown-item>
-          <tiny-dropdown-item :icon="iconPlusCircle">狮子头</tiny-dropdown-item>
-          <tiny-dropdown-item :icon="iconPlusSquare">螺蛳粉</tiny-dropdown-item>
-          <tiny-dropdown-item :icon="iconCheckedLinear">双皮奶</tiny-dropdown-item>
-          <tiny-dropdown-item :icon="iconCheckedSur">蚵仔煎</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlus">黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlusCircle">狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconPlusSquare">螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconCheckedLinear">双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item :icon="tinyIconCheckedSur">蚵仔煎</tiny-dropdown-item>
         </tiny-dropdown-menu>
       </template>
     </tiny-dropdown>
@@ -36,11 +36,11 @@ import {
   DropdownItem as TinyDropdownItem
 } from '@opentiny/vue'
 
-const TinyIconPlus = iconPlus()
-const TinyIconPlusCircle = iconPlusCircle()
-const TinyIconPlusSquare = iconPlusSquare()
-const TinyIconCheckedLinear = iconCheckedLinear()
-const TinyIconCheckedSur = iconCheckedSur()
+const tinyIconPlus = iconPlus()
+const tinyIconPlusCircle = iconPlusCircle()
+const tinyIconPlusSquare = iconPlusSquare()
+const tinyIconCheckedLinear = iconCheckedLinear()
+const tinyIconCheckedSur = iconCheckedSur()
 </script>
 
 <style lang="less" scoped>

package/demos/pc/app/dropdown/visible-arrow.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('显示箭头', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#visible-arrow')
+
+  const wrap = page.locator('#visible-arrow')
+  const dropDown = wrap.locator('.tiny-dropdown')
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropdownTrigger = dropDown.locator('.tiny-dropdown-trigger')
+  const arrow = dropDownMenu.locator('.popper__arrow')
+
+  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')).toBeVisible()
+  await dropdownTrigger.hover()
+  await expect(dropDownMenu).toBeVisible()
+  await expect(arrow).toBeVisible()
+  await expect(arrow).toHaveCSS('top', '-6px')
+})

package/demos/pc/app/dropdown/webdoc/dropdown.cn.md

@@ -4,4 +4,4 @@ title: Dropdown 下拉菜单
 
 # Dropdown 下拉菜单
 
-> 可以配置菜单列表，点击或悬浮时下拉，支持多级菜单
+可以配置菜单列表，点击或悬浮时下拉，支持多级菜单。