diff --git a/examples/collapse/collapse.md b/examples/collapse/collapse.md new file mode 100644 index 0000000000..aeaa2b44d5 --- /dev/null +++ b/examples/collapse/collapse.md @@ -0,0 +1,36 @@ +:: BASE_DOC :: + +## API +### Collapse Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +borderless | Boolean | false | 是否为无边框模式 | N +defaultExpandAll | Boolean | false | 默认是否展开全部 | N +disabled | Boolean | - | 是否禁用面板展开/收起操作 | N +expandIcon | Boolean / Slot / Function | true | 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +expandIconPlacement | String | left | 展开图标的位置，左侧或右侧。可选项：left/right | N +expandMutex | Boolean | false | 每个面板互斥展开，每次只展开一个面板 | N +expandOnRowClick | Boolean | true | 是否允许点击整行标题展开面板 | N +value | Array | - | 展开的面板集合。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`CollapseValue` `type CollapseValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/collapse/type.ts) | N +defaultValue | Array | - | 展开的面板集合。非受控属性。TS 类型：`CollapseValue` `type CollapseValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/collapse/type.ts) | N +onChange | Function | | TS 类型：`(value: CollapseValue) => void`
切换面板时触发，返回变化的值 | N + +### Collapse Events + +名称 | 参数 | 描述 +-- | -- | -- +change | `(value: CollapseValue)` | 切换面板时触发，返回变化的值 + +### CollapsePanel Props + +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +content | String / Slot / Function | - | 折叠面板内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +default | String / Slot / Function | - | 折叠面板内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +destroyOnCollapse | Boolean | false | 当前面板处理折叠状态时，是否销毁面板内容 | N +disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N +expandIcon | Boolean / Slot / Function | true | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +header | String / Slot / Function | - | 面板头内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +headerRightContent | String / Slot / Function | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N diff --git a/examples/collapse/demos/base.vue b/examples/collapse/demos/base.vue new file mode 100644 index 0000000000..4e63e89228 --- /dev/null +++ b/examples/collapse/demos/base.vue @@ -0,0 +1,63 @@ + + + diff --git a/examples/collapse/demos/icon.vue b/examples/collapse/demos/icon.vue new file mode 100644 index 0000000000..37b95358b9 --- /dev/null +++ b/examples/collapse/demos/icon.vue @@ -0,0 +1,41 @@ + + + diff --git a/examples/collapse/demos/mutex.vue b/examples/collapse/demos/mutex.vue new file mode 100644 index 0000000000..21cfecf152 --- /dev/null +++ b/examples/collapse/demos/mutex.vue @@ -0,0 +1,32 @@ + + + diff --git a/examples/collapse/demos/other.vue b/examples/collapse/demos/other.vue new file mode 100644 index 0000000000..b1ec84a5c6 --- /dev/null +++ b/examples/collapse/demos/other.vue @@ -0,0 +1,36 @@ + + + diff --git a/examples/collapse/demos/rightSlot.vue b/examples/collapse/demos/rightSlot.vue new file mode 100644 index 0000000000..7bd11ce4a6 --- /dev/null +++ b/examples/collapse/demos/rightSlot.vue @@ -0,0 +1,43 @@ + + + diff --git a/site/site.config.mjs b/site/site.config.mjs index 051b9f8932..a2bc97c2ed 100644 --- a/site/site.config.mjs +++ b/site/site.config.mjs @@ -331,6 +331,13 @@ export default { path: '/vue-next/components/calendar', component: () => import('@/examples/calendar/calendar.md'), }, + { + title: 'Collapse 折叠面板', + name: 'collapse', + docType: 'data', + path: '/vue-next/components/collapse', + component: () => import('@/examples/collapse/collapse.md') + }, { title: 'Comment 评论', name: 'comment', @@ -400,7 +407,7 @@ export default { docType: 'data', path: '/vue-next/components/tree', component: () => import('@/examples/tree/tree.md'), - }, + } ], }, { diff --git a/src/_common b/src/_common index 7cd357301b..5cc38b6e06 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 7cd357301b5e75bf52b8dffe0bea9c97df785d22 +Subproject commit 5cc38b6e0604244f7893671caff7785f9cd79707 diff --git a/src/collapse/collapse-panel-props.ts b/src/collapse/collapse-panel-props.ts new file mode 100644 index 0000000000..22738c81f9 --- /dev/null +++ b/src/collapse/collapse-panel-props.ts @@ -0,0 +1,43 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdCollapsePanelProps } from '../collapse/type'; +import { PropType } from 'vue'; + +export default { + /** 折叠面板内容 */ + content: { + type: [String, Function] as PropType, + }, + /** 折叠面板内容，同 content */ + default: { + type: [String, Function] as PropType, + }, + /** 当前面板处理折叠状态时，是否销毁面板内容 */ + destroyOnCollapse: Boolean, + /** 禁止当前面板展开，优先级大于 Collapse 的同名属性 */ + disabled: { + type: Boolean, + default: undefined, + }, + /** 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 */ + expandIcon: { + type: [Boolean, Function] as PropType, + default: true, + }, + /** 面板头内容 */ + header: { + type: [String, Function] as PropType, + }, + /** 面板头的右侧区域，一般用于呈现面板操作 */ + headerRightContent: { + type: [String, Function] as PropType, + }, + /** 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 */ + value: { + type: [String, Number] as PropType, + }, +}; diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx new file mode 100644 index 0000000000..98870be892 --- /dev/null +++ b/src/collapse/collapse-panel.tsx @@ -0,0 +1,117 @@ +import { defineComponent, ref, computed, inject, Ref, toRefs, Transition } from 'vue'; +import props from './collapse-panel-props'; +import FakeArrow from '../common-components/fake-arrow'; +import { CollapseValue, TdCollapsePanelProps } from './type'; +import { useTNodeJSX } from '../hooks/tnode'; +import { usePrefixClass } from '../hooks/useConfig'; +import useCollapseAnimation from './useCollapseAnimation'; + +export default defineComponent({ + name: 'TCollapsePanel', + props, + setup(props: TdCollapsePanelProps, context) { + const renderTNodeJSX = useTNodeJSX(); + const componentName = usePrefixClass('collapse-panel'); + const disableClass = usePrefixClass('is-disabled'); + const clickableClass = usePrefixClass('is-clickable'); + const transitionClass = usePrefixClass('slide-down'); + const { value, disabled, destroyOnCollapse } = toRefs(props); + const collapseValue: Ref = inject('collapseValue'); + const updateCollapseValue: Function = inject('updateCollapseValue'); + const { + defaultExpandAll, + disabled: disableAll, + expandIconPlacement, + expandOnRowClick, + expandIcon, + } = inject('collapseProps'); + if (defaultExpandAll.value) { + updateCollapseValue(value.value); + } + const { beforeEnter, enter, afterEnter, beforeLeave, leave, afterLeave } = useCollapseAnimation(); + const headRef = ref(); + const isDisabled = computed(() => disabled.value || disableAll.value); + const isActive = computed(() => + collapseValue.value instanceof Array + ? collapseValue.value.includes(value.value) + : collapseValue.value === value.value, + ); + const classes = computed(() => { + return [componentName.value, { [disableClass.value]: isDisabled.value }]; + }); + const handleClick = (e: MouseEvent) => { + const canExpand = + (expandOnRowClick.value && e.target === headRef.value) || + (e.target as Element).getAttribute('name') === 'arrow'; + if (canExpand && !isDisabled.value) { + updateCollapseValue(value.value); + } + }; + const renderIcon = (direction: string) => { + return ( + + ); + }; + const renderBlank = () => { + return
; + }; + const renderHeader = () => { + const cls = [ + `${componentName.value}__header`, + { + [clickableClass.value]: expandOnRowClick.value && !isDisabled.value, + }, + ]; + return ( +
+ {expandIcon.value && expandIconPlacement.value === 'left' ? renderIcon(expandIconPlacement.value) : null} + {renderTNodeJSX('header')} + {renderBlank()} + {renderTNodeJSX('headerRightContent')} + {expandIcon.value && expandIconPlacement.value === 'right' ? renderIcon(expandIconPlacement.value) : null} +
+ ); + }; + const renderBodyByNormal = () => { + return ( +
+
{renderTNodeJSX('default')}
+
+ ); + }; + const renderBodyDestroyOnCollapse = () => { + return isActive.value ? ( +
+
{renderTNodeJSX('default')}
+
+ ) : null; + }; + const renderBody = () => { + return destroyOnCollapse.value ? renderBodyDestroyOnCollapse() : renderBodyByNormal(); + }; + return () => { + return ( +
+
+ {renderHeader()} + + {renderBody()} + +
+
+ ); + }; + }, +}); diff --git a/src/collapse/collapse.tsx b/src/collapse/collapse.tsx new file mode 100644 index 0000000000..fcd096a2fc --- /dev/null +++ b/src/collapse/collapse.tsx @@ -0,0 +1,55 @@ +import { defineComponent, toRefs, provide, computed } from 'vue'; +import props from './props'; +import { CollapseValue, TdCollapseProps, CollapsePanelValue } from './type'; +import useVModel from '../hooks/useVModel'; +import { useTNodeJSX } from '../hooks/tnode'; +import { usePrefixClass } from '../hooks/useConfig'; + +export default defineComponent({ + name: 'TCollapse', + props, + setup(props: TdCollapseProps, context) { + const componentName = usePrefixClass('collapse'); + const borderlessClass = usePrefixClass('-border-less'); + const renderTNodeJSX = useTNodeJSX(); + const { value, expandMutex, borderless, modelValue } = toRefs(props); + const [collapseValue, setCollapseValue] = useVModel(value, modelValue, props.defaultValue, props.onChange); + const updateCollapseValue = (value: CollapsePanelValue) => { + let newValue: CollapseValue = [].concat(collapseValue.value || []); + const index = newValue.indexOf(value); + if (index >= 0) { + newValue.splice(index, 1); + } else if (expandMutex.value) { + newValue = [value]; + } else { + newValue.push(value); + } + setCollapseValue(newValue); + }; + const classes = computed(() => { + return [ + componentName.value, + { + [borderlessClass.value]: !!borderless.value, + }, + ]; + }); + provide('collapseValue', collapseValue); + provide('updateCollapseValue', updateCollapseValue); + provide('collapseProps', toRefs(props)); + return () => { + const nodes = renderTNodeJSX('default'); + if (Array.isArray(nodes)) { + nodes.forEach((node, index) => { + const { props, type } = node; + if ((type as any)?.name === 'TCollapsePanel' && props?.value === undefined) { + if (props) { + props.value = index; + } + } + }); + } + return
{nodes}
; + }; + }, +}); diff --git a/src/collapse/index.ts b/src/collapse/index.ts new file mode 100644 index 0000000000..85fa756f3b --- /dev/null +++ b/src/collapse/index.ts @@ -0,0 +1,15 @@ +import _Collapse from './collapse'; +import _CollapsePanel from './collapse-panel'; +import { withInstall, WithInstallType } from '../utils/withInstall'; +import { TdCollapseProps } from './type'; + +import './style'; + +export * from './type'; +export type CollapseProps = TdCollapseProps; + +export const Collapse: WithInstallType = withInstall(_Collapse); + +export const CollapsePanel: WithInstallType = withInstall(_CollapsePanel); + +export default Collapse; diff --git a/src/collapse/props.ts b/src/collapse/props.ts new file mode 100644 index 0000000000..b1f65bb290 --- /dev/null +++ b/src/collapse/props.ts @@ -0,0 +1,53 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdCollapseProps } from './type'; +import { PropType } from 'vue'; + +export default { + /** 是否为无边框模式 */ + borderless: Boolean, + /** 默认是否展开全部 */ + defaultExpandAll: Boolean, + /** 是否禁用面板展开/收起操作 */ + disabled: Boolean, + /** 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标 */ + expandIcon: { + type: [Boolean, Function] as PropType, + default: true, + }, + /** 展开图标的位置，左侧或右侧 */ + expandIconPlacement: { + type: String as PropType, + default: 'left' as TdCollapseProps['expandIconPlacement'], + validator(val: TdCollapseProps['expandIconPlacement']): boolean { + if (!val) return true; + return ['left', 'right'].includes(val); + }, + }, + /** 每个面板互斥展开，每次只展开一个面板 */ + expandMutex: Boolean, + /** 是否允许点击整行标题展开面板 */ + expandOnRowClick: { + type: Boolean, + default: true, + }, + /** 展开的面板集合 */ + value: { + type: Array as PropType, + default: undefined, + }, + modelValue: { + type: Array as PropType, + default: undefined, + }, + /** 展开的面板集合，非受控属性 */ + defaultValue: { + type: Array as PropType, + }, + /** 切换面板时触发，返回变化的值 */ + onChange: Function as PropType, +}; diff --git a/src/collapse/style/css.js b/src/collapse/style/css.js new file mode 100644 index 0000000000..6a9a4b1328 --- /dev/null +++ b/src/collapse/style/css.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/src/collapse/style/index.js b/src/collapse/style/index.js new file mode 100644 index 0000000000..bd6001d635 --- /dev/null +++ b/src/collapse/style/index.js @@ -0,0 +1 @@ +import '../../_common/style/web/components/collapse/_index.less'; diff --git a/src/collapse/type.ts b/src/collapse/type.ts new file mode 100644 index 0000000000..1d114dab4a --- /dev/null +++ b/src/collapse/type.ts @@ -0,0 +1,101 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TNode } from '../common'; + +export interface TdCollapseProps { + /** + * 是否为无边框模式 + * @default false + */ + borderless?: boolean; + /** + * 默认是否展开全部 + * @default false + */ + defaultExpandAll?: boolean; + /** + * 是否禁用面板展开/收起操作 + */ + disabled?: boolean; + /** + * 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标 + * @default true + */ + expandIcon?: boolean | TNode; + /** + * 展开图标的位置，左侧或右侧 + * @default left + */ + expandIconPlacement?: 'left' | 'right'; + /** + * 每个面板互斥展开，每次只展开一个面板 + * @default false + */ + expandMutex?: boolean; + /** + * 是否允许点击整行标题展开面板 + * @default true + */ + expandOnRowClick?: boolean; + /** + * 展开的面板集合 + */ + value?: CollapseValue; + /** + * 展开的面板集合，非受控属性 + */ + defaultValue?: CollapseValue; + /** + * 展开的面板集合 + */ + modelValue?: CollapseValue; + /** + * 切换面板时触发，返回变化的值 + */ + onChange?: (value: CollapseValue) => void; +} + +export interface TdCollapsePanelProps { + /** + * 折叠面板内容 + */ + content?: string | TNode; + /** + * 折叠面板内容，同 content + */ + default?: string | TNode; + /** + * 当前面板处理折叠状态时，是否销毁面板内容 + * @default false + */ + destroyOnCollapse?: boolean; + /** + * 禁止当前面板展开，优先级大于 Collapse 的同名属性 + */ + disabled?: boolean; + /** + * 当前折叠面板展开图标，优先级大于 Collapse 的同名属性 + * @default true + */ + expandIcon?: boolean | TNode; + /** + * 面板头内容 + */ + header?: string | TNode; + /** + * 面板头的右侧区域，一般用于呈现面板操作 + */ + headerRightContent?: string | TNode; + /** + * 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 + */ + value?: string | number; +} + +export type CollapseValue = Array; + +export type CollapsePanelValue = string | number; diff --git a/src/collapse/useCollapseAnimation.ts b/src/collapse/useCollapseAnimation.ts new file mode 100644 index 0000000000..92b4e13335 --- /dev/null +++ b/src/collapse/useCollapseAnimation.ts @@ -0,0 +1,51 @@ +export default function useCollapseAnimation() { + const beforeEnter = (el: HTMLElement) => { + el.dataset.oldPaddingTop = el.style.paddingTop; + el.dataset.oldPaddingBottom = el.style.paddingBottom; + + el.style.height = '0'; + el.style.paddingTop = '0'; + el.style.paddingBottom = '0'; + }; + const enter = (el: HTMLElement) => { + el.dataset.oldOverflow = el.style.overflow; + el.style.height = `${el.scrollHeight}px`; + el.style.paddingTop = el.dataset.oldPaddingTop; + el.style.paddingBottom = el.dataset.oldPaddingBottom; + el.style.overflow = 'hidden'; + }; + const afterEnter = (el: HTMLElement) => { + el.style.height = ''; + el.style.overflow = el.dataset.oldOverflow; + }; + const beforeLeave = (el: HTMLElement) => { + el.dataset.oldPaddingTop = el.style.paddingTop; + el.dataset.oldPaddingBottom = el.style.paddingBottom; + el.dataset.oldOverflow = el.style.overflow; + + el.style.height = `${el.scrollHeight}px`; + el.style.overflow = 'hidden'; + }; + const leave = (el: HTMLElement) => { + if (el.scrollHeight !== 0) { + el.style.height = '0'; + el.style.paddingTop = '0'; + el.style.paddingBottom = '0'; + } + }; + const afterLeave = (el: HTMLElement) => { + el.style.height = ''; + el.style.overflow = el.dataset.oldOverflow; + el.style.paddingTop = el.dataset.oldPaddingTop; + el.style.paddingBottom = el.dataset.oldPaddingBottom; + }; + + return { + beforeEnter, + enter, + afterEnter, + beforeLeave, + leave, + afterLeave, + }; +} diff --git a/src/components.ts b/src/components.ts index b9f70af4c6..3ccf83058e 100644 --- a/src/components.ts +++ b/src/components.ts @@ -49,6 +49,7 @@ export * from './table'; export * from './tag'; export * from './tooltip'; export * from './tree'; +export * from './collapse'; // 消息提醒 diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 93aa6fcfce..c06717e62e 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -10199,6 +10199,516 @@ exports[`ssr snapshot test renders ./examples/checkbox/demos/link.vue correctly `; +exports[`ssr snapshot test renders ./examples/collapse/demos/base.vue correctly 1`] = ` +
+
+ +
+
+
+ + 这是一个折叠标题
+ + +
+ +
+
+
+
+
+ + 设置默认展开项
+ + +
+
+
+ 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 + +
+
+
+
+
+
+
+ + 自定义折叠面板内容
+ + +
+ +
+
+
+
+
+ + 嵌套折叠面板
+ + +
+ +
+
+ +
+
当前展开项:[ + 1 + ]
+
+`; + +exports[`ssr snapshot test renders ./examples/collapse/demos/icon.vue correctly 1`] = ` +
+
+ +
+
+
+ + 这是一个折叠标题
+ + +
+ +
+
+
+
+
+ + + 这是一个折叠标题 + +
+ + +
+ +
+
+
+
+
+ + + 这是一个折叠标题 + +
+ + +
+ +
+
+
+
+
+ + 这是一个折叠标题
+ + +
+ +
+
+ +
+
+
+ + +
+
+
+
+`; + +exports[`ssr snapshot test renders ./examples/collapse/demos/mutex.vue correctly 1`] = ` +
+
+ +
+
+
+ + 这是一个折叠标题
+ + +
+ +
+
+
+
+
+ + + 这是一个折叠标题 + +
+ + +
+ +
+
+
+
+
+ + + 这是一个折叠标题 + +
+ + +
+ +
+
+
+
+
+ + 这是一个折叠标题
+ + +
+ +
+
+ +
+
当前展开项：[]
+
+`; + +exports[`ssr snapshot test renders ./examples/collapse/demos/other.vue correctly 1`] = ` +
+
+ +
+
+
+ + 这是一个折叠标题
+ + +
+ +
+
+
+
+
+ + + 这是一个折叠标题 + +
+ + +
+ +
+
+
+
+
+ + + 这是一个折叠标题 + +
+ + +
+ +
+
+
+
+
+ + 这是一个折叠标题
+ + +
+ +
+
+ +
+
+
+`; + +exports[`ssr snapshot test renders ./examples/collapse/demos/rightSlot.vue correctly 1`] = ` +
+
+ +
+
+
+ + 这是一个折叠标题可以设置右侧操作区域
+ + + +
+ +
+
+
+
+
+ + 这是一个折叠标题可以设置右侧操作区域
+ + + +
+ +
+
+
+
+
+ + 这是一个折叠标题可以设置右侧操作区域
+ + + +
+ +
+
+
+
+
+ + 这是一个折叠标题可以设置右侧操作区域
+ + + +
+ +
+
+ +
+
+`; + exports[`ssr snapshot test renders ./examples/color-picker/demos/color-mode.vue correctly 1`] = `
diff --git a/test/unit/collapse/__snapshots__/demo.test.js.snap b/test/unit/collapse/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..dd22731e0d --- /dev/null +++ b/test/unit/collapse/__snapshots__/demo.test.js.snap @@ -0,0 +1,1711 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Collapse Collapse baseVue demo works fine 1`] = ` +
+
+ +
+
+
+ + + + 这是一个折叠标题 +
+ + +
+ + + +
+
+
+
+
+ + + + 设置默认展开项 +
+ + +
+ +
+
+ + 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 + +
+
+ +
+
+
+
+
+ + + + 自定义折叠面板内容 +
+ + +
+ + + +
+
+
+
+
+ + + + 嵌套折叠面板 +
+ + +
+ + +`; + +exports[`Collapse Collapse iconVue demo works fine 1`] = ` +
+
+ +
+
+
+ + + + 这是一个折叠标题 +
+ + +
+ + + +
+
+
+
+
+ + + + + 这是一个折叠标题 + +
+ + +
+ + + +
+
+
+
+
+ + + + + 这是一个折叠标题 + +
+ + +
+ + + +
+
+
+
+
+ + + + 这是一个折叠标题 +
+ + +
+ + + +
+
+ +
+
+ +
+ + + + +
+
+
+ +
+
+`; + +exports[`Collapse Collapse mutexVue demo works fine 1`] = ` +
+
+ +
+
+
+ + + + 这是一个折叠标题 +
+ + +
+ + + +
+
+
+
+
+ + + + + 这是一个折叠标题 + +
+ + +
+ + + +
+
+
+
+
+ + + + + 这是一个折叠标题 + +
+ + +
+ + + +
+
+
+
+
+ + + + 这是一个折叠标题 +
+ + +
+ + + +
+
+ +
+
+ 当前展开项：[] +
+
+`; + +exports[`Collapse Collapse otherVue demo works fine 1`] = ` +
+
+ +
+
+
+ + + + 这是一个折叠标题 +
+ + +
+ + + +
+
+
+
+
+ + + + + 这是一个折叠标题 + +
+ + +
+ + + +
+
+
+
+
+ + + + + 这是一个折叠标题 + +
+ + +
+ + + +
+
+
+
+
+ + + + 这是一个折叠标题 +
+ + +
+ + + +
+
+ +
+
+ + +
+
+`; + +exports[`Collapse Collapse rightSlotVue demo works fine 1`] = ` +
+
+ +
+
+
+ + + + 这是一个折叠标题可以设置右侧操作区域 +
+ + + + + +
+ + + +
+
+
+
+
+ + + + 这是一个折叠标题可以设置右侧操作区域 +
+ + + + + +
+ + + +
+
+
+
+
+ + + + 这是一个折叠标题可以设置右侧操作区域 +
+ + + + + +
+ + + +
+
+
+
+
+ + + + 这是一个折叠标题可以设置右侧操作区域 +
+ + + + + +
+ + + +
+
+ +
+
+`; diff --git a/test/unit/collapse/demo.test.js b/test/unit/collapse/demo.test.js new file mode 100644 index 0000000000..fbd81b154d --- /dev/null +++ b/test/unit/collapse/demo.test.js @@ -0,0 +1,27 @@ +/** + * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖 + */ + +import { mount } from '@vue/test-utils'; +import baseVue from '@/examples/collapse/demos/base.vue'; +import iconVue from '@/examples/collapse/demos/icon.vue'; +import mutexVue from '@/examples/collapse/demos/mutex.vue'; +import otherVue from '@/examples/collapse/demos/other.vue'; +import rightSlotVue from '@/examples/collapse/demos/rightSlot.vue'; + +const mapper = { + baseVue, + iconVue, + mutexVue, + otherVue, + rightSlotVue, +}; + +describe('Collapse', () => { + Object.keys(mapper).forEach((demoName) => { + it(`Collapse ${demoName} demo works fine`, () => { + const wrapper = mount(mapper[demoName]); + expect(wrapper.element).toMatchSnapshot(); + }); + }); +});