diff --git a/src/popup/_example/plugin.vue b/src/popup/_example/plugin.vue new file mode 100644 index 000000000..d035238ac --- /dev/null +++ b/src/popup/_example/plugin.vue @@ -0,0 +1,28 @@ + + + 已渲染的节点1 + 已渲染的节点2 + + + + diff --git a/src/popup/index.ts b/src/popup/index.ts index 39f9254ba..8317c7436 100644 --- a/src/popup/index.ts +++ b/src/popup/index.ts @@ -7,10 +7,10 @@ import './style'; export type PopupProps = TdPopupProps; export * from './type'; +export * from './plugin'; -export const Popup = withInstall(mapProps( - ['visible'], - { model: { prop: 'visible', event: 'visible-change' } }, -)(_Popup)); +export const Popup = withInstall( + mapProps(['visible'], { model: { prop: 'visible', event: 'visible-change' } })(_Popup), +); export default Popup; diff --git a/src/popup/plugin.tsx b/src/popup/plugin.tsx new file mode 100644 index 000000000..bb950fc9d --- /dev/null +++ b/src/popup/plugin.tsx @@ -0,0 +1,210 @@ +import Vue, { VNode } from 'vue'; +import { createPopper, Instance } from '@popperjs/core'; +import { + getAttach, once, on, off, +} from '../utils/dom'; +import props from './props'; +import { getClassPrefixMixins } from '../config-provider/config-receiver'; +import { renderTNodeJSX } from '../utils/render-tnode'; +import { getPopperPlacement, triggers } from './utils'; +import mixins from '../utils/mixins'; + +import type { TNode, ClassName } from '../common'; +import type { TdPopupProps } from './type'; + +export interface PopupPluginApi { + config: TdPopupProps; +} +const classPrefixMixins = getClassPrefixMixins('popup'); + +let popperInstance: Instance; +let overlayInstance: HTMLElement; +let timeout: NodeJS.Timeout; +let triggerEl: HTMLElement; + +const triggerType = (triggerProps: string): Record<(typeof triggers)[number], boolean> => triggers.reduce( + (map, trigger) => ({ + ...map, + [trigger]: triggerProps.includes(trigger), + }), + {} as any, +); + +const Overlay = mixins(classPrefixMixins).extend({ + name: 'TPopupOverlay', + data() { + return { + visibleState: false, + contentClicked: false, + }; + }, + props: { + ...props, + triggerEl: HTMLElement, + }, + computed: { + hasTrigger(): Record<(typeof triggers)[number], boolean> { + return triggerType(this.trigger); + }, + overlayClasses(): ClassName { + return [ + `${this.componentName}__content`, + { + [`${this.componentName}__content--text`]: this.content === 'string', + [`${this.componentName}__content--arrow`]: this.showArrow, + [this.commonStatusClassName.disabled]: this.disabled, + }, + this.overlayInnerClassName, + ]; + }, + }, + + methods: { + handleDocumentClick(e: Event): void { + if (triggerEl?.contains(e.target as Node)) return; + if (this.contentClicked) { + setTimeout(() => { + this.contentClicked = false; + }); + } else { + if (this.destroyOnClose) { + this.visibleState = false; + } + popperInstance?.destroy(); + popperInstance = null; + triggerEl = null; + } + }, + handleMouseLeave(): void { + if (this.destroyOnClose) { + this.visibleState = false; + } + popperInstance?.destroy(); + popperInstance = null; + }, + handleMouseEnter(): void { + clearTimeout(timeout); + }, + }, + created() { + this.visibleState = true; + }, + mounted() { + setTimeout(() => { + on(document, 'click', this.handleDocumentClick); + }); + }, + beforeDestroy() { + off(document, 'click', this.handleDocumentClick); + }, + render(h): VNode { + const content = renderTNodeJSX(this, 'content'); + + const hidePopup = this.hideEmptyPopup && ['', undefined, null].includes(content); + const { + handleMouseLeave, handleMouseEnter, visibleState, hasTrigger, + } = this; + const renderNode = h( + 'div', + { + class: [this.componentName, this.overlayClassName], + ref: 'popper', + style: [ + hidePopup && { visibility: 'hidden', pointerEvents: 'none' }, + { zIndex: this.zIndex }, + this.overlayStyle, + ], + on: { + mousedown: () => { + this.contentClicked = true; + }, + ...(hasTrigger.hover && { + mouseenter: handleMouseEnter, + mouseleave: handleMouseLeave, + }), + }, + }, + [ + h( + 'div', + { + ref: 'overlay', + class: this.overlayClasses, + style: this.overlayInnerStyle, + }, + [content, this.showArrow && h('div', { class: `${this.componentName}__arrow` })], + ), + ], + ); + return visibleState ? ( + + {renderNode} + + ) : null; + }, +}); + +const removeOverlayInstance = () => { + if (overlayInstance) { + overlayInstance.remove(); + overlayInstance = null; + } + if (popperInstance) { + popperInstance.destroy(); + popperInstance = null; + } +}; + +const triggerPopupPlugin = (trigger: string, content: TNode, popupProps: TdPopupProps) => { + const hasTrigger = triggerType(popupProps.trigger || 'hover'); + const currentTriggerEl = getAttach(trigger); + if (triggerEl && hasTrigger.click) { + return; + } + triggerEl = currentTriggerEl; + removeOverlayInstance(); + + let attach = getAttach(popupProps.attach); + + const delay = [].concat(popupProps.delay ?? [250, 150]); + const closeDelay = delay[1] ?? delay[0]; + if (attach === document.body) { + // don't allow mount on body directly + const popupDom = document.createElement('div'); + document.body.appendChild(popupDom); + attach = popupDom; + } + + overlayInstance = new Overlay({ + propsData: { + ...popupProps, + content, + triggerEl, + }, + }).$mount(attach).$el as HTMLElement; + + if (hasTrigger.hover) { + const mouseoutEvent = () => { + timeout = setTimeout(removeOverlayInstance, closeDelay); + }; + once(triggerEl, 'mouseleave', mouseoutEvent); + } else if (hasTrigger.focus) { + const focusoutEvent = () => { + timeout = setTimeout(removeOverlayInstance, closeDelay); + }; + once(triggerEl, 'focusout', focusoutEvent); + } + + popperInstance = createPopper(triggerEl, overlayInstance, { + placement: getPopperPlacement(popupProps.placement as TdPopupProps['placement']), + ...popupProps.popperOptions, + }); +}; + +Vue.prototype.$popup = triggerPopupPlugin; + +declare module 'vue/types/vue' { + interface Vue { + $popup: PopupPluginApi; + } +} diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md index 42d9ce5e1..63d6f990e 100644 --- a/src/popup/popup.en-US.md +++ b/src/popup/popup.en-US.md @@ -35,3 +35,13 @@ name | params | description scroll | `(context: { e: WheelEvent })` | \- scroll-to-bottom | `(context: { e: WheelEvent })` | \- visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }``type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent``type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'` + +### PopupPlugin + +support `this.$popup` + +name | params | default | description +-- | -- | -- | -- +content | String / Slot / Function | - | required。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) +popupProps | Object | - | \- +triggerElement | String | - | required diff --git a/src/popup/popup.md b/src/popup/popup.md index c710eec8c..c00a5678b 100644 --- a/src/popup/popup.md +++ b/src/popup/popup.md @@ -1,5 +1,13 @@ :: BASE_DOC :: +### 通过插件方式调用Popup + +通过插件方式调用Popup,用于将Popup渲染在已有节点的场景,同时该方式不论如何调用都只会挂载在一个节点上,用于减少页面上的Popup的渲染节点。 + +使用方式:`this.$popup(triggerElement, content, popupProps)` + +{{ plugin }} + ## API ### Popup Props @@ -35,3 +43,13 @@ onVisibleChange | Function | | TS 类型:`(visible: boolean, context: PopupVi scroll | `(context: { e: WheelEvent })` | 下拉选项滚动事件 scroll-to-bottom | `(context: { e: WheelEvent })` | 下拉滚动触底事件,常用于滚动到底执行具体业务逻辑 visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 当浮层隐藏或显示时触发,`trigger=document` 表示点击非浮层元素触发;`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }``type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent``type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'` + +### PopupPlugin + +同时也支持 `this.$popup`。 + +参数名称 | 参数类型 | 参数默认值 | 参数说明 +-- | -- | -- | -- +content | String / Slot / Function | - | 必需。气泡框的内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) +popupProps | Object | - | 透传气泡框/浮层的属性 +triggerElement | String | - | 必需。触发气泡框/浮层的元素,传入选择器即可 diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx index c3b0a0b7f..5427cadba 100644 --- a/src/popup/popup.tsx +++ b/src/popup/popup.tsx @@ -1,5 +1,5 @@ import { VNodeDirective } from 'vue'; -import { createPopper, Placement } from '@popperjs/core'; +import { createPopper } from '@popperjs/core'; import { on, off, once } from '../utils/dom'; import { renderTNodeJSX, renderContent } from '../utils/render-tnode'; import { getIEVersion } from '../utils/helper'; @@ -10,32 +10,12 @@ import Container from './container'; import { getClassPrefixMixins } from '../config-provider/config-receiver'; import mixins from '../utils/mixins'; import { emitEvent } from '../utils/event'; +import { getPopperPlacement, attachListeners, triggers } from './utils'; const classPrefixMixins = getClassPrefixMixins('popup'); -const triggers = ['click', 'hover', 'focus', 'context-menu'] as const; const injectionKey = '__T_POPUP'; -function getPopperPlacement(placement: TdPopupProps['placement']) { - return placement.replace(/-(left|top)$/, '-start').replace(/-(right|bottom)$/, '-end') as Placement; -} - -function attachListeners(elm: Element) { - const offs: Array<() => void> = []; - return { - add(type: K, listener: (ev: HTMLElementEventMap[K]) => void) { - on(elm, type, listener); - offs.push(() => { - off(elm, type, listener); - }); - }, - clean() { - offs.forEach((handler) => handler?.()); - offs.length = 0; - }, - }; -} - export default mixins(classPrefixMixins).extend({ name: 'TPopup', @@ -88,7 +68,7 @@ export default mixins(classPrefixMixins).extend({ this.overlayInnerClassName, ]; }, - hasTrigger(): Record { + hasTrigger(): Record<(typeof triggers)[number], boolean> { return triggers.reduce( (map, trigger) => ({ ...map, @@ -201,7 +181,6 @@ export default mixins(classPrefixMixins).extend({ this.popper.update(); return; } - this.popper = createPopper(triggerEl, popperEl, { modifiers: getIEVersion() > 9 @@ -380,7 +359,6 @@ export default mixins(classPrefixMixins).extend({ const ref = renderContent(this, 'default', 'triggerElement'); const content = renderTNodeJSX(this, 'content'); const hidePopup = this.hideEmptyPopup && ['', undefined, null].includes(content); - const overlay = visible || !destroyOnClose ? h( 'div', @@ -429,7 +407,6 @@ export default mixins(classPrefixMixins).extend({ ], ) : null; - return ( , default: 'top', }, /** popper 初始化配置,详情参考 https://popper.js.org/docs/ */ diff --git a/src/popup/type.ts b/src/popup/type.ts index 75050ddab..5b883a175 100644 --- a/src/popup/type.ts +++ b/src/popup/type.ts @@ -6,6 +6,8 @@ import { TNode, ClassName, Styles, AttachNode } from '../common'; +export type PopupMethod = (triggerElement: string, content: string | TNode, popupProps?: object) => void; + export interface TdPopupProps { /** * 制定挂载节点。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body diff --git a/src/popup/utils.ts b/src/popup/utils.ts new file mode 100644 index 000000000..d9ee1d2b8 --- /dev/null +++ b/src/popup/utils.ts @@ -0,0 +1,27 @@ +import { Placement } from '@popperjs/core'; +import { TdPopupProps } from './type'; +import { on, off } from '../utils/dom'; + +const triggers = ['click', 'hover', 'focus', 'context-menu'] as const; + +function getPopperPlacement(placement: TdPopupProps['placement']) { + return placement.replace(/-(left|top)$/, '-start').replace(/-(right|bottom)$/, '-end') as Placement; +} + +function attachListeners(elm: Element) { + const offs: Array<() => void> = []; + return { + add(type: K, listener: (ev: HTMLElementEventMap[K]) => void) { + on(elm, type, listener); + offs.push(() => { + off(elm, type, listener); + }); + }, + clean() { + offs.forEach((handler) => handler?.()); + offs.length = 0; + }, + }; +} + +export { getPopperPlacement, attachListeners, triggers }; diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 4ee07c50f..1bafc545b 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -34003,7 +34003,7 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/dialog.vue csr test ./src/config-provider/_example/dialog.vue csr test ./src/config-provider/_example/dialog.vue csr test ./src/config-provider/_example/others.vue class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/form/_example/disabled.vue 1`] = ` /> - - - - - - - csr test ./src/popup/_example/placement.vue 1`] = ` `; +exports[`csr snapshot test > csr test ./src/popup/_example/plugin.vue 1`] = ` + + + + + 已渲染的节点1 + + + + + + + 已渲染的节点2 + + + + +`; + exports[`csr snapshot test > csr test ./src/popup/_example/style.vue 1`] = ` csr test ./src/textarea/_example/maxlength.vue 1`] placeholder="请输入描述文案,文本长度最多20,maxlength=20" unselectable="off" /> - - 0/20 - + + 这里可以放一些提示文字 + + + 0/20 + + csr test ./src/textarea/_example/maxlength.vue 1`] placeholder="请输入描述文案,最多20字符(一个汉字占两个字符长度),maxcharacter=20" unselectable="off" /> - - 0/20 - + + 0/20 + + @@ -133621,9 +133646,13 @@ exports[`csr snapshot test > csr test ./src/textarea/_example/type.vue 1`] = ` unselectable="off" /> - 这是普通文本提示 + + 这是普通文本提示 + @@ -133638,9 +133667,13 @@ exports[`csr snapshot test > csr test ./src/textarea/_example/type.vue 1`] = ` unselectable="off" /> - 校验通过文本提示 + + 校验通过文本提示 + @@ -133655,9 +133688,13 @@ exports[`csr snapshot test > csr test ./src/textarea/_example/type.vue 1`] = ` unselectable="off" /> - 校验不通过文本提示 + + 校验不通过文本提示 + @@ -133672,122 +133709,12 @@ exports[`csr snapshot test > csr test ./src/textarea/_example/type.vue 1`] = ` unselectable="off" /> - 校验存在严重问题文本提示 - - - - -`; - -exports[`csr snapshot test > csr test ./src/time-picker/_example/base.vue 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + 校验存在严重问题文本提示 @@ -133795,18 +133722,11 @@ exports[`csr snapshot test > csr test ./src/time-picker/_example/base.vue 1`] = `; -exports[`csr snapshot test > csr test ./src/time-picker/_example/clearable.vue 1`] = ` +exports[`csr snapshot test > csr test ./src/time-picker/_example/base.vue 1`] = ` - - - 具备清空按钮 - - @@ -133860,13 +133780,6 @@ exports[`csr snapshot test > csr test ./src/time-picker/_example/clearable.vue 1 - - - 禁止清空按钮 - - @@ -133923,188 +133836,7 @@ exports[`csr snapshot test > csr test ./src/time-picker/_example/clearable.vue 1 `; -exports[`csr snapshot test > csr test ./src/time-picker/_example/disabled.vue 1`] = ` - - - - 禁用整个选择器 - - - - - - - - - - - - - - - - - - - - - - - 禁用指定时间 - - - - - - - - - - - - - - - - - - - - - -`; - -exports[`csr snapshot test > csr test ./src/time-picker/_example/format.vue 1`] = ` - - - - - - - - - - - - - - - - -`; - -exports[`csr snapshot test > csr test ./src/time-picker/_example/hide-clear-button.vue 1`] = ` +exports[`csr snapshot test > csr test ./src/time-picker/_example/clearable.vue 1`] = ` csr test ./src/time-picker/_example/hide-clear-butt class="t-time-picker" > csr test ./src/time-picker/_example/hide-clear-butt csr test ./src/time-picker/_example/hide-clear-butt `; -exports[`csr snapshot test > csr test ./src/time-picker/_example/hm.vue 1`] = ` +exports[`csr snapshot test > csr test ./src/time-picker/_example/disabled.vue 1`] = ` csr test ./src/time-picker/_example/hm.vue 1`] = ` class="t-space-item" > - 时分选择 + 禁用整个选择器 csr test ./src/time-picker/_example/hm.vue 1`] = ` class="t-time-picker" > csr test ./src/time-picker/_example/hm.vue 1`] = ` csr test ./src/time-picker/_example/hm.vue 1`] = ` class="t-space-item" > - 毫秒选择 + 禁用指定时间 csr test ./src/time-picker/_example/hm.vue 1`] = ` class="t-time-picker" > csr test ./src/time-picker/_example/hm.vue 1`] = ` csr test ./src/time-picker/_example/hm.vue 1`] = ` `; -exports[`csr snapshot test > csr test ./src/time-picker/_example/hms.vue 1`] = ` +exports[`csr snapshot test > csr test ./src/time-picker/_example/format.vue 1`] = ` @@ -134412,7 +134145,7 @@ exports[`csr snapshot test > csr test ./src/time-picker/_example/hms.vue 1`] = ` `; -exports[`csr snapshot test > csr test ./src/time-picker/_example/keyboard.vue 1`] = ` +exports[`csr snapshot test > csr test ./src/time-picker/_example/hide-clear-button.vue 1`] = ` csr test ./src/time-picker/_example/keyboard.vue 1` class="t-space-item" > - 允许输入 + 具备清空按钮 csr test ./src/time-picker/_example/keyboard.vue 1` class="t-input__wrap" > csr test ./src/time-picker/_example/keyboard.vue 1` autocomplete="" class="t-input__inner" placeholder="" + readonly="readonly" type="text" - unselectable="off" + unselectable="on" /> csr test ./src/time-picker/_example/keyboard.vue 1` class="t-space-item" > - 禁止输入 + 禁止清空按钮 csr test ./src/time-picker/_example/keyboard.vue 1` class="t-time-picker" > csr test ./src/time-picker/_example/keyboard.vue 1` csr test ./src/time-picker/_example/keyboard.vue 1` `; -exports[`csr snapshot test > csr test ./src/time-picker/_example/panel.vue 1`] = ` +exports[`csr snapshot test > csr test ./src/time-picker/_example/hm.vue 1`] = ` csr test ./src/time-picker/_example/panel.vue 1`] = - - - - - - 单独使用面板 - - - - - - - 组合其他组件使用 - - - - - - - - - - - - - + + 时分选择 + - -`; - -exports[`csr snapshot test > csr test ./src/time-picker/_example/range.vue 1`] = ` - - - - - - - - - - - - - - + class="t-input__prefix" + /> + csr test ./src/time-picker/_example/range.vue 1`] = - -`; - -exports[`csr snapshot test > csr test ./src/time-picker/_example/show-steps.vue 1`] = ` - + + 毫秒选择 + + + - - - - - - - + + + + + + + + `; -exports[`csr snapshot test > csr test ./src/time-picker/_example/step.vue 1`] = ` +exports[`csr snapshot test > csr test ./src/time-picker/_example/hms.vue 1`] = ` + + + + + + + + + + + + + + + + +`; + +exports[`csr snapshot test > csr test ./src/time-picker/_example/keyboard.vue 1`] = ` + + + + 允许输入 + + + + + + + + + + + + + + + + + + + + + + + 禁止输入 + + + + + + + + + + + + + + + + + + + + + +`; + +exports[`csr snapshot test > csr test ./src/time-picker/_example/panel.vue 1`] = ` + + + + + + + + 单独使用面板 + + + + + + + 组合其他组件使用 + + + + + + + + + + + + + + + +`; + +exports[`csr snapshot test > csr test ./src/time-picker/_example/range.vue 1`] = ` + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + +`; + +exports[`csr snapshot test > csr test ./src/time-picker/_example/show-steps.vue 1`] = ` + + + + + + + + + + + + + + + + +`; + +exports[`csr snapshot test > csr test ./src/time-picker/_example/step.vue 1`] = ` @@ -141315,7 +141356,349 @@ exports[`csr snapshot test > csr test ./src/transfer/_example/tree.vue 1`] = ` - + + + + + + + + + + + + 1 + + + + + + + + + + 1.1 + + + + + + + + + + + + + + 1.2 + + + + + + + + + + + + + + 1.2.1 + + + + + + + + + + 1.2.1.1 + + + + + + + + + + 1.2.1.2 + + + + + + + + + + + + + + 2 + + + + + + + + + + 2.1 + + + + + + + + + + 2.2 + + + + @@ -141537,12 +141920,13 @@ exports[`csr snapshot test > csr test ./src/tree/_example/activable.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > @@ -141579,7 +141963,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/activable.vue 1`] = ` @@ -141602,7 +141986,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/activable.vue 1`] = ` @@ -141625,7 +142009,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/activable.vue 1`] = ` @@ -141662,7 +142046,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/activable.vue 1`] = ` @@ -141685,7 +142069,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/activable.vue 1`] = ` @@ -141724,12 +142108,13 @@ exports[`csr snapshot test > csr test ./src/tree/_example/base.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > @@ -141766,7 +142151,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/base.vue 1`] = ` @@ -141803,7 +142188,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/base.vue 1`] = ` @@ -141840,7 +142225,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/base.vue 1`] = ` @@ -142065,6 +142450,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/checkable.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/controlled.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/data.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/disabled.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > @@ -143912,7 +144301,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -143929,7 +144318,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -143958,7 +144347,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -143975,7 +144364,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -143990,7 +144379,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144007,7 +144396,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144022,7 +144411,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144039,7 +144428,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144068,7 +144457,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144085,7 +144474,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144100,7 +144489,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144117,7 +144506,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144132,7 +144521,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144149,7 +144538,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144178,7 +144567,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144195,7 +144584,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144210,7 +144599,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144227,7 +144616,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144242,7 +144631,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144304,12 +144693,13 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > @@ -144337,7 +144727,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` > @@ -144354,7 +144744,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144383,7 +144773,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144400,7 +144790,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144414,7 +144804,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` > @@ -144431,7 +144821,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144445,7 +144835,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` > @@ -144462,7 +144852,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144491,7 +144881,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144508,7 +144898,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144522,7 +144912,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` > @@ -144539,7 +144929,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144553,7 +144943,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` > @@ -144570,7 +144960,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144598,7 +144988,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` > @@ -144615,7 +145005,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144630,7 +145020,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144647,7 +145037,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` @@ -144661,7 +145051,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/disabled.vue 1`] = ` > @@ -144693,6 +145083,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/draggable.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/expand-all.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > @@ -145216,7 +145608,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-all.vue 1`] = ` @@ -145253,7 +145645,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-all.vue 1`] = ` @@ -145276,7 +145668,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-all.vue 1`] = ` @@ -145299,7 +145691,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-all.vue 1`] = ` @@ -145336,7 +145728,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-all.vue 1`] = ` @@ -145359,7 +145751,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-all.vue 1`] = ` @@ -145382,7 +145774,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-all.vue 1`] = ` @@ -145419,7 +145811,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-all.vue 1`] = ` @@ -145442,7 +145834,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-all.vue 1`] = ` @@ -145477,12 +145869,13 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-level.vue 1`] = class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > @@ -145519,7 +145912,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-level.vue 1`] = @@ -145556,7 +145949,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-level.vue 1`] = @@ -145593,7 +145986,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-level.vue 1`] = @@ -145630,7 +146023,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-level.vue 1`] = @@ -145653,7 +146046,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-level.vue 1`] = @@ -145770,12 +146163,13 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-mutex.vue 1`] = class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > @@ -145812,7 +146206,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-mutex.vue 1`] = @@ -145860,34 +146254,119 @@ exports[`csr snapshot test > csr test ./src/tree/_example/filter.vue 1`] = ` - - - - filter: - - + + + + + + + + filter: + + + + + + + + + + + - + + 允许折叠 + + + + + + + + + - + + + + 可选 + + + + + + + + + + + + csr test ./src/tree/_example/filter.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/icon.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > @@ -146043,7 +146524,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/icon.vue 1`] = ` @@ -146095,12 +146576,13 @@ exports[`csr snapshot test > csr test ./src/tree/_example/icon.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > @@ -146132,7 +146614,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/icon.vue 1`] = ` @@ -146187,12 +146669,13 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > @@ -146223,7 +146706,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` style="position: relative;" > - value: t81, label: 1 + value: t424, label: 1 @@ -146231,7 +146714,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` @@ -146248,7 +146731,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` style="position: relative;" > - value: t82, label: 1.1 + value: t425, label: 1.1 @@ -146256,7 +146739,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` @@ -146273,7 +146756,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` style="position: relative;" > - value: t83, label: 1.2 + value: t426, label: 1.2 @@ -146281,7 +146764,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` @@ -146312,7 +146795,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` style="position: relative;" > - value: t84, label: 2 + value: t427, label: 2 @@ -146320,7 +146803,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` @@ -146337,7 +146820,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` style="position: relative;" > - value: t85, label: 2.1 + value: t428, label: 2.1 @@ -146345,7 +146828,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` @@ -146362,7 +146845,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` style="position: relative;" > - value: t86, label: 2.2 + value: t429, label: 2.2 @@ -146385,12 +146868,13 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > @@ -146418,7 +146902,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` > @@ -146431,7 +146915,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` - label: 1, value: t87 + label: 1, value: t430 @@ -146439,7 +146923,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` @@ -146453,7 +146937,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` > @@ -146466,7 +146950,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` - label: 1.1, value: t88 + label: 1.1, value: t431 @@ -146474,7 +146958,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` @@ -146488,7 +146972,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` > @@ -146501,7 +146985,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` - label: 1.2, value: t89 + label: 1.2, value: t432 @@ -146509,7 +146993,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` @@ -146537,7 +147021,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` > @@ -146550,7 +147034,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` - label: 2, value: t90 + label: 2, value: t433 @@ -146558,7 +147042,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` @@ -146572,7 +147056,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` > @@ -146585,7 +147069,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` - label: 2.1, value: t91 + label: 2.1, value: t434 @@ -146593,7 +147077,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` @@ -146607,7 +147091,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` > @@ -146620,7 +147104,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` - label: 2.2, value: t92 + label: 2.2, value: t435 @@ -146760,6 +147244,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/lazy.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/line.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/line.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/line.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/load.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/load.vue 1`] = ` exports[`csr snapshot test > csr test ./src/tree/_example/operations.vue 1`] = ` csr test ./src/tree/_example/operations.vue 1`] = ` > - + Render: @@ -149197,12 +149682,12 @@ exports[`csr snapshot test > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > - + Scope Slot: @@ -149290,11 +149772,9 @@ exports[`csr snapshot test > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > - + API: @@ -149639,7 +150101,6 @@ exports[`csr snapshot test > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > csr test ./src/tree/_example/operations.vue 1`] = ` > * 相关信息通过控制台输出 @@ -149994,6 +150442,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/performance.vue 1`] = class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/state.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/sync.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/transition.vue 1`] = ` class="t-tree__list" enteractiveclass="t-tree__item--enter-active" leaveactiveclass="t-tree__item--leave-active" + style="transform: translateY(0px);" tag="div" > csr test ./src/tree/_example/vscroll.vue 1`] = ` - 展开动画 + 动画 csr test ./src/tree/_example/vscroll.vue 1`] = ` - 启用虚拟滚动 + 可选 csr test ./src/tree/_example/vscroll.vue 1`] = ` - - - - - - - - - - - - t1 - + 可操作 - + + - - - 添加子节点 - - - - - 删除 - - + + - + + + - - - - - - - - - - t2 - + 滚动模式 - + + - + - 添加子节点 - - - + class="t-radio-button__input" + /> - 删除 + 普通滚动 - - - - - - - - - - - - t3 - - - - - + + + - 添加子节点 + 虚拟滚动 - - + + + - 删除 + lazy模式 - + - + + + - - - - - - t4 - - - + + + - - - 添加子节点 - - - + + + - - 删除 - - + + 切换滚动模式后需要刷新页面 + + + - + - - - - - - - - t5 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - - - - - t6 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t7 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t8 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t9 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - - - - - t10 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t11 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t12 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t13 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - - - - t14 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - - - - - t15 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t16 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t17 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t18 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - - - - - t19 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t20 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t21 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t22 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - - - - - t23 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t24 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t25 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t26 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - - - - t27 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - - - - - t28 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t29 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t30 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t31 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - - - - - t32 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t33 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t34 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t35 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - - - - - t36 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t37 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t38 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - - - - - - - - t39 - - - - - - - 添加子节点 - - - - - 删除 - - - - - - + + + + + `; diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap index e2a209529..49de96016 100644 --- a/test/snap/__snapshots__/ssr.test.js.snap +++ b/test/snap/__snapshots__/ssr.test.js.snap @@ -278,7 +278,7 @@ exports[`ssr snapshot test > renders ./src/config-provider/_example/global.vue c exports[`ssr snapshot test > renders ./src/config-provider/_example/input.vue correctly 1`] = `""`; -exports[`ssr snapshot test > renders ./src/config-provider/_example/others.vue correctly 1`] = `"User NamePassword0 / 20content 1content 2content 3content 4content 5content 6content 7content 8content 9content 10content 11content 12content 13content 14content 15content 16content 17content 18content 19content 200 / 0Empty DataFeature TagFeature TagFeature TagFeature TagDepartment ADepartment BFirst StepYou need to click the blue buttonSecond StepFill your base information into the formError StepSomething Wrong! Custom Error Icon!4Last StepYou haven't finish this step.图片加载中"`; +exports[`ssr snapshot test > renders ./src/config-provider/_example/others.vue correctly 1`] = `"User NamePassword0 / 20content 1content 2content 3content 4content 5content 6content 7content 8content 9content 10content 11content 12content 13content 14content 15content 16content 17content 18content 19content 200 / 0Empty DataFeature TagFeature TagFeature TagFeature TagDepartment ADepartment BFirst StepYou need to click the blue buttonSecond StepFill your base information into the formError StepSomething Wrong! Custom Error Icon!4Last StepYou haven't finish this step.图片加载中"`; exports[`ssr snapshot test > renders ./src/config-provider/_example/pagination.vue correctly 1`] = `"Total 36 items10 / page1234jump to/ 4 "`; @@ -386,7 +386,7 @@ exports[`ssr snapshot test > renders ./src/form/_example/clear-validate.vue corr exports[`ssr snapshot test > renders ./src/form/_example/custom-validator.vue correctly 1`] = `"用户名密码同一个校验方法可输出不同的错误信息和类型,依次输入:1234 观察变化确认密码自定义异步校验方法提交重置"`; -exports[`ssr snapshot test > renders ./src/form/_example/disabled.vue correctly 1`] = `" 是否禁用表单 姓名学院寄件地址收件地址日期个人简介短信接受性别男女课程语文数学英语绩点头像请选择单张图片文件上传提交重置"`; +exports[`ssr snapshot test > renders ./src/form/_example/disabled.vue correctly 1`] = `" 是否禁用表单 姓名学院寄件地址收件地址日期个人简介短信接受性别男女课程语文数学英语绩点头像请选择单张图片文件上传提交重置"`; exports[`ssr snapshot test > renders ./src/form/_example/error-message.vue correctly 1`] = `" 使用表单默认校验信息 表单统一配置校验信息 用户名这里可以展示一段说明文字个人简介一句话介绍自己密码邮箱性别男女课程语文数学英语体育学院入学时间个人网站提交重置清空校验结果"`; @@ -725,6 +725,8 @@ exports[`ssr snapshot test > renders ./src/popup/_example/disabled.vue correctly exports[`ssr snapshot test > renders ./src/popup/_example/placement.vue correctly 1`] = `" top top-left top-right bottom bottom-left bottom-right left left-top left-bottom right right-top right-bottom "`; +exports[`ssr snapshot test > renders ./src/popup/_example/plugin.vue correctly 1`] = `"已渲染的节点1已渲染的节点2"`; + exports[`ssr snapshot test > renders ./src/popup/_example/style.vue correctly 1`] = `"自定义浮层类名固定浮层宽度浮层最大宽度浮层和触发元素同宽"`; exports[`ssr snapshot test > renders ./src/popup/_example/trigger.vue correctly 1`] = `"悬浮时触发(默认)点击时触发右击时触发"`; @@ -988,7 +990,7 @@ exports[`ssr snapshot test > renders ./src/table/_example/multiple-sort.vue corr exports[`ssr snapshot test > renders ./src/table/_example/pagination.vue correctly 1`] = `"跨分页选中当前页选中序号申请人申请状态签署方式申请时间6王芳审批过期纸质签署2022-02-017贾明审批通过电子签署2022-03-018张三审批失败纸质签署2022-04-019王芳审批过期纸质签署2022-01-0110贾明审批通过电子签署2022-02-01共 59 项数据5 条/页1234512跳至/ 12 页"`; -exports[`ssr snapshot test > renders ./src/table/_example/pagination-ajax.vue correctly 1`] = `"申请人申请状态联系方式邮箱共 0 项数据10 条/页1跳至/ 1 页"`; +exports[`ssr snapshot test > renders ./src/table/_example/pagination-ajax.vue correctly 1`] = `"申请人申请状态联系方式邮箱共 0 项数据10 条/页1跳至/ 1 页"`; exports[`ssr snapshot test > renders ./src/table/_example/select-multiple.vue correctly 1`] = `"申请人申请状态签署方式邮箱地址申请时间贾明审批通过电子签署w.cezkdudy@lhll.au2022-01-01张三审批失败纸质签署r.nmgw@peurezgn.sl2022-02-01王芳审批过期纸质签署p.cumx@rampblpa.ru2022-03-01贾明审批通过电子签署w.cezkdudy@lhll.au2022-04-01张三审批失败纸质签署r.nmgw@peurezgn.sl2022-01-01"`; @@ -1073,9 +1075,9 @@ exports[`ssr snapshot test > renders ./src/textarea/_example/base.vue correctly exports[`ssr snapshot test > renders ./src/textarea/_example/events.vue correctly 1`] = `""`; -exports[`ssr snapshot test > renders ./src/textarea/_example/maxlength.vue correctly 1`] = `"0/200/20"`; +exports[`ssr snapshot test > renders ./src/textarea/_example/maxlength.vue correctly 1`] = `"这里可以放一些提示文字0/200/20"`; -exports[`ssr snapshot test > renders ./src/textarea/_example/type.vue correctly 1`] = `"禁用状态只读状态普通状态这是普通文本提示成功状态校验通过文本提示警告状态校验不通过文本提示错误状态校验存在严重问题文本提示"`; +exports[`ssr snapshot test > renders ./src/textarea/_example/type.vue correctly 1`] = `"禁用状态只读状态普通状态这是普通文本提示成功状态校验通过文本提示警告状态校验不通过文本提示错误状态校验存在严重问题文本提示"`; exports[`ssr snapshot test > renders ./src/time-picker/_example/base.vue correctly 1`] = `""`; @@ -1149,53 +1151,53 @@ exports[`ssr snapshot test > renders ./src/transfer/_example/search.vue correctl exports[`ssr snapshot test > renders ./src/transfer/_example/target-value.vue correctly 1`] = `"0 / 10 项内容2内容4内容6内容8内容10内容12内容14内容16内容18内容200 / 10 项内容1内容3内容5内容7内容9内容11内容13内容15内容17内容19"`; -exports[`ssr snapshot test > renders ./src/transfer/_example/tree.vue correctly 1`] = `"0 / 5 项0 / 0 项暂无数据"`; +exports[`ssr snapshot test > renders ./src/transfer/_example/tree.vue correctly 1`] = `"0 / 5 项11.11.21.2.11.2.1.11.2.1.222.12.20 / 0 项暂无数据"`; -exports[`ssr snapshot test > renders ./src/tree/_example/activable.vue correctly 1`] = `"节点可高亮节点可多选高亮整个节点可点击11.11.222.12.2"`; +exports[`ssr snapshot test > renders ./src/tree/_example/activable.vue correctly 1`] = `"节点可高亮节点可多选高亮整个节点可点击11.11.222.12.2"`; -exports[`ssr snapshot test > renders ./src/tree/_example/base.vue correctly 1`] = `"第一段第一段第一段第一段"`; +exports[`ssr snapshot test > renders ./src/tree/_example/base.vue correctly 1`] = `"第一段第一段第一段第一段"`; -exports[`ssr snapshot test > renders ./src/tree/_example/checkable.vue correctly 1`] = `"可选严格模式选中值模式onlyLeafparentFirstall11.11.1.11.1.1.11.1.1.21.1.21.1.2.11.1.2.21.21.2.11.2.1.11.2.1.21.2.21.2.2.11.2.2.222.12.2"`; +exports[`ssr snapshot test > renders ./src/tree/_example/checkable.vue correctly 1`] = `"可选严格模式选中值模式onlyLeafparentFirstall11.11.1.11.1.1.11.1.1.21.1.21.1.2.11.1.2.21.21.2.11.2.1.11.2.1.21.2.21.2.2.11.2.2.222.12.2"`; -exports[`ssr snapshot test > renders ./src/tree/_example/controlled.vue correctly 1`] = `"checked:expanded:actived:11.11.1.11.1.1.11.1.1.21.1.21.22 这个节点不允许展开, 不允许激活2.1 这个节点不允许选中2.2"`; +exports[`ssr snapshot test > renders ./src/tree/_example/controlled.vue correctly 1`] = `"checked:expanded:actived:11.11.1.11.1.1.11.1.1.21.1.21.22 这个节点不允许展开, 不允许激活2.1 这个节点不允许选中2.2"`; -exports[`ssr snapshot test > renders ./src/tree/_example/data.vue correctly 1`] = `"数据切换切换数据默认展开全部可选节点可高亮展开动画11.11.1.11.1.21.21.2.11.2.222.12.2"`; +exports[`ssr snapshot test > renders ./src/tree/_example/data.vue correctly 1`] = `"数据切换切换数据默认展开全部可选节点可高亮展开动画11.11.1.11.1.21.21.2.11.2.222.12.2"`; -exports[`ssr snapshot test > renders ./src/tree/_example/disabled.vue correctly 1`] = `"是否禁用整个 tree是否只禁用 checkbox11.11.1.11.1.21.21.2.11.2.222.12.2禁用指定节点 checkbox11.11.1.11.1.21.21.2.11.2.222.12.2"`; +exports[`ssr snapshot test > renders ./src/tree/_example/disabled.vue correctly 1`] = `"是否禁用整个 tree是否只禁用 checkbox11.11.1.11.1.21.21.2.11.2.222.12.2禁用指定节点 checkbox11.11.1.11.1.21.21.2.11.2.222.12.2"`; -exports[`ssr snapshot test > renders ./src/tree/_example/draggable.vue correctly 1`] = `"11.11.1.11.1.1.11.1.1.21.1.21.1.2.11.1.2.222.12.2"`; +exports[`ssr snapshot test > renders ./src/tree/_example/draggable.vue correctly 1`] = `"11.11.1.11.1.1.11.1.1.21.1.21.1.2.11.1.2.222.12.2"`; exports[`ssr snapshot test > renders ./src/tree/_example/empty.vue correctly 1`] = `""`; -exports[`ssr snapshot test > renders ./src/tree/_example/expand-all.vue correctly 1`] = `"切换数据展开动画11.11.1.11.1.21.21.2.11.2.222.12.2"`; +exports[`ssr snapshot test > renders ./src/tree/_example/expand-all.vue correctly 1`] = `"切换数据展开动画11.11.1.11.1.21.21.2.11.2.222.12.2"`; -exports[`ssr snapshot test > renders ./src/tree/_example/expand-level.vue correctly 1`] = `"11.11.222.12.2"`; +exports[`ssr snapshot test > renders ./src/tree/_example/expand-level.vue correctly 1`] = `"11.11.222.12.2"`; -exports[`ssr snapshot test > renders ./src/tree/_example/expand-mutex.vue correctly 1`] = `"互斥展开整个节点可点击12"`; +exports[`ssr snapshot test > renders ./src/tree/_example/expand-mutex.vue correctly 1`] = `"互斥展开整个节点可点击12"`; -exports[`ssr snapshot test > renders ./src/tree/_example/filter.vue correctly 1`] = `"filter:12"`; +exports[`ssr snapshot test > renders ./src/tree/_example/filter.vue correctly 1`] = `"filter:允许折叠可选12"`; -exports[`ssr snapshot test > renders ./src/tree/_example/icon.vue correctly 1`] = `"render:12scope slot:12"`; +exports[`ssr snapshot test > renders ./src/tree/_example/icon.vue correctly 1`] = `"render:12scope slot:12"`; -exports[`ssr snapshot test > renders ./src/tree/_example/label.vue correctly 1`] = `"render:value: t173, label: 1value: t174, label: 1.1value: t175, label: 1.2value: t176, label: 2value: t177, label: 2.1value: t178, label: 2.2scope slot:label: 1, value: t179label: 1.1, value: t180label: 1.2, value: t181label: 2, value: t182label: 2.1, value: t183label: 2.2, value: t184"`; +exports[`ssr snapshot test > renders ./src/tree/_example/label.vue correctly 1`] = `"render:value: t859, label: 1value: t860, label: 1.1value: t861, label: 1.2value: t862, label: 2value: t863, label: 2.1value: t864, label: 2.2scope slot:label: 1, value: t865label: 1.1, value: t866label: 1.2, value: t867label: 2, value: t868label: 2.1, value: t869label: 2.2, value: t870"`; -exports[`ssr snapshot test > renders ./src/tree/_example/lazy.vue correctly 1`] = `"数据延迟加载默认为点击加载数据。 valueMode 默认为 'onlyLeaf'。选中父节点时,子节点由于未加载,无法更新和获取选中状态,导致无法更新父节点的状态。 所以使用延迟加载时,推荐 valueMode 设置为 'all' 或者 'parentFirst'。可选严格模式12"`; +exports[`ssr snapshot test > renders ./src/tree/_example/lazy.vue correctly 1`] = `"数据延迟加载默认为点击加载数据。 valueMode 默认为 'onlyLeaf'。选中父节点时,子节点由于未加载,无法更新和获取选中状态,导致无法更新父节点的状态。 所以使用延迟加载时,推荐 valueMode 设置为 'all' 或者 'parentFirst'。可选严格模式12"`; -exports[`ssr snapshot test > renders ./src/tree/_example/line.vue correctly 1`] = `"显示连线显示图标11.11.222.12.1.12.1.1.12.1.1.1.12.1.1.1.22.1.22.233.13.24render11.11.222.12.1.12.1.1.12.1.1.1.12.1.1.1.22.1.22.233.13.24scope slot11.11.222.12.1.12.1.1.12.1.1.1.12.1.1.1.22.1.22.233.13.24"`; +exports[`ssr snapshot test > renders ./src/tree/_example/line.vue correctly 1`] = `"显示连线显示图标11.11.222.12.1.12.1.1.12.1.1.1.12.1.1.1.22.1.22.233.13.24render11.11.222.12.1.12.1.1.12.1.1.1.12.1.1.1.22.1.22.233.13.24scope slot11.11.222.12.1.12.1.1.12.1.1.1.12.1.1.1.22.1.22.233.13.24"`; -exports[`ssr snapshot test > renders ./src/tree/_example/load.vue correctly 1`] = `"可选12"`; +exports[`ssr snapshot test > renders ./src/tree/_example/load.vue correctly 1`] = `"可选12"`; -exports[`ssr snapshot test > renders ./src/tree/_example/operations.vue correctly 1`] = `"Render:1 | value: node1value: node12 | value: node2value: node2Scope Slot:插入节点使用高亮节点子节点展开触发父节点展开filter:1 | value: node1添加子节点前插节点后插节点删除2 | value: node2添加子节点前插节点后插节点删除API:获取 value 为 'node1' 的单个节点获取所有节点获取高亮节点的所有子节点获取所有高亮节点获取高亮节点下的选中节点插入一个根节点获取高亮节点的父节点获取高亮节点的所有父节点获取高亮节点在子节点中的位置选中高亮节点展开高亮节点获取高亮节点与其子节点的数据* 相关信息通过控制台输出"`; +exports[`ssr snapshot test > renders ./src/tree/_example/operations.vue correctly 1`] = `"Render:1 | value: node1value: node12 | value: node2value: node2Scope Slot:插入节点使用高亮节点子节点展开触发父节点展开filter:1 | value: node1添加子节点前插节点后插节点删除2 | value: node2添加子节点前插节点后插节点删除API:获取 value 为 'node1' 的单个节点获取所有节点获取高亮节点的所有子节点获取所有高亮节点获取高亮节点下的选中节点插入一个根节点获取高亮节点的父节点获取高亮节点的所有父节点获取高亮节点在子节点中的位置选中高亮节点展开高亮节点获取高亮节点与其子节点的数据* 相关信息通过控制台输出"`; -exports[`ssr snapshot test > renders ./src/tree/_example/performance.vue correctly 1`] = `"插入节点数量:插入根节点展开动画显示连线显示图标t1添加子节点删除t14添加子节点删除t27添加子节点删除"`; +exports[`ssr snapshot test > renders ./src/tree/_example/performance.vue correctly 1`] = `"插入节点数量:插入根节点展开动画显示连线显示图标t1添加子节点删除t14添加子节点删除t27添加子节点删除"`; -exports[`ssr snapshot test > renders ./src/tree/_example/state.vue correctly 1`] = `"插入一个根节点node1: 1639267200000检查节点信息变更时间变更图标添加子节点删除node2: 1639267200000检查节点信息变更时间变更图标添加子节点删除"`; +exports[`ssr snapshot test > renders ./src/tree/_example/state.vue correctly 1`] = `"插入一个根节点node1: 1639267200000检查节点信息变更时间变更图标添加子节点删除node2: 1639267200000检查节点信息变更时间变更图标添加子节点删除"`; -exports[`ssr snapshot test > renders ./src/tree/_example/sync.vue correctly 1`] = `"checked:expanded:actived:11.11.1.11.1.1.11.1.1.21.1.21.222.12.2"`; +exports[`ssr snapshot test > renders ./src/tree/_example/sync.vue correctly 1`] = `"checked:expanded:actived:11.11.1.11.1.1.11.1.1.21.1.21.222.12.2"`; -exports[`ssr snapshot test > renders ./src/tree/_example/transition.vue correctly 1`] = `"展开动画显示连线显示图标t1t2t3"`; +exports[`ssr snapshot test > renders ./src/tree/_example/transition.vue correctly 1`] = `"展开动画显示连线显示图标t1t2t3"`; -exports[`ssr snapshot test > renders ./src/tree/_example/vscroll.vue correctly 1`] = `"插入节点数量:插入根节点展开动画显示连线显示图标启用虚拟滚动t1添加子节点删除t2添加子节点删除t3添加子节点删除t4添加子节点删除t5添加子节点删除t6添加子节点删除t7添加子节点删除t8添加子节点删除t9添加子节点删除t10添加子节点删除t11添加子节点删除t12添加子节点删除t13添加子节点删除t14添加子节点删除t15添加子节点删除t16添加子节点删除t17添加子节点删除t18添加子节点删除t19添加子节点删除t20添加子节点删除t21添加子节点删除t22添加子节点删除t23添加子节点删除t24添加子节点删除t25添加子节点删除t26添加子节点删除t27添加子节点删除t28添加子节点删除t29添加子节点删除t30添加子节点删除t31添加子节点删除t32添加子节点删除t33添加子节点删除t34添加子节点删除t35添加子节点删除t36添加子节点删除t37添加子节点删除t38添加子节点删除t39添加子节点删除"`; +exports[`ssr snapshot test > renders ./src/tree/_example/vscroll.vue correctly 1`] = `"插入节点数量:插入根节点动画显示连线显示图标可选可操作滚动模式普通滚动虚拟滚动lazy模式切换滚动模式后需要刷新页面"`; exports[`ssr snapshot test > renders ./src/tree-select/_example/base.vue correctly 1`] = `""`;
* 相关信息通过控制台输出
默认为点击加载数据。
valueMode 默认为 'onlyLeaf'。选中父节点时,子节点由于未加载,无法更新和获取选中状态,导致无法更新父节点的状态。
所以使用延迟加载时,推荐 valueMode 设置为 'all' 或者 'parentFirst'。