mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-11 13:10:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(mention): fix render label

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/mention/demos/enUS/render-label.demo.md
View File

@ -1,6 +1,6 @@
# Render Label # 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 ```html
<n-mention :options="options" :render-label="renderLabel" /> <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 ```js
import { defineComponent, h } from 'vue' import { defineComponent, h } from 'vue'
import { NIcon } from 'naive-ui' import { NAvatar } from 'naive-ui'
import { HappyOutline as HappyIcon } from '@vicons/ionicons5'
export default defineComponent({ export default defineComponent({
setup () { setup () {
@ -30,11 +29,12 @@ export default defineComponent({
], ],
renderLabel: (option) => renderLabel: (option) =>
h('div', { style: 'display: flex; align-items: center;' }, [ h('div', { style: 'display: flex; align-items: center;' }, [
h( h(NAvatar, {
NIcon, style: 'margin-right: 8px;',
{ style: 'margin-right: 5px' }, size: 24,
{ default: () => h(HappyIcon) } round: true,
), src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
}),
option.value option.value
]) ])
} }

16
src/mention/demos/zhCN/render-label.demo.md
View File

@ -1,6 +1,6 @@
# 控制菜单渲染 # 控制菜单渲染
如果使用了 `render-label` 批量渲染，输入匹配则会根据 `value` 进行匹配 如果选项的 `label` 不是字符串，默认情况下会使用 `value` 进行匹配。
```html ```html
<n-mention :options="options" :render-label="renderLabel" /> <n-mention :options="options" :render-label="renderLabel" />
@ -8,8 +8,7 @@
```js ```js
import { defineComponent, h } from 'vue' import { defineComponent, h } from 'vue'
import { NIcon } from 'naive-ui' import { NAvatar } from 'naive-ui'
import { HappyOutline as HappyIcon } from '@vicons/ionicons5'
export default defineComponent({ export default defineComponent({
setup () { setup () {
@ -30,11 +29,12 @@ export default defineComponent({
], ],
renderLabel: (option) => renderLabel: (option) =>
h('div', { style: 'display: flex; align-items: center;' }, [ h('div', { style: 'display: flex; align-items: center;' }, [
h( h(NAvatar, {
NIcon, style: 'margin-right: 8px;',
{ style: 'margin-right: 5px' }, size: 24,
{ default: () => h(HappyIcon) } round: true,
), src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
}),
option.value option.value
]) ])
} }

5
src/mention/src/Mention.tsx
View File

@ -13,6 +13,7 @@ import {
import { createTreeMate } from 'treemate' import { createTreeMate } from 'treemate'
import { VBinder, VFollower, VTarget, FollowerInst } from 'vueuc' import { VBinder, VFollower, VTarget, FollowerInst } from 'vueuc'
import { useIsMounted, useMergedState } from 'vooks' import { useIsMounted, useMergedState } from 'vooks'
import { RenderLabel } from '../../_internal/select-menu/src/interface'
import type { Size as InputSize } from '../../input/src/interface' import type { Size as InputSize } from '../../input/src/interface'
import { NInput } from '../../input' import { NInput } from '../../input'
import type { InputInst } from '../../input' import type { InputInst } from '../../input'
@ -30,10 +31,8 @@ import type { ThemeProps } from '../../_mixins'
import { mentionLight } from '../styles' import { mentionLight } from '../styles'
import type { MentionTheme } from '../styles' import type { MentionTheme } from '../styles'
import { getRelativePosition } from './utils' import { getRelativePosition } from './utils'
import style from './styles/index.cssr'
import type { MentionOption } from './interface' import type { MentionOption } from './interface'
import { RenderLabel } from '../../_internal/select-menu/src/interface' import style from './styles/index.cssr'
const mentionProps = { const mentionProps = {
...(useTheme.props as ThemeProps<MentionTheme>), ...(useTheme.props as ThemeProps<MentionTheme>),