diff --git a/examples/sites/demos/apis/tree-menu.js b/examples/sites/demos/apis/tree-menu.js index 3156c6841..ec0e59e7a 100644 --- a/examples/sites/demos/apis/tree-menu.js +++ b/examples/sites/demos/apis/tree-menu.js @@ -397,6 +397,17 @@ export default { }, mode: ['pc'], pcDemo: 'text-wrap' + }, + { + name: 'clearable', + type: 'boolean', + defaultValue: 'false', + desc: { + 'zh-CN': '搜索框是否可清空', + 'en-US': 'Can the search box be cleared' + }, + mode: ['pc'], + pcDemo: 'clearable' } ], events: [ diff --git a/examples/sites/demos/pc/app/tree-menu/clearable-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/clearable-composition-api.vue new file mode 100644 index 000000000..91c528468 --- /dev/null +++ b/examples/sites/demos/pc/app/tree-menu/clearable-composition-api.vue @@ -0,0 +1,192 @@ + + + + + diff --git a/examples/sites/demos/pc/app/tree-menu/clearable.spec.ts b/examples/sites/demos/pc/app/tree-menu/clearable.spec.ts new file mode 100644 index 000000000..4e04ce2f1 --- /dev/null +++ b/examples/sites/demos/pc/app/tree-menu/clearable.spec.ts @@ -0,0 +1,20 @@ +import type { Page } from '@playwright/test' +import { test, expect } from '@playwright/test' + +const getIcon = (page: Page) => page.locator('#clearable').getByRole('img').nth(1) + +test('搜索框可清除', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + + await page.goto('tree-menu#clearable') + + await page.locator('#clearable').getByRole('textbox', { name: '请输入内容进行筛选' }).click() + await page.locator('#clearable').getByRole('textbox', { name: '请输入内容进行筛选' }).click() + await page.locator('#clearable').getByRole('textbox', { name: '请输入内容进行筛选' }).fill('123') + await expect(page.getByText('暂无数据')).toBeVisible() + const icon = getIcon(page) + await icon.click() + const val = await page.locator('#clearable').getByRole('textbox', { name: '请输入内容进行筛选' }).inputValue() + expect(val).toBe('') + await expect(page.getByText('暂无数据')).not.toBeVisible() +}) diff --git a/examples/sites/demos/pc/app/tree-menu/clearable.vue b/examples/sites/demos/pc/app/tree-menu/clearable.vue new file mode 100644 index 000000000..11202680a --- /dev/null +++ b/examples/sites/demos/pc/app/tree-menu/clearable.vue @@ -0,0 +1,182 @@ + + + diff --git a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js index a66b38364..303fc1208 100644 --- a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js +++ b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js @@ -346,6 +346,19 @@ export default { '

Event description

\n

node-click: Listen for events when a node is clicked.

\n

current-change: Listen for events where the currently selected node changes.

\n

node-expand: Listen for events that node expands.

\n

node-collapse: Listen for events when a node is folded up.

\n

check-change: When checked, listen for events related to changes in checked nodes.

\n
\n' }, codeFiles: ['events.vue'] + }, + { + demoId: 'clearable', + name: { + 'zh-CN': '搜索框是否可清空', + 'en-US': 'Can the search box be cleared' + }, + desc: { + 'zh-CN': '通过设置clearable属性来标明是否允许显示搜索框清空按钮', + 'en-US': + 'Indicate whether to allow the search box clear button to be displayed by setting theclearableproperty' + }, + codeFiles: ['clearable.vue'] } ] } diff --git a/packages/renderless/src/tree-menu/vue.ts b/packages/renderless/src/tree-menu/vue.ts index fb0db4574..eec8857dd 100644 --- a/packages/renderless/src/tree-menu/vue.ts +++ b/packages/renderless/src/tree-menu/vue.ts @@ -91,7 +91,8 @@ export const renderless = ( treeStyle: computed(() => api.computedTreeStyle()), defaultExpandedKeys: computed(() => props.defaultExpandedKeys && props.defaultExpandedKeys.length ? props.defaultExpandedKeys : state.currentKey - ) + ), + clearable: computed(() => props.clearable) }) Object.assign(api, { diff --git a/packages/renderless/types/tree-menu.type.ts b/packages/renderless/types/tree-menu.type.ts index 981e17501..7fa04a2eb 100644 --- a/packages/renderless/types/tree-menu.type.ts +++ b/packages/renderless/types/tree-menu.type.ts @@ -1,4 +1,4 @@ -import type { ExtractPropTypes } from 'vue' +import type { ComputedRef, ExtractPropTypes } from 'vue' import type { treeMenuProps } from '@/tree-menu/src' import type { initData, @@ -31,6 +31,7 @@ export interface ITreeMenuState { data?: unknown[] filterText: string isCollapsed: boolean + clearable: ComputedRef } export type ITreeMenuProps = ExtractPropTypes export interface ITreeMenuApi { diff --git a/packages/vue/src/tree-menu/src/index.ts b/packages/vue/src/tree-menu/src/index.ts index f3e3ba1c7..a3056c047 100644 --- a/packages/vue/src/tree-menu/src/index.ts +++ b/packages/vue/src/tree-menu/src/index.ts @@ -81,6 +81,10 @@ export const treeMenuProps = { menuCollapsible: { type: Boolean, default: false + }, + clearable: { + type: Boolean, + default: false } } diff --git a/packages/vue/src/tree-menu/src/pc.vue b/packages/vue/src/tree-menu/src/pc.vue index 030fc801c..e42f88fd4 100644 --- a/packages/vue/src/tree-menu/src/pc.vue +++ b/packages/vue/src/tree-menu/src/pc.vue @@ -28,6 +28,7 @@ v-model="state.filterText" :placeholder="placeholder || t('ui.treeMenu.placeholder')" :prefix-icon="searchIcon" + :clearable="state.clearable" />