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(tree-select): add render tag

Browse Source
This commit is contained in:
07akioni 2022-06-29 03:12:14 +08:00
parent f02dd14eb1
commit 9f3a8a25f7
6 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/select/demos/enUS/render-tag.demo.vue
View File

@ -25,6 +25,9 @@ export default defineComponent({
{
type: option.type as 'success' | 'warning' | 'error',
closable: true,
onMousedown: (e: FocusEvent) => {
e.preventDefault()
},
onClose: (e: MouseEvent) => {
e.stopPropagation()
handleClose()

3
src/select/demos/zhCN/render-tag.demo.vue
View File

@ -25,6 +25,9 @@ export default defineComponent({
{
type: option.type as 'success' | 'warning' | 'error',
closable: true,
onMousedown: (e: FocusEvent) => {
e.preventDefault()
},
onClose: (e: MouseEvent) => {
e.stopPropagation()
handleClose()

1
src/tree-select/demos/enUS/index.demo-entry.md
View File

@ -53,6 +53,7 @@ debug.vue
| render-prefix | `(info: { option: TreeSelectOption, checked: boolean, selected: boolean }) => VNodeChild` | `undefined` | Render function of all the options' prefix. | NEXT_VERSION |
| render-suffix | `(info: { option: TreeSelectOption, checked: boolean, selected: boolean }) => VNodeChild` | `undefined` | Render function of all the options' suffix. | NEXT_VERSION |
| render-switcher-icon | `() => VNodeChild` | `undefined` | Render function of option switcher icon. | NEXT_VERSION |
| render-tag | `(props: { option: TreeSelectOption, handleClose: () => void }) => VNodeChild` | `undefined` | Render function for each option tag. | NEXT_VERSION |
| separator | `string` | `' / '` | Option value separator. | |
| show-path | `boolean` | `false` | Whether to also show the hierarchy of selected nodes in the label. | |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size. | |

1
src/tree-select/demos/zhCN/index.demo-entry.md
View File

@ -56,6 +56,7 @@ render-debug.vue
| render-prefix | `(info: { option: TreeSelectOption, checked: boolean, selected: boolean }) => VNodeChild` | `undefined` | 节点前缀的渲染函数 | NEXT_VERSION |
| render-suffix | `(info: { option: TreeSelectOption, checked: boolean, selected: boolean }) => VNodeChild` | `undefined` | 节点后缀的渲染函数 | NEXT_VERSION |
| render-switcher-icon | `() => VNodeChild` | `undefined` | 节点展开开关的渲染函数 | NEXT_VERSION |
| render-tag | `(props: { option: TreeSelectOption, handleClose: () => void }) => VNodeChild` | `undefined` | 控制标签的渲染 | NEXT_VERSION |
| separator | `string` | `' / '` | 数据分隔符 | |
| show-path | `boolean` | `false` | 是否在选择器中显示选项路径 | |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 组件尺寸 | |

16
src/tree-select/demos/zhCN/render-debug.demo.vue
View File

@ -6,6 +6,7 @@
<n-tree-select
:options="options"
default-value="Drive My Car"
multiple
:node-props="nodeProps"
:render-label="renderXxx"
:render-prefix="renderXxx"
@ -36,10 +37,21 @@ export default defineComponent({
const renderXxx: TreeSelectRenderLabel = ({ option }) => {
return option.label || ''
}
const renderTag: TreeSelectRenderTag = ({ option }) => {
const renderTag: TreeSelectRenderTag = ({ option, handleClose }) => {
console.log('renderTag', option)
return h(
NTag,
{ type: 'error' },
{
type: 'error',
closable: !option.disabled,
onMousedown: (e: FocusEvent) => {
e.preventDefault()
},
onClose: (e) => {
e.stopPropagation()
handleClose()
}
},
{
default: () => option.label || ''
}

3
src/tree-select/src/TreeSelect.tsx
View File

@ -580,7 +580,7 @@ export default defineComponent({
}
const selectionRenderTagRef = computed(() => {
const { renderTag } = props
if (!renderTag) return renderTag
if (!renderTag) return undefined
return function selectionRenderTag ({
option,
handleClose
@ -826,6 +826,7 @@ export default defineComponent({
renderPrefix={this.renderPrefix}
renderSuffix={this.renderSuffix}
renderSwitcherIcon={this.renderSwitcherIcon}
nodeProps={this.nodeProps}
virtualScroll={
this.consistentMenuWidth && this.virtualScroll
}