Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

为auto-complete添加类似select组件的render-option等功能 #1629

Closed
Rhilip opened this issue Nov 20, 2021 · 1 comment · Fixed by #1661
Closed

为auto-complete添加类似select组件的render-option等功能 #1629

Rhilip opened this issue Nov 20, 2021 · 1 comment · Fixed by #1661
Assignees
Labels
feature request New feature or request

Comments

@Rhilip
Copy link

Rhilip commented Nov 20, 2021

This function solves the problem (这个功能解决的问题)

在使用auto-complete组件作为输入框使用时,我们希望能为其渲染出不同的选项信息。
功能类似 Github或者豆瓣的搜索输入框,见
Github
Douban

但直接使用 [{label: () => h(), value: ''}] 还是 [{label: '', render: () => h(), value: ''}] 都会出现意料外的情况
(鉴于我不太会用codepen,所以我建立了一个最小实现repo: https://github.com/Rhilip/bugreport-naiveui-autocomplete ,构建: https://rhilip.github.io/bugreport-naiveui-autocomplete/

如实现例:

  • 当使用 [{label: () => h(), value: ''}] 并点击时,v-model会被更新成 类似 () => (0,vue__WEBPACK_IMPORTED_MODULE_0__.h)(naive_ui__WEBPACK_IMPORTED_MODULE_1__["default"], null, {default: () => valueRef1.value v}) 的字符串
  • 当使用 [{label: '', render: () => h(), value: ''}] 时,整个下拉选择框不能实现点击生效

image

update at 2021.11.20 PM19 :
目前,配合使用 [{label: () => h(), value: ''}] 作为options以及auto-complete组件的@selectclear-after-select 等prop 以及hack的手法,基本实现了期望
image

Expected API (期望的 API)

能提供一种方式如slot,或者类似 select 组件的render-option等props,来支持对选项的自定义渲染

@github-actions github-actions bot added the feature request New feature or request label Nov 20, 2021
@07akioni
Copy link
Collaborator

07akioni commented Nov 22, 2021

@Talljack 看看现在的功能能做么

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants