Skip to content

ExpandContainernput

一个可以展开收起的容器

源文件

ExpandContainer.vue

ExpandContainer.vue

示例

向下展开

向上展开

采用定位实现,需要设置父类的高度

props 参数

参数名说明类型默认值
expand(v-model)是否展开booleanfalse
height容器收起时的高度string0
position展开方向,可选值为top和bottom,默认为bottomstringbottom
iconSize图标大小,默认为20,单位为像素,用于计算图标位置number20
duration动画时长,默认为0.3snumber0.3

事件

事件名说明参数
expand-change展开状态改变时触发展开状态

插槽

插槽名说明参数
default容器内容插槽-
down没有展开,箭头向下时的图标插槽-
up展开,箭头向上时的图标插槽-

样式

.block-bg

这个类名的高度会随着容器的展开而改变,包含了展开图标,用于设置背景

Released under the MIT License.