@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/scroll-text/webdoc/scroll-text.js

@@ -5,7 +5,10 @@ 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': '可通过 text 自定义文本内容。',
+        'en-US': 'You can use <code>text</code> to customize the text content. '
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -27,24 +30,6 @@ export default {
       },
       'codeFiles': ['hover-stop.vue']
     },
-    {
-      'demoId': 'custom-scroll-text',
-      'name': { 'zh-CN': '自定义文本内容', 'en-US': 'Custom Text Content' },
-      'desc': {
-        'zh-CN': '<p>可通过 <code>text</code> 自定义文本内容。</p>\n',
-        'en-US': '<p>You can use <code>text</code> to customize the text content. </p>\n'
-      },
-      'codeFiles': ['custom-scroll-text.vue']
-    },
-    {
-      'demoId': 'slots',
-      'name': { 'zh-CN': '通过 solt 插槽自定义文本内容', 'en-US': 'Customize the text content through the Solt slot' },
-      'desc': {
-        'zh-CN': '<p>可通过 solt 插槽自定义文本内容。</p>\n',
-        'en-US': '<p>You can customize the text content through the solt slot. </p>\n'
-      },
-      'codeFiles': ['slots.vue']
-    },
     {
       'demoId': 'scroll-time',
       'name': { 'zh-CN': '滚动时间间隔', 'en-US': 'Scrolling Interval' },
@@ -62,49 +47,58 @@ export default {
         'en-US': '<p>You can use <code>class</code> to customize the text style. </p>\n'
       },
       'codeFiles': ['custom-text-style.vue']
+    },
+    {
+      'demoId': 'slots',
+      'name': { 'zh-CN': '插槽', 'en-US': 'Solt' },
+      'desc': {
+        'zh-CN': '<p>可通过 solt 插槽自定义文本内容。</p>\n',
+        'en-US': '<p>You can customize the text content through the solt slot. </p>\n'
+      },
+      'codeFiles': ['slots.vue']
     }
   ],
   apis: [
     {
       'name': 'scroll-text',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'direction',
-          'type': 'string',
-          'defaultValue': '该属性的默认值为 left',
+          'type': `'up' | 'left' | 'down' | 'right'`,
+          'defaultValue': `'left'`,
           'desc': {
-            'zh-CN': '滚动的方向;该属性的可选值为 up / left / down / right',
-            'en-US': 'Scrolling direction; The optional values of this attribute are up / left / down / right'
+            'zh-CN': '滚动的方向',
+            'en-US': 'Scrolling direction'
           },
           'demoId': 'scroll-direction'
         },
         {
           'name': 'hover-stop',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
-            'zh-CN': 'hover 滚动是否停止，可选值为 false 或 true；默认值true。',
-            'en-US': 'Whether to stop scrolling. The value can be false or true. The default value is true.'
+            'zh-CN': 'hover 滚动是否停止',
+            'en-US': 'Whether to stop scrolling.'
           },
           'demoId': 'hover-stop'
         },
         {
           'name': 'time',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 5',
+          'defaultValue': '5',
           'desc': {
-            'zh-CN': '整个滚动过程所用的时间，默认值 5s 。',
-            'en-US': 'Time taken for scrolling. The default value is 5s.'
+            'zh-CN': '整个滚动过程所用的时间',
+            'en-US': 'Time taken for scrolling'
           },
           'demoId': 'scroll-time'
         },
         {
           'name': 'text',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 ScrollText',
+          'defaultValue': `'ScrollText'`,
           'desc': { 'zh-CN': '滚动的文本内容', 'en-US': 'Scrolled text content' },
-          'demoId': 'custom-scroll-text'
+          'demoId': 'basic-usage'
         }
       ],
       'events': [],
@@ -113,7 +107,7 @@ export default {
           'name': 'default',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
+          'desc': { 'zh-CN': '默认插槽，滚动的内容的插槽', 'en-US': 'Default slot, the slot for scrolling content' },
           'demoId': 'custom-scroll-text'
         }
       ]

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

@@ -8,7 +8,7 @@ test('是否正常渲染', async ({ page }) => {
   const selector = page.locator('.tiny-search__selector')
   const firstPresent = first.locator('.tiny-search__present')
   const firstInput = first.locator('.tiny-search__input')
-  const icon = first.locator('a > svg')
+  const icon = page.locator('#basic-usage a svg')
 
   await expect(first).toHaveCount(1)
   await expect(icon).toHaveCount(1)

package/demos/pc/app/search/clearable.spec.ts

@@ -5,7 +5,7 @@ test('可清空输入值', async ({ page }) => {
   await page.goto('search#clearable')
 
   const input = page.locator('.tiny-search__input')
-  const close = page.locator('.tiny-search__input-btn a').first()
+  const close = page.locator('#clearable a').first()
 
   await input.fill('123')
   await expect(input).toHaveValue('123')

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

@@ -4,6 +4,8 @@
     <tiny-search @search="search" is-enter-search></tiny-search>
     <p>值变化事件</p>
     <tiny-search @change="change" @input="input"></tiny-search>
+    <p>值清空事件</p>
+    <tiny-search @clear="clear" clearable></tiny-search>
     <p>类型选中事件</p>
     <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
   </div>
@@ -36,6 +38,10 @@ function change(key, value) {
   Modal.message(`change: ${value}`)
 }
 
+function clear() {
+  Modal.message('clear')
+}
+
 function input(key, value) {
   Modal.message(`input: ${key}, ${JSON.stringify(value)}`)
 }

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

@@ -6,27 +6,30 @@ test('事件是否正常触发', async ({ page }) => {
 
   const modal = page.locator('.tiny-modal')
   const input = page.locator('.tiny-search').getByRole('textbox')
-  const modalText = modal.getByText('111')
   const button = page.locator('.tiny-search__input-btn > a').first()
-  // const empty = modal.getByText('')
 
   await button.click()
   await expect(modal).toHaveCount(1)
   await input.first().fill('111')
   await button.click()
-  await modalText.isVisible()
+  await modal.getByText('111').isVisible()
 
   // change事件
   await input.nth(1).fill('111')
   await input.nth(1).press('Enter')
-  await modalText.nth(1).isVisible()
+  await modal.getByText('change: 111').isVisible()
+
+  // clear 事件
+  await input.nth(2).fill('111')
+  await page.locator('#events a').nth(2).click()
+  await modal.getByText('clear').isVisible()
 
   // select事件
-  const search = page.locator('.tiny-search').nth(2)
+  const search = page.locator('.tiny-search').nth(3)
   const expand = search.locator('.icon-outer')
   const option = search.locator('.tiny-search__poplist-item').filter({ hasText: '找谁' })
   const text = search.locator('.tiny-search__text')
-  const modalContent = page.locator('.tiny-modal').getByText('找谁')
+  const modalContent = modal.getByText('找谁')
 
   await expect(text).toHaveText('找人')
   await expand.click()

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

@@ -4,6 +4,8 @@
     <tiny-search @search="search" is-enter-search></tiny-search>
     <p>值变化事件</p>
     <tiny-search @change="change" @input="input"></tiny-search>
+    <p>值清空事件</p>
+    <tiny-search @clear="clear" clearable></tiny-search>
     <p>类型选中事件</p>
     <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
   </div>
@@ -41,6 +43,9 @@ export default {
     change(key, value) {
       Modal.message(`change: ${value}`)
     },
+    clear() {
+      Modal.message('clear')
+    },
     input(key, value) {
       Modal.message(`input: ${key}, ${JSON.stringify(value)}`)
     },

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

@@ -83,12 +83,12 @@ export default {
       'demoId': 'events',
       'name': { 'zh-CN': '事件', 'en-US': 'Search event' },
       'desc': {
-        'zh-CN': `<div class="tip custom-block"><p class="custom-block-title">通过 <code>is-enter-search</code> 设置回车触发搜索事件， <code>search</code> 监听搜索事件；<br />
+        'zh-CN': `<div class="tip custom-block">通过 <code>is-enter-search</code> 设置回车触发搜索事件， <code>search</code> 监听搜索事件；<br />
               通过 <code>change</code> 监听输入框失焦时搜索值改变事件, <code>input</code> 监听搜索值实时改变事件；<br />
-              通过 <code>select</code> 监听搜索类型选中事件。</p></div>`,
-        'en-US': `<div class="tip custom-block"><p class="custom-block-title">Set a carriage return to trigger a search event by <code>is enter search</code> , and listen for search events by <code>search</code> <br />
+              通过 <code>select</code> 监听搜索类型选中事件。</div>`,
+        'en-US': `<div class="tip custom-block">Set a carriage return to trigger a search event by <code>is enter search</code> , and listen for search events by <code>search</code> <br />
               By <code>change</code> listening for search value change events when the input box is out of focus, and <code>input</code> listening for real-time search value change events<br />
-              Listen for search type selection events through <code>select</code> .</p></div>`
+              Listen for search type selection events through <code>select</code> .</div>`
       },
       'codeFiles': ['events.vue']
     }
@@ -193,6 +193,16 @@ export default {
           },
           'demoId': 'events'
         },
+        {
+          'name': 'clear',
+          'type': '() => void',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '清空值触发的回调函数',
+            'en-US': 'Callback function triggered by clearing values'
+          },
+          'demoId': 'events'
+        },
         {
           'name': 'input',
           'type': '(input: string, value: ITypeValue) => void',

package/demos/pc/app/select/clear-no-match-value-composition-api.vue

@@ -1,11 +1,15 @@
 <template>
   <div>
-    <p>场景1：单选，val 找不到匹配值，val为：{{ val }}</p>
+    <p>
+      场景1：单选，val 找不到匹配值，val为： ,<span class="val">{{ val }}</span>
+    </p>
     <tiny-select v-model="val" :clear-no-match-value="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
 
-    <p>场景2：多选，multiVal 找不到匹配值，multiVal为：{{ multiVal }}</p>
+    <p>
+      场景2：多选，multiVal 找不到匹配值，multiVal为：<span class="multi-val">{{ multiVal }}</span>
+    </p>
     <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>

package/demos/pc/app/select/clear-no-match-value.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('单选找不到匹配值', async ({ page }) => {
+  await page.goto('select#clear-no-match-value')
+  const wrap = page.locator('#clear-no-match-value')
+  const input = wrap.locator('.tiny-input__inner').nth(0)
+
+  // 验证是否清空不匹配的值
+  await expect(input).toHaveValue('')
+  await expect(wrap.locator('.val')).toHaveText('')
+})
+
+test('多选找不到匹配值', async ({ page }) => {
+  await page.goto('select#clear-no-match-value')
+  const wrap = page.locator('#clear-no-match-value')
+  const tag = wrap.locator('.tiny-select').nth(1).locator('.tiny-tag')
+
+  // 验证是否清空不匹配的值
+  await expect(tag).toHaveCount(1)
+  await expect(tag).toHaveText('双皮奶')
+  await expect(wrap.locator('.multi-val')).toHaveText('[ "选项2" ]')
+})

package/demos/pc/app/select/clear-no-match-value.vue

@@ -1,11 +1,15 @@
 <template>
   <div>
-    <p>场景1：单选，val 找不到匹配值，val为：{{ val }}</p>
+    <p>
+      场景1：单选，val 找不到匹配值，val为： ,<span class="val">{{ val }}</span>
+    </p>
     <tiny-select v-model="val" :clear-no-match-value="true">
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
 
-    <p>场景2：多选，multiVal 找不到匹配值，multiVal为：{{ multiVal }}</p>
+    <p>
+      场景2：多选，multiVal 找不到匹配值，multiVal为：<span class="multi-val">{{ multiVal }}</span>
+    </p>
     <tiny-select v-model="multiVal" :clear-no-match-value="true" multiple>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>

package/demos/pc/app/select/copy-multi-composition-api.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <p>场景1：多选复制单个标签</p>
-    <tiny-select v-model="value1" multiple tag-selectable>
+    <tiny-select ref="selectTagSelectable" v-model="value1" multiple tag-selectable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>场景2：多选一键复制所有标签</p>
-    <tiny-select v-model="value2" multiple copyable>
+    <tiny-select ref="selectCopyable" v-model="value2" multiple copyable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>场景3：多选设置复制文本分隔符</p>
@@ -13,7 +13,7 @@
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p>复制到此处：</p>
-    <tiny-input v-model="copyValue"></tiny-input>
+    <tiny-input v-model="copyValue" class="copy-value" type="text"></tiny-input>
   </div>
 </template>
 

package/demos/pc/app/select/copy-multi.spec.ts

@@ -10,7 +10,7 @@ test('多选复制单个标签', async ({ page }) => {
   const x = tagBox.x + tagBox.width
   const y = tagBox.y + tagBox.height - 5
 
-  await page.waitForTimeout(200)
+  await page.waitForTimeout(2000)
   await page.mouse.move(tagBox.x, tagBox.y)
   await page.waitForTimeout(200)
   await page.mouse.down()
@@ -36,6 +36,7 @@ test('多选一键复制所有标签', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(1)
   const copyValueInput = wrap.locator('.copy-value .tiny-input__inner')
 
+  await page.waitForTimeout(2000)
   await select.hover()
   await select.locator('.tiny-select__copy > .tiny-svg > .st0').click()
 
@@ -50,6 +51,7 @@ test('多选设置复制文本分隔符', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(2)
   const copyValueInput = wrap.locator('.copy-value .tiny-input__inner')
 
+  await page.waitForTimeout(2000)
   await select.hover()
   await select.locator('.tiny-select__copy > .tiny-svg > .st0').click()
 

package/demos/pc/app/select/copy-single-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>场景1：单选无需配置可复制</p>
-    <tiny-select ref="selectRef" v-model="value1" :options="options1"> </tiny-select>
+    <tiny-select v-model="value1" :options="options1"> </tiny-select>
     <p>场景2：单选可搜索配置 allow-copy 可复制</p>
     <tiny-select ref="selectRef" v-model="value1" :options="options1" filterable :filter-method="filter" allow-copy>
     </tiny-select>
@@ -20,7 +20,7 @@
       <tiny-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <p class="font-style">粘贴至此处：</p>
-    <tiny-input v-model="inputVal" type="text"></tiny-input>
+    <tiny-input v-model="inputVal" type="text" class="custom"></tiny-input>
   </div>
 </template>
 
@@ -39,7 +39,7 @@ const options2 = ref([])
 const value1 = ref('选项1')
 const value2 = ref('Alabama')
 const inputVal = ref('')
-const selectRef = ref()
+const selectRef = ref(null)
 const loading = ref(false)
 const list = ref([])
 

package/demos/pc/app/select/copy-single.spec.ts

@@ -4,15 +4,15 @@ test('单选无需配置可复制', async ({ page }) => {
   await page.goto('select#copy-single')
 
   const wrap = page.locator('#copy-single')
+  const select = wrap.locator('.tiny-select').nth(0)
+  const input = select.locator('.tiny-input__inner')
   const valueInput = wrap.locator('.custom  .tiny-input__inner')
+  const inputBox = await input.boundingBox()
 
-  await page.waitForTimeout(1000)
-  await page.mouse.move(393, 285)
-  await page.waitForTimeout(1000)
+  await page.waitForTimeout(2000)
+  await page.mouse.move(inputBox.x + inputBox?.width / 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.down()
-  await page.waitForTimeout(1000)
-  await page.mouse.move(345, 285)
-  await page.waitForTimeout(200)
+  await page.mouse.move(inputBox.x - 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.up()
   await page.keyboard.press('Control+C')
   await expect(valueInput).toHaveValue('')
@@ -27,15 +27,14 @@ test('单选可搜索配置 allow-copy 可复制', async ({ page }) => {
 
   const wrap = page.locator('#copy-single')
   const select = wrap.locator('.tiny-select').nth(1)
+  const input = select.locator('.tiny-input__inner')
   const valueInput = wrap.locator('.custom .tiny-input__inner')
+  const inputBox = await input.boundingBox()
 
-  await page.waitForTimeout(800)
-  await page.mouse.move(400, 350)
-  await page.waitForTimeout(800)
+  await page.waitForTimeout(2000)
+  await page.mouse.move(inputBox.x + inputBox?.width / 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.down()
-  await page.waitForTimeout(800)
-  await page.mouse.move(344, 350)
-  await page.waitForTimeout(200)
+  await page.mouse.move(inputBox.x - 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.up()
   await page.waitForTimeout(800)
 
@@ -51,15 +50,15 @@ test('单选远程搜索配置 allow-copy 可复制', async ({ page }) => {
   await page.goto('select#copy-single')
 
   const wrap = page.locator('#copy-single')
+  const select = wrap.locator('.tiny-select').nth(2)
+  const input = select.locator('.tiny-input__inner')
   const valueInput = wrap.locator('.custom  .tiny-input__inner')
+  const inputBox = await input.boundingBox()
 
   await page.waitForTimeout(1000)
-  await page.mouse.move(410, 433)
-  await page.waitForTimeout(1000)
+  await page.mouse.move(inputBox.x + inputBox?.width / 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.down()
-  await page.waitForTimeout(1000)
-  await page.mouse.move(346, 433)
-  await page.waitForTimeout(200)
+  await page.mouse.move(inputBox.x - 2, inputBox.y + inputBox?.height / 2)
   await page.mouse.up()
   await page.keyboard.press('Control+C')
   await expect(valueInput).toHaveValue('')

package/demos/pc/app/select/copy-single.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>场景1：单选无需配置可复制</p>
-    <tiny-select ref="selectRef" v-model="value1" :options="options1"> </tiny-select>
+    <tiny-select v-model="value1" :options="options1"> </tiny-select>
     <p>场景2：单选可搜索配置 allow-copy 可复制</p>
     <tiny-select ref="selectRef" v-model="value1" :options="options1" filterable :filter-method="filter" allow-copy>
     </tiny-select>

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

@@ -45,7 +45,7 @@ const value2 = ref([])
 
 const change = () => {
   Modal.message({
-    message: 'change 事件',
+    message: '触发 change 事件',
     duration: 500
   })
 }

package/demos/pc/app/select/filter-method-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>场景1：组件默认过滤</p>
-    <tiny-select v-model="value1" ref="selectRef" filterable>
+    <tiny-select v-model="value1" ref="selectRef" filterable no-match-text="No Match">
       <tiny-option
         v-for="item in options"
         v-show="!item.filter"
@@ -12,7 +12,14 @@
       </tiny-option>
     </tiny-select>
     <p>场景2：自定义过滤</p>
-    <tiny-select v-model="value2" ref="customFilterRef" filterable :filter-method="customFilterMethod" clearable>
+    <tiny-select
+      v-model="value2"
+      ref="customFilterRef"
+      filterable
+      :filter-method="customFilterMethod"
+      clearable
+      no-match-text="No Match"
+    >
       <tiny-option
         v-for="item in options"
         v-show="!item.filter"

package/demos/pc/app/select/filter-method.spec.ts

@@ -53,12 +53,12 @@ test('自定义过滤', async ({ page }) => {
 
   // 1.1 没有过滤到内容
   await input.click()
-  // 1.1.1 验证 no-match-text (待修复)
-  // await expect(page.getByText('No Match')).toBeHidden()
+  // 1.1.1 验证 no-match-text
+  await expect(page.getByText('No Match')).toBeHidden()
   await input.press('1')
   await expect(input).toHaveValue('1')
   await input.press('Enter')
-  // await expect(page.getByText('No Match')).toBeVisible()
+  await expect(page.getByText('No Match')).toBeVisible()
 
   await page.waitForTimeout(500)
   let allListItems = await option.all()

package/demos/pc/app/select/is-drop-inherit-width.spec.ts

@@ -23,11 +23,10 @@ test('下拉弹框宽度与输入框一致', async ({ page }) => {
   const select = wrap.locator('.tiny-select').nth(1)
   const dropdown = page.locator('body > .tiny-select-dropdown')
   const input = select.locator('.tiny-input__inner')
-  const option = dropdown.locator('.tiny-option')
 
   await select.click()
   const inputBox = await input.boundingBox()
-  const listitemBox = await option.first().boundingBox()
-  const result = listitemBox.width - inputBox.width
-  await expect(result).toBeCloseTo(0, 0)
+  const dropdownBox = await dropdown.boundingBox()
+  const result = dropdownBox.width - inputBox.width
+  await expect(result < 1).toBe(true)
 })

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

@@ -4,7 +4,7 @@
       <tiny-button @click="handleFocus"> 点击获取焦点 </tiny-button>
       <tiny-button @click="handleBlur"> 点击失去焦点 </tiny-button>
     </div>
-    <tiny-select v-model="value" ref="drop" filterable>
+    <tiny-select v-model="value" ref="dropRef" filterable>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
   </div>

package/demos/pc/app/select/manual-focus-blur.spec.ts

@@ -3,14 +3,15 @@ import { test, expect } from '@playwright/test'
 test('手动聚焦失焦', async ({ page }) => {
   await page.goto('select#manual-focus-blur')
   const wrap = page.locator('#manual-focus-blur')
-  const select = wrap.locator('.tiny-select').nth(2)
-  const input = select.locator('.tiny-input__inner')
   const dropdown = page.locator('body > .tiny-select-dropdown')
-  const option = dropdown.locator('.tiny-option')
   const button = wrap.locator('.tiny-button')
 
-  await button.first().click()
+  await page.waitForTimeout(2000)
+  // 手动聚焦下拉
+  await button.nth(0).click()
   await expect(dropdown).toBeVisible()
+
+  // 手动失焦收起
   await button.nth(1).click()
   await expect(dropdown).toBeHidden()
 })

package/demos/pc/app/select/nest-grid-composition-api.vue

@@ -37,7 +37,7 @@ import { ref, reactive } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 
 const value1 = ref('')
-const value2 = reactive([])
+const value2 = ref([])
 const value3 = ref('')
 
 const gridOpSingle = reactive({
@@ -74,10 +74,10 @@ const gridOpMulti = reactive({
 
 const filter = (value) => {
   if (!value) {
-    return gridOpSingle.value.data
+    return gridOpSingle.data
   }
 
-  return gridOpSingle.value.data.filter((item) => {
+  return gridOpSingle.data.filter((item) => {
     return item.city.includes(value)
   })
 }

package/demos/pc/app/select/nest-tree-composition-api.vue

@@ -1,7 +1,28 @@
 <template>
   <div class="demo-select">
+    <p>场景1：下拉树单选</p>
     <tiny-select
-      v-model="treeRadio"
+      v-model="treeValue1"
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+    <p>场景2：下拉树多选</p>
+    <tiny-select
+      v-model="treeValue2"
+      multiple
+      value-field="id"
+      text-field="label"
+      render-type="tree"
+      :tree-op="treeOp"
+    ></tiny-select>
+    <p>场景3：下拉树可搜索</p>
+    <tiny-select
+      v-model="treeValue3"
+      filterable
+      :filter-method="filter"
+      clearable
       value-field="id"
       text-field="label"
       render-type="tree"
@@ -14,7 +35,10 @@
 import { ref } from 'vue'
 import { Select as TinySelect } from '@opentiny/vue'
 
-const treeRadio = ref(10)
+const treeValue1 = ref(10)
+const treeValue2 = ref([9, 6])
+const treeValue3 = ref('')
+
 const treeOp = ref({
   data: [
     {
@@ -53,6 +77,12 @@ const treeOp = ref({
     }
   ]
 })
+
+const filter = (value, data) => {
+  if (!value) return true
+
+  return data.label.includes(value)
+}
 </script>
 
 <style scoped>