Collapse

Collapse 折叠面板。

组件结构

<template>
    <view class="tui-collapse" :style="{backgroundColor:bgColor}">
        <view class="tui-collapse-head" :style="{backgroundColor:hdBgColor}" @tap.stop="handleClick">
            <view class="tui-header" :class="{'tui-opacity':disabled}">
                <slot name="title"></slot>
                <view class="tui-collapse-icon tui-icon-arrow" :class="{'tui-icon-active':isOpen}" :style="{color:arrowColor}" v-if="arrow"></view>
            </view>
        </view>
        <view class="tui-collapse-body" :style="{backgroundColor:bdBgColor,transform: isOpen ? 'translateY(0)' : `translateY(${translateY})`,height:isOpen?height:'0'}">
            <slot name="content"></slot>
        </view>
    </view>
</template>

组件脚本

<script>
    export default {
        name: "tuiCollapse",
        props: {
            //collapse背景颜色
            bgColor: {
                type: String,
                default: 'none'
            },
            //collapse-head 背景颜色
            hdBgColor: {
                type: String,
                default: '#fff'
            },
            //collapse-body 背景颜色
            bdBgColor: {
                type: String,
                default: 'none'
            },
            //collapse-body实际高度 open时使用
            height: {
                type: String,
                default: 'auto'
            },
            //close时translateY ，当bd高度固定时，建议值为0
            translateY: {
                type: String,
                default: '-50%'
            },
            //索引
            index: {
                type: Number,
                default: 0
            },
            //当前索引，index==current时展开
            current: {
                type: Number,
                default: -1
            },
            // 是否禁用
            disabled: {
                type: [Boolean, String],
                default: false
            },
            //是否带箭头
            arrow:{
                type: [Boolean, String],
                default: true
            },
            //箭头颜色
            arrowColor:{
                type: String,
                default: "#333"
            }
        },
        watch: {
            current() {
                this.updateCurrentChange()
            }
        },
        created() {
            this.updateCurrentChange()
        },
        data() {
            return {
                isOpen: false
            };
        },
        methods: {
            updateCurrentChange() {
                this.isOpen = this.index == this.current
            },
            handleClick() {
                if (this.disabled) return;
                this.$emit("click", {
                    index: Number(this.index)
                })
            }
        }
    }
</script>

组件样式

... 此处省略n行

脚本说明

props

methods

示例

... 此处省略n行,下载源码查看

预览图