@opentiny/vue-docs 2.2.6 → 2.2.8

package/demos/pc/app/tooltip/content.spec.js

@@ -4,9 +4,23 @@ test('测试插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tooltip#content')
 
-  const button2 = page.getByRole('button', { name: '校验错误' })
-  const tooltip2 = page.getByText('该网段不可用')
+  const button1 = page.getByRole('button', { name: '鼠标悬浮到这里' }).nth(0)
+  const tooltip1 = page.getByText('这是提示内容')
+  const button2 = page.getByRole('button', { name: '鼠标悬浮到这里' }).nth(1)
+  const tooltip2 = page.getByText('1. 提示内容')
+  const button3 = page.getByRole('button', { name: '校验错误' })
+  const tooltip3 = page.getByText('该网段不可用')
+
+  await page.waitForTimeout(10)
+  await button1.hover()
+  await expect(tooltip1).toBeVisible()
+  await page.waitForTimeout(10)
 
   await button2.hover()
   await expect(tooltip2).toBeVisible()
+  await page.waitForTimeout(10)
+
+  await button3.hover()
+  await expect(tooltip3).toBeVisible()
+  await page.waitForTimeout(10)
 })

package/demos/pc/app/tooltip/control.spec.js

@@ -10,12 +10,30 @@ test('测试手动控制tooltip', async ({ page }) => {
   const disableSwitch = preview.locator('.tiny-switch').nth(2)
 
   const pop1 = page.getByText('智能提示的提示内容')
+  const pop2 = page.getByText('手动控制模式的提示内容')
+  const pop3 = page.getByText('禁用的提示内容')
 
+  // 测试visible
   await preview.getByText('内容不超长').hover()
   await expect(pop1).toBeVisible()
-  await page.waitForTimeout(50)
+  await page.waitForTimeout(20)
 
   await visibleSwitch.click()
   await preview.getByText('内容不超长').hover()
   await expect(pop1).toBeHidden()
+
+  await page.waitForTimeout(20)
+
+  // 测试manual
+  await expect(pop2).toBeHidden()
+  await manualSwitch.click()
+  await expect(pop2).toBeVisible()
+
+  await page.waitForTimeout(20)
+
+  // 测试禁用
+  await preview.getByText('我的内容很长很长').nth(2).hover()
+  await expect(pop3).toBeVisible()
+  await disableSwitch.click()
+  await expect(pop3).toBeHidden()
 })

package/demos/pc/app/tooltip/custom-popper.spec.js

@@ -4,10 +4,39 @@ test('测试是否显示箭头', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tooltip#custom-popper')
 
-  const button = page.getByRole('button', { name: '鼠标悬浮在这里' })
+  const preview = page.locator('.pc-demo-container')
+  const button = preview.getByRole('button', { name: '鼠标悬浮在这里' })
   const tip = page.getByText('我是提示内容')
+  const arrowSwitch = preview.locator('.tiny-switch').nth(0)
+  const enterableSwitch = preview.locator('.tiny-switch').nth(1)
+
   const arrow = tip.locator('div.popper__arrow')
 
+  // 测试小箭头
+  await page.waitForTimeout(20)
   await button.hover()
+  await page.waitForTimeout(20)
   await expect(arrow).toHaveCount(1)
+  await page.waitForTimeout(20)
+  await arrowSwitch.click()
+  await page.waitForTimeout(20)
+  await button.hover()
+  await expect(arrow).toHaveCount(0)
+  await page.waitForTimeout(20)
+
+  // 测试可进入
+  await tip.hover()
+  await page.waitForTimeout(20)
+  await expect(tip).toBeVisible()
+
+  await enterableSwitch.click()
+  await page.waitForTimeout(20)
+
+  await button.hover()
+  await tip.hover()
+  await page.waitForTimeout(20)
+  await expect(tip).toBeHidden()
+
+  // 测试字体
+  await expect(tip).toHaveCSS('font-size', '20px')
 })

package/demos/pc/app/tooltip/delay.spec.js

@@ -6,9 +6,31 @@ test('测试延迟显示隐藏', async ({ page }) => {
 
   const button1 = page.getByRole('button', { name: '延迟 2s 出现' })
   const tip1 = page.getByRole('tooltip', { name: '延迟 2000ms 出现' })
+  const button2 = page.getByRole('button', { name: '延迟 2s 关闭' })
+  const tip2 = page.getByRole('tooltip', { name: '延迟 2000ms 关闭' })
+  const button3 = page.getByRole('button', { name: '2s 后自动隐藏' })
+  const tip3 = page.getByRole('tooltip', { name: '2000ms后自动隐藏' })
+
   // 延迟出现
-  await page.waitForTimeout(100)
   await button1.hover()
   await page.waitForTimeout(100)
   await expect(tip1).toBeHidden()
+  await page.mouse.move(370, 320) // button1 上方
+  await page.waitForTimeout(2010)
+  await expect(tip1).toBeVisible()
+
+  // 延迟关闭
+  await page.mouse.move(500, 320) // button2 上方
+  await page.waitForTimeout(10)
+  await expect(tip2).toBeVisible()
+  await page.mouse.move(0, 0)
+  await page.waitForTimeout(2010)
+  await expect(tip2).toBeHidden()
+
+  // 自动隐藏
+  await page.mouse.move(620, 320) // button3 上方
+  await page.waitForTimeout(10)
+  await expect(tip3).toBeVisible()
+  await page.waitForTimeout(2010)
+  await expect(tip2).toBeHidden()
 })

package/demos/pc/app/tooltip/offset.spec.js

@@ -5,5 +5,28 @@ test('测试偏移量', async ({ page }) => {
   await page.goto('tooltip#offset')
 
   const tip = page.getByRole('tooltip', { name: '出现位置的偏移量' })
+  const arrow = tip.locator('.popper__arrow')
+
   await expect(tip).toBeVisible()
+
+  // 计算3个位置
+  const middle = await arrow.boundingBox()
+
+  await page.dragAndDrop('.tiny-slider__handle', '.pc-demo-container', {
+    sourcePosition: { x: 3, y: 3 },
+    targetPosition: { x: 0, y: 0 }
+  })
+  await page.waitForTimeout(10)
+  const left = await arrow.boundingBox()
+
+  await page.dragAndDrop('.tiny-slider__handle', '.pc-demo-container', {
+    sourcePosition: { x: 3, y: 3 },
+    targetPosition: { x: 600, y: 0 }
+  })
+  await page.waitForTimeout(10)
+  const right = await arrow.boundingBox()
+
+  // 测试3个位置
+  expect(left.x < middle.x)
+  expect(middle.x < right.x)
 })

package/demos/pc/app/tooltip/popper-options.spec.js

@@ -5,8 +5,11 @@ test('测试自定义popper', async ({ page }) => {
   await page.goto('tooltip#popper-options')
 
   const button = page.getByRole('button', { name: '鼠标悬浮到这里' })
-  const tooltip = page.getByRole('tooltip', { name: '提示内容' })
+  const tooltip = page.getByRole('tooltip', { name: '提示内容', includeHidden: true })
 
   await button.hover()
   await expect(tooltip).toBeVisible()
+
+  await page.mouse.move(0, 0)
+  await expect(tooltip).toHaveCount(0)
 })

package/demos/pc/app/tooltip/theme.spec.js

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/test'
 test('测试tooltip主题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tooltip#theme')
+  await page.waitForTimeout(20)
 
   await page.getByRole('button', { name: 'Dark' }).hover()
   await expect(page.getByRole('tooltip', { name: 'dark 提示文字' })).toHaveClass(/is-dark/)
@@ -24,6 +25,4 @@ test('测试tooltip主题', async ({ page }) => {
 
   await page.getByRole('button', { name: 'success' }).hover()
   await expect(page.getByRole('tooltip', { name: 'success 提示文字' })).toHaveClass(/is-success/)
-
-  await page.waitForTimeout(300)
 })

package/demos/pc/app/tooltip/transition.spec.js

@@ -10,6 +10,7 @@ test('测试自定义动画显示正常', async ({ page }) => {
   // 悬浮
   await button.hover()
   await expect(tooltip).toBeVisible()
+  await expect(tooltip).toHaveClass(/custom-transition-enter-to/)
 
   // 离开
   await page.mouse.move(0, 0)

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

@@ -5,87 +5,82 @@ test('基本用法', async ({ page }) => {
   await page.goto('transfer#basic-usage')
   const preview = page.locator('.pc-demo-container')
   // 穿梭框按钮
-  const buttons = preview.getByRole('button')
-  // 穿梭框面板
   const transferPanels = preview.locator('.tiny-transfer-panel')
-  // 左侧面板
-  const leftPanel = transferPanels.first()
-  // 右侧面板
+  const leftPanel = transferPanels.nth(0)
   const rightPanel = transferPanels.nth(1)
 
-  // 向左交换按钮应该为禁用状态
-  await expect(buttons.first()).toBeDisabled()
-  // 向右交换按钮应该为禁用状态
-  await expect(buttons.nth(1)).toBeDisabled()
+  const buttons = preview.getByRole('button')
+  const toRightBtn = buttons.nth(0)
+  const toLeftBtn = buttons.nth(1)
+
+  // 0、初始时，交换按钮应该为禁用状态
+  await expect(toRightBtn).toBeDisabled()
+  await expect(toLeftBtn).toBeDisabled()
 
-  // 从左侧面板选择多个备用项，交换至右侧面板
+  // 1、从左交换至右
   let labels = leftPanel.locator('label').filter({ hasText: '备选项 2' }).locator('span')
   // 选中"备选项2"
   await labels.nth(1).click()
-  // 判断是否有类名"is-checked"
   await expect(labels.first()).toHaveClass(/is-checked/)
+  await page.waitForTimeout(10)
 
-  labels = leftPanel.locator('label').filter({ hasText: '备选项 3' }).locator('span')
   // 选中"备选项3"
+  labels = leftPanel.locator('label').filter({ hasText: '备选项 3' }).locator('span')
   await labels.nth(1).click()
-  // 判断是否有类名"is-checked"
   await expect(labels.first()).toHaveClass(/is-checked/)
+  await page.waitForTimeout(10)
 
-  // 复选框
+  // 复选框应该为半选状态
   let checkbox = leftPanel.getByRole('paragraph').filter({ hasText: '列表 1 2 / 14' }).getByRole('checkbox')
-  // 应该为半选状态
   await expect(checkbox).toHaveClass(/is-indeterminate/)
-  // 向左侧交换的按钮应该为可用状态
-  await expect(buttons.first()).toBeEnabled()
-  // 向右侧交换的按钮应该为不可用状态
-  await expect(buttons.nth(1)).toBeDisabled()
-  // 最后点击向左侧交换按钮
-  await buttons.first().click()
-
-  // 右侧面板应该出现"备选项2"
+  // 按钮可用状态
+  await expect(toRightBtn).toBeEnabled()
+  await expect(toLeftBtn).toBeDisabled()
+
+  // 点击向左侧交换按钮
+  await toRightBtn.click()
+  await page.waitForTimeout(10)
+
+  // 检查右侧面板
   await expect(rightPanel.locator('label').filter({ hasText: '备选项 2' })).toHaveCount(1)
-  // 右侧面板应该出现"备选项3"
   await expect(rightPanel.locator('label').filter({ hasText: '备选项 3' })).toHaveCount(1)
-  // 向左侧交换的按钮应该为不可用状态
-  await expect(buttons.first()).toBeDisabled()
-  // 向右侧交换的按钮应该为不可用状态
-  await expect(buttons.nth(1)).toBeDisabled()
+  await expect(toRightBtn).toBeDisabled()
+  await expect(toLeftBtn).toBeDisabled()
+  await page.waitForTimeout(10)
+
+  // 2、从右交换至左
 
-  // 从右侧面板选择多个备用项，交换至左侧面板
-  labels = rightPanel.locator('label').filter({ hasText: '备选项 2' }).locator('span')
   // 选中"备选项2"
+  labels = rightPanel.locator('label').filter({ hasText: '备选项 2' }).locator('span')
   await labels.nth(1).click()
-  // 判断是否有类名"is-checked"
   await expect(labels.first()).toHaveClass(/is-checked/)
 
-  labels = page.locator('label').filter({ hasText: '备选项 3' }).locator('span')
   // 选中"备选项3"
+  labels = page.locator('label').filter({ hasText: '备选项 3' }).locator('span')
   await labels.nth(1).click()
-  // 判断是否有类名"is-checked"
   await expect(labels.first()).toHaveClass(/is-checked/)
+  await page.waitForTimeout(10)
 
-  // 复选框
+  // 复选框应该为半选状态
   checkbox = rightPanel.getByRole('paragraph').filter({ hasText: '列表 2 2 / 4' }).getByRole('checkbox')
-  // 应该为半选状态
   await expect(checkbox).toHaveClass(/is-indeterminate/)
-  // 向左侧交换的按钮应该为不可用状态
-  await expect(buttons.first()).toBeDisabled()
-  // 向右侧交换的按钮应该为可用状态
-  await expect(buttons.nth(1)).toBeEnabled()
+
+  // 按钮可用状态
+  await expect(toRightBtn).toBeDisabled()
+  await expect(toLeftBtn).toBeEnabled()
+
   // 点击向左侧交换按钮
-  await buttons.nth(1).click()
+  await toLeftBtn.click()
+  await page.waitForTimeout(10)
 
-  // 左侧面板应该出现"备选项2"
+  // 检查左侧面板
   await expect(leftPanel.locator('label').filter({ hasText: '备选项 2' })).toHaveCount(1)
-  // 左侧面板应该出现"备选项3"
   await expect(leftPanel.locator('label').filter({ hasText: '备选项 3' })).toHaveCount(1)
-  // 向左侧交换的按钮应该为不可用状态
-  await expect(buttons.first()).toBeDisabled()
-  // 向右侧交换的按钮应该为不可用状态
-  await expect(buttons.nth(1)).toBeDisabled()
+  await expect(toRightBtn).toBeDisabled()
+  await expect(toLeftBtn).toBeDisabled()
 
   // 全选
-  await leftPanel.locator('.tiny-checkbox__input').first().click()
-  // 显示的选中数量应该为 11
+  const allCheckbox = leftPanel.locator('.tiny-checkbox__input').first()
+  await allCheckbox.click()
   await expect(preview.getByRole('paragraph').filter({ hasText: '列表 1 11 / 14' })).toHaveCount(1)
 })

package/demos/pc/app/transfer/before-transfer.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('transfer#basic-usage')
+  const preview = page.locator('.pc-demo-container')
+  // 穿梭框按钮
+  const transferPanels = preview.locator('.tiny-transfer-panel')
+  const leftPanel = transferPanels.nth(0)
+  const rightPanel = transferPanels.nth(1)
+
+  const buttons = preview.getByRole('button')
+  const toRightBtn = buttons.nth(0)
+
+  // 1、从左交换至右
+  let labels = leftPanel.locator('label').filter({ hasText: '备选项 2' }).locator('span')
+  // 选中"备选项2"
+  await labels.nth(1).click()
+  await expect(labels.first()).toHaveClass(/is-checked/)
+  await page.waitForTimeout(10)
+
+  // 点击向左侧交换按钮
+  await toRightBtn.click()
+  await page.waitForTimeout(10)
+
+  await page.waitForTimeout(2100)
+  await expect(rightPanel.locator('label').filter({ hasText: '备选项 2' })).toHaveCount(1)
+})

package/demos/pc/app/transfer/custom-btns.spec.ts

@@ -14,7 +14,7 @@ test('自定义按钮测试', async ({ page }) => {
   await expect(buttons.first()).toBeEnabled()
   await expect(buttons.nth(3)).toBeEnabled()
 
-  //全部移动到右侧
+  // 全部移动到右侧
   await buttons.first().click()
   await expect(rightPanel.locator('label').filter({ hasText: '列表 2 0 / 13' })).toHaveCount(1)
   await expect(buttons.first()).toBeDisabled()

package/demos/pc/app/transfer/custom-filter-composition-api.vue

@@ -1,16 +1,20 @@
 <template>
-  <tiny-transfer
-    v-model="value"
-    :data="data"
-    filterable
-    :filter-method="filterMethod"
-    filter-placeholder="请输入城市拼音"
-  ></tiny-transfer>
+  <div>
+    <tiny-button style="margin-bottom: 20px" @click="clearQuery">重置查询</tiny-button>
+    <tiny-transfer
+      ref="transferRef"
+      v-model="value"
+      :data="data"
+      filterable
+      :filter-method="filterMethod"
+      filter-placeholder="请输入城市拼音"
+    ></tiny-transfer>
+  </div>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Transfer as TinyTransfer } from '@opentiny/vue'
+import { Transfer as TinyTransfer, Button as TinyButton } from '@opentiny/vue'
 
 const generateData = () => {
   const data = []
@@ -30,8 +34,13 @@ const generateData = () => {
 
 const data = ref(generateData())
 const value = ref([1, 4])
+const transferRef = ref()
 
 function filterMethod(query, item) {
   return item.pinyin.includes(query)
 }
+function clearQuery() {
+  transferRef.value.clearQuery('left')
+  transferRef.value.clearQuery('right')
+}
 </script>

package/demos/pc/app/transfer/custom-filter.vue

@@ -1,19 +1,24 @@
 <template>
-  <tiny-transfer
-    v-model="value"
-    :data="data"
-    filterable
-    :filter-method="filterMethod"
-    filter-placeholder="请输入城市拼音"
-  ></tiny-transfer>
+  <div>
+    <tiny-button style="margin-bottom: 20px" @click="clearQuery">重置查询</tiny-button>
+    <tiny-transfer
+      ref="transferRef"
+      v-model="value"
+      :data="data"
+      filterable
+      :filter-method="filterMethod"
+      filter-placeholder="请输入城市拼音"
+    ></tiny-transfer>
+  </div>
 </template>
 
 <script lang="jsx">
-import { Transfer } from '@opentiny/vue'
+import { Transfer, Button } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTransfer: Transfer
+    TinyTransfer: Transfer,
+    TinyButton: Button
   },
   data() {
     const generateData = () => {
@@ -40,6 +45,10 @@ export default {
   methods: {
     filterMethod(query, item) {
       return item.pinyin.includes(query)
+    },
+    clearQuery() {
+      this.$refs.transferRef.clearQuery('left')
+      this.$refs.transferRef.clearQuery('right')
     }
   }
 }

package/demos/pc/app/transfer/custom-render-composition-api.vue

@@ -41,7 +41,7 @@ const value = ref([1, 4])
 function renderDataItem(h, option) {
   return (
     <span>
-      <span class="red">{option.id}</span> - {option.text}- by jsx
+      <span class="red">{option.id}</span> - {option.text} - by jsx
     </span>
   )
 }

package/demos/pc/app/transfer/custom-render.spec.ts

@@ -5,8 +5,9 @@ test('判断是否可以选中自定义数据项', async ({ page }) => {
   await page.goto('transfer#custom-render')
 
   const preview = page.locator('.pc-demo-container')
-  const jsxNode = preview.getByText('备选项 2 -by jsx')
+  const jsxNode = preview.getByText('备选项 2 - by jsx')
   const slotNode = preview.getByText('备选项 2 - by slot')
+
   await expect(jsxNode).toHaveCount(1)
   await expect(slotNode).toHaveCount(1)
 })

package/demos/pc/app/transfer/custom-render.vue

@@ -49,7 +49,7 @@ export default {
     renderDataItem(h, option) {
       return (
         <span>
-          <span class="red">{option.id}</span> - {option.text} -by jsx
+          <span class="red">{option.id}</span> - {option.text} - by jsx
         </span>
       )
     }

package/demos/pc/app/transfer/custom-titles.spec.ts

@@ -10,5 +10,12 @@ test('自定义列表标题', async ({ page }) => {
   const rightPanel = transferPanels.nth(1)
 
   await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/所有数据列表/)
+  await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/未勾选 \/ 共14/)
   await expect(rightPanel.locator('.tiny-checkbox__label').first()).toHaveText(/已选数据列表/)
+  await expect(rightPanel.locator('.tiny-checkbox__label').first()).toHaveText(/未勾选 \/ 共2/)
+
+  // 全选
+  const allCheckbox = leftPanel.locator('.tiny-checkbox__input').first()
+  await allCheckbox.click()
+  await expect(leftPanel.locator('.tiny-checkbox__label').first()).toHaveText(/已选择11 \/ 共14/)
 })

package/demos/pc/app/transfer/drop-config.spec.ts

@@ -22,7 +22,7 @@ test('尝试拖拽', async ({ page }) => {
   await expect(rightPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 2 0 / 5' })).toHaveCount(1)
   await expect(leftPanel.locator('.tiny-transfer-panel__header').filter({ hasText: '列表 1 0 / 11' })).toHaveCount(1)
 
-  //尝试拖拽右侧某一项至左侧面板
+  // 尝试拖拽右侧某一项至左侧面板
   const dragDiv2 = rightPanel.locator('label').filter({ hasText: '备选项 3' })
   await page.waitForTimeout(100)
   await dragDiv2.hover()

package/demos/pc/app/transfer/nested-table.spec.ts

@@ -14,7 +14,7 @@ test('判断数据交换', async ({ page }) => {
   await expect(rightPanel.getByText('列表 2 1 / 8')).toHaveCount(1)
   await page.waitForTimeout(50)
 
-  //判断是否可以将右侧数据交换到左侧面板
+  // 判断是否可以将右侧数据交换到左侧面板
   await preview.locator('.defaultButton > button:nth-child(2)').click()
   await expect(leftPanel.getByText('列表 1 0 / 13')).toHaveCount(1)
   await page.waitForTimeout(50)

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

@@ -88,13 +88,15 @@ export default {
           组件支持显示一个输入框，去过滤显示在左右列表的数据项。<br>
           通过 <code>filterable</code> 属性开启左右侧列表的搜索功能，默认是根据label内容过滤。<br>
           通过 <code>filter-placeholder</code> 属性自定义左右搜索框占位符。<br>
-          通过 <code>filter-method</code> 钩子函数，可自定义左右列表搜索的方法。
+          通过 <code>filter-method</code> 钩子函数，可自定义左右列表搜索的方法。<br>
+          调用 <code>clearQuery()</code> 方法,可清空左右侧列表的搜索框，参数为 left 或者 right 。<br>
         `,
         'en-US': `
           At the top of the left and right lists, you can display an input field to filter the data items that display the left and right lists. <br>
           Use the <code>filterable</code> attribute to enable the search function of the left and right lists, which by default filter based on the label content. <br>
           Use the <code>filter-placeholder</code> attribute to define the placeholder for the left and right search boxes. <br>
-          The <code>filter-method</code> hook allows you to customize the way you search the left and right lists.
+          The <code>filter-method</code> hook allows you to customize the way you search the left and right lists.<br>
+          The <code>clearQuery()</code> method clears the search box in the left and right lists with either the left or right arguments.<br>
         `
       },
       'codeFiles': ['custom-filter.vue']
@@ -114,7 +116,6 @@ export default {
       },
       'codeFiles': ['default-checked.vue']
     },
-
     {
       'demoId': 'drop-config',
       'name': { 'zh-CN': '可拖拽', 'en-US': 'Drag left and right' },
@@ -136,16 +137,7 @@ export default {
       },
       'codeFiles': ['target-order.vue']
     },
-    {
-      'demoId': 'manual-clear-query',
-      'name': { 'zh-CN': '手动清空搜索框', 'en-US': 'Clear the search box manually' },
-      'desc': {
-        'zh-CN': '调用 <code>clearQuery()</code> 方法可清空左右侧列表的搜索框，参数为 left 或者 right 。',
-        'en-US':
-          'The <code>clearQuery()</code> method clears the search box in the left and right lists with either the left or right arguments.'
-      },
-      'codeFiles': ['manual-clear-query.vue']
-    },
+
     {
       'demoId': 'before-transfer',
       'name': { 'zh-CN': '穿梭拦截', 'en-US': 'Clear the search box manually' },
@@ -208,7 +200,7 @@ export default {
           'demoId': 'basic-usage'
         },
         {
-          'name': 'modelValue',
+          'name': 'v-model / modelValue',
           'type': 'string[]',
           'defaultValue': '[]',
           'desc': {
@@ -280,6 +272,7 @@ export default {
           'name': 'format',
           'type': 'object',
           'defaultValue':
+            // eslint-disable-next-line no-template-curly-in-string
             "{ <br>&nbsp; noChecked:'${checked}/${total}', <br>&nbsp; hasChecked: '${checked}/${total}' <br>}",
           'desc': { 'zh-CN': '列表顶部勾选状态文案', 'en-US': 'Check the status copy at the top of the list' },
           'demoId': 'custom-titles'
@@ -525,7 +518,7 @@ export default {
           'type': '(name: string) => void',
           'defaultValue': '',
           'desc': { 'zh-CN': '清空某个面板的搜索关键词', 'en-US': 'Clear the search keywords of a panel.' },
-          'demoId': 'manual-clear-query'
+          'demoId': 'custom-filter'
         }
       ]
     }

package/demos/pc/app/tree/filter-view-composition-api.vue

@@ -28,10 +28,11 @@
       :show-auxi="showAuxi === 'show'"
     >
       <!-- 屏蔽默认的后缀图标 -->
-      <template #suffix="{ node }"> <div></div> </template>
+      <template #suffix> <div></div> </template>
     </tiny-tree>
   </div>
 </template>
+
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { Tree as TinyTree, RadioGroup as TinyRadioGroup, Radio as TinyRadio, Input as TinyInput } from '@opentiny/vue'
@@ -62,9 +63,10 @@ const data = ref([
 ])
 
 function inputChange() {
-  treeRef.value.filter(this.filterText)
+  treeRef.value.filter(filterText.value)
 }
 
+// eslint-disable-next-line unused-imports/no-unused-vars
 function filterNodeMethod(text, data, node) {
   return data.label.includes(text)
 }

package/demos/pc/app/tree/filter-view.vue

@@ -28,7 +28,7 @@
       :show-auxi="showAuxi === 'show'"
     >
       <!-- 屏蔽默认的后缀图标 -->
-      <template #suffix="{ node }"> <div></div> </template>
+      <template #suffix> <div></div> </template>
     </tiny-tree>
   </div>
 </template>
@@ -74,6 +74,7 @@ export default {
     inputChange() {
       this.$refs.treeRef.filter(this.filterText)
     },
+    // eslint-disable-next-line unused-imports/no-unused-vars
     filterNodeMethod(text, data, node) {
       return data.label.includes(text)
     }