mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-11 13:10:26 +08:00
docs(mention): fix render label
This commit is contained in:
parent
9bdab592cb
commit
ff3ba909b0
@ -1,6 +1,6 @@
|
||||
# Render Label
|
||||
|
||||
If you use `render-label` batch rendering, input matching will be performed according to `value`.
|
||||
If `option.label` is not a string, `option.value` will be used to match option by default.
|
||||
|
||||
```html
|
||||
<n-mention :options="options" :render-label="renderLabel" />
|
||||
@ -8,8 +8,7 @@ If you use `render-label` batch rendering, input matching will be performed acco
|
||||
|
||||
```js
|
||||
import { defineComponent, h } from 'vue'
|
||||
import { NIcon } from 'naive-ui'
|
||||
import { HappyOutline as HappyIcon } from '@vicons/ionicons5'
|
||||
import { NAvatar } from 'naive-ui'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
@ -30,11 +29,12 @@ export default defineComponent({
|
||||
],
|
||||
renderLabel: (option) =>
|
||||
h('div', { style: 'display: flex; align-items: center;' }, [
|
||||
h(
|
||||
NIcon,
|
||||
{ style: 'margin-right: 5px' },
|
||||
{ default: () => h(HappyIcon) }
|
||||
),
|
||||
h(NAvatar, {
|
||||
style: 'margin-right: 8px;',
|
||||
size: 24,
|
||||
round: true,
|
||||
src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
|
||||
}),
|
||||
option.value
|
||||
])
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
# 控制菜单渲染
|
||||
|
||||
如果使用了 `render-label` 批量渲染,输入匹配则会根据 `value` 进行匹配
|
||||
如果选项的 `label` 不是字符串,默认情况下会使用 `value` 进行匹配。
|
||||
|
||||
```html
|
||||
<n-mention :options="options" :render-label="renderLabel" />
|
||||
@ -8,8 +8,7 @@
|
||||
|
||||
```js
|
||||
import { defineComponent, h } from 'vue'
|
||||
import { NIcon } from 'naive-ui'
|
||||
import { HappyOutline as HappyIcon } from '@vicons/ionicons5'
|
||||
import { NAvatar } from 'naive-ui'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
@ -30,11 +29,12 @@ export default defineComponent({
|
||||
],
|
||||
renderLabel: (option) =>
|
||||
h('div', { style: 'display: flex; align-items: center;' }, [
|
||||
h(
|
||||
NIcon,
|
||||
{ style: 'margin-right: 5px' },
|
||||
{ default: () => h(HappyIcon) }
|
||||
),
|
||||
h(NAvatar, {
|
||||
style: 'margin-right: 8px;',
|
||||
size: 24,
|
||||
round: true,
|
||||
src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
|
||||
}),
|
||||
option.value
|
||||
])
|
||||
}
|
||||
|
@ -13,6 +13,7 @@ import {
|
||||
import { createTreeMate } from 'treemate'
|
||||
import { VBinder, VFollower, VTarget, FollowerInst } from 'vueuc'
|
||||
import { useIsMounted, useMergedState } from 'vooks'
|
||||
import { RenderLabel } from '../../_internal/select-menu/src/interface'
|
||||
import type { Size as InputSize } from '../../input/src/interface'
|
||||
import { NInput } from '../../input'
|
||||
import type { InputInst } from '../../input'
|
||||
@ -30,10 +31,8 @@ import type { ThemeProps } from '../../_mixins'
|
||||
import { mentionLight } from '../styles'
|
||||
import type { MentionTheme } from '../styles'
|
||||
import { getRelativePosition } from './utils'
|
||||
|
||||
import style from './styles/index.cssr'
|
||||
import type { MentionOption } from './interface'
|
||||
import { RenderLabel } from '../../_internal/select-menu/src/interface'
|
||||
import style from './styles/index.cssr'
|
||||
|
||||
const mentionProps = {
|
||||
...(useTheme.props as ThemeProps<MentionTheme>),
|
||||
|
Loading…
Reference in New Issue
Block a user