diff --git a/examples/sites/demos/apis/search.js b/examples/sites/demos/apis/search.js index 3ce823793c..42534bb2da 100644 --- a/examples/sites/demos/apis/search.js +++ b/examples/sites/demos/apis/search.js @@ -218,6 +218,34 @@ export default { mode: ['pc'], pcDemo: 'events' }, + { + name: 'collapse', + type: '() => void', + defaultValue: '', + desc: { + 'zh-CN': 'mini模式的搜索框收回时触发的回调函数', + 'en-US': 'The callback function triggered when the search box in mini mode is retracted' + }, + meta: { + stable: '3.26.0' + }, + mode: ['pc'], + pcDemo: 'events' + }, + { + name: 'expand', + type: '() => void', + defaultValue: '', + desc: { + 'zh-CN': 'mini模式的搜索框展开时触发的回调函数', + 'en-US': 'The callback function triggered when the search box in mini mode expands' + }, + meta: { + stable: '3.26.0' + }, + mode: ['pc'], + pcDemo: 'events' + }, { name: 'input', typeAnchorName: 'ITypeValue', diff --git a/examples/sites/demos/pc/app/search/events.spec.ts b/examples/sites/demos/pc/app/search/events.spec.ts index 6fe7581c3b..68cd1b0746 100644 --- a/examples/sites/demos/pc/app/search/events.spec.ts +++ b/examples/sites/demos/pc/app/search/events.spec.ts @@ -9,7 +9,7 @@ test('事件是否正常触发', async ({ page }) => { const button = page.locator('.tiny-search__input-btn > a').first() await button.click() - await expect(modal).toHaveCount(1) + await expect(modal).toHaveCount(2) await input.first().fill('111') await button.click() await modal.getByText('111').isVisible() diff --git a/examples/sites/demos/pc/app/search/events.vue b/examples/sites/demos/pc/app/search/events.vue index 26451efb84..c02827ea94 100644 --- a/examples/sites/demos/pc/app/search/events.vue +++ b/examples/sites/demos/pc/app/search/events.vue @@ -15,6 +15,9 @@

类型选中事件


+

mini模式展开和收起事件

+
+ @@ -58,6 +61,12 @@ export default { }, select(value) { TinyModal.message({ message: `${value.text}`, status: 'info' }) + }, + handleCollapse() { + TinyModal.message({ message: '收回', status: 'info' }) + }, + handleExpand() { + TinyModal.message({ message: '展开', status: 'info' }) } } } diff --git a/examples/sites/demos/pc/app/search/slot-prefix-suffix.spec.ts b/examples/sites/demos/pc/app/search/slot-prefix-suffix.spec.ts index f4503ea1dd..8411d8635b 100644 --- a/examples/sites/demos/pc/app/search/slot-prefix-suffix.spec.ts +++ b/examples/sites/demos/pc/app/search/slot-prefix-suffix.spec.ts @@ -21,7 +21,7 @@ test('disabled', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('search#slot-prefix-suffix') - await page.locator('.tiny-button').last().click() + await page.getByRole('button', { name: '点击切换为“禁用状态”' }).click() const searchLocators = await page.locator('.tiny-search').all() for (const search of searchLocators) { diff --git a/examples/sites/demos/pc/app/search/webdoc/search.js b/examples/sites/demos/pc/app/search/webdoc/search.js index b0362fdc7a..fe4d047e53 100644 --- a/examples/sites/demos/pc/app/search/webdoc/search.js +++ b/examples/sites/demos/pc/app/search/webdoc/search.js @@ -112,10 +112,18 @@ export default { 'en-US': 'Search event' }, desc: { - 'zh-CN': - '
通过 is-enter-search 设置回车触发搜索事件， search 监听搜索事件；
\n 通过 change 监听输入框失焦时搜索值改变事件，input 监听搜索值实时改变事件；
\n 通过 select 监听搜索类型选中事件。
', - 'en-US': - '
Set a carriage return to trigger a search event by is enter search , and listen for search events by search
\n By change listening for search value change events when the input box is out of focus, and input listening for real-time search value change events
\n Listen for search type selection events through select .
' + 'zh-CN': ` +
通过 is-enter-search 设置回车触发搜索事件， search 监听搜索事件；
\n + 通过 change 监听输入框失焦时搜索值改变事件，input 监听搜索值实时改变事件；
\n + 通过 select 监听搜索类型选中事件；
\n + 通过 expand 监听 mini 搜索框展开事件；
\n + 通过 collapse 监听 mini 搜索框收起事件。
`, + 'en-US': `
+ Set carriage return to trigger search event throughis-enter-search, andsearchto listen for search events;
\n + Monitor the search value change event when the input box loses focus throughchange, and monitor the real-time search value change event throughinput;
\n + Monitor the search type selection event throughselect;
\n + Monitor mini search box expansion events throughexpand;
\n + Monitor the mini search box collapse event throughcollapse.
` }, codeFiles: ['events.vue'] } diff --git a/packages/renderless/src/search/index.ts b/packages/renderless/src/search/index.ts index f0cae716ca..0d1cfe2501 100644 --- a/packages/renderless/src/search/index.ts +++ b/packages/renderless/src/search/index.ts @@ -59,6 +59,7 @@ export const searchClick = event.preventDefault() if (props.mini && state.collapse) { state.collapse = false + emit('expand') } else { emit('search', state.searchValue, state.currentValue) } @@ -74,7 +75,7 @@ export const searchEnterKey = } export const clickOutside = - ({ parent, props, state }: Pick) => + ({ parent, props, state, emit }: Pick) => (event: Event) => { // 优先使用 event.composedPath() 来判断事件源是否在组件内部，以兼容 Shadow DOM。 // 在 Shadow DOM 中，事件冒泡穿过 Shadow Root 后，event.target 会被重定向为 host 元素， @@ -82,7 +83,10 @@ export const clickOutside = const path = event?.composedPath && event.composedPath() if (path ? !path.includes(parent.$el) : !parent.$el.contains(event.target)) { state.show = false - props.mini && !state.currentValue && (state.collapse = true) + if (props.mini && !state.currentValue && !state.collapse) { + state.collapse = true + emit('collapse') + } } } diff --git a/packages/renderless/src/search/vue.ts b/packages/renderless/src/search/vue.ts index b1d3854eba..c9aee79035 100644 --- a/packages/renderless/src/search/vue.ts +++ b/packages/renderless/src/search/vue.ts @@ -103,7 +103,7 @@ export const renderless = ( handleChange: handleChange({ emit, state }), showSelector: showSelector({ vm, state }), searchClick: searchClick({ emit, props, state }), - clickOutside: clickOutside({ parent, props, state }), + clickOutside: clickOutside({ parent, props, state, emit }), emitInput: emitInput({ emit }), ...formatSearchTypes.api } as ISearchApi diff --git a/packages/vue/src/search/src/pc.vue b/packages/vue/src/search/src/pc.vue index e74e698661..7874ee6268 100644 --- a/packages/vue/src/search/src/pc.vue +++ b/packages/vue/src/search/src/pc.vue @@ -116,7 +116,7 @@ export default defineComponent({ 'size', 'disabled' ], - emits: ['change', 'search', 'update:modelValue', 'clear', 'select', 'input'], + emits: ['change', 'search', 'update:modelValue', 'clear', 'select', 'input', 'expand', 'collapse'], components: { IconChevronDown: iconChevronDown(), IconSearch: iconSearch(),