docs(mention): fix render label

This commit is contained in:
07akioni 2021-07-25 15:26:55 +08:00
parent 9bdab592cb
commit ff3ba909b0
3 changed files with 18 additions and 19 deletions

View File

@ -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
])
}

View File

@ -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
])
}

View File

@ -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>),