vue实现collapse手风琴组件展开和收缩

前言

vue-cli搭建项目中使用Element-uiiview库的collapse组件时发现都不能很好的符合功能需求,所以打算自己实现

演示

img

代码

html代码

<div style="border-top:1px solid  #f7f9fc;border-bottom:1px solid  #f7f9fc">
    <!-- 每层item -->
    <div style="border-bottom:1px solid #f7f9fc;" class="pl5 pr5">
        <div
            class="flex-ac flex-j-between"
            style="min-height:60px;"
            @click="setChooseCollapse($event)"
        >
            <span
                :class="
                        collapseBtnList[0] ===
                        choose
                            ? 'title span-click'
                            : 'title span-lose'
                    "
                >{{ collapseBtnList[0] }}</span
            >
            <Icon
                type="md-arrow-dropleft"
                size="20"
                :class="
                        collapseBtnList[0] ===
                        choose
                            ? 'triangle-route triangle-animation'
                            : 'triangle-animation triangle-base'
                    "
            />
        </div>

        <!-- 内容 -->
        <p
            :class="
                    collapseBtnList[0] === choose
                        ? 'content-show content-animation'
                        : 'content-hidden content-animation'
                "
            style="overflow:hidden;"
        >
            内容
        </p>
    </div>

    <!-- 每层item -->
    <div style="border-bottom:1px solid #f7f9fc;" class="pl5 pr5">
        <div
            class="flex-ac flex-j-between"
            style="min-height:60px;"
            @click="setChooseCollapse($event)"
        >
            <span
                :class="
                        collapseBtnList[1] ===
                        choose
                            ? 'title span-click'
                            : 'title span-lose'
                    "
                >{{ collapseBtnList[1] }}</span
            >
            <Icon
                type="md-arrow-dropleft"
                size="20"
                :class="
                        collapseBtnList[1] ===
                        choose
                            ? 'triangle-route triangle-animation'
                            : 'triangle-animation triangle-base'
                    "
            />
        </div>

        <!-- 内容 -->
        <p
            :class="
                    collapseBtnList[1] === choose
                        ? 'content-show content-animation'
                        : 'content-hidden content-animation'
                "
            style="overflow:hidden;"
        >
            内容
        </p>
    </div>

    <!-- 每层item -->
    <div style="border-bottom:1px solid #f7f9fc;" class="pl5 pr5">
        <div
            class="flex-ac flex-j-between"
            style="min-height:60px;"
            @click="setChooseCollapse($event)"
        >
            <span
                :class="
                        collapseBtnList[2] ===
                        choose
                            ? 'title span-click'
                            : 'title span-lose'
                    "
                >{{ collapseBtnList[2] }}</span
            >
            <Icon
                type="md-arrow-dropleft"
                size="20"
                :class="
                        collapseBtnList[2] ===
                        choose
                            ? 'triangle-route triangle-animation'
                            : 'triangle-animation triangle-base'
                    "
            />
        </div>

        <!-- 内容 -->
        <p
            :class="
                    collapseBtnList[2] === choose
                        ? 'content-show content-animation'
                        : 'content-hidden content-animation'
                "
            style="overflow:hidden;"
        >
            内容
        </p>
    </div>

    <!-- 每层item -->
    <div style="border-bottom:1px solid #f7f9fc;" class="pl5 pr5">
        <div
            class="flex-ac flex-j-between"
            style="min-height:60px;"
            @click="setChooseCollapse($event)"
        >
            <span
                :class="
                        collapseBtnList[3] ===
                        choose
                            ? 'title span-click'
                            : 'title span-lose'
                    "
                >{{ collapseBtnList[3] }}</span
            >
            <Icon
                type="md-arrow-dropleft"
                size="20"
                :class="
                        collapseBtnList[3] ===
                        choose
                            ? 'triangle-route triangle-animation'
                            : 'triangle-animation triangle-base'
                    "
            />
        </div>

        <!-- 内容 -->
        <p
            :class="
                    collapseBtnList[3] === choose
                        ? 'content-show content-animation'
                        : 'content-hidden content-animation'
                "
            style="overflow:hidden;"
        >
            内容
        </p>
    </div>
</div>

javascript代码

<script>
const collapseBtnList = ['按钮1', '按钮2', '按钮3', '按钮4'] // 折叠面板的按钮文本
export default {
    data() {
        return {
            collapseBtnList,
            choose: collapseBtnList[0], // 点击的collapse Item编号
        }
    },
    methods: {
        setChooseCollapse(el) {
            let chooseCurrent = el.target.textContent
            this.choose = chooseCurrent
        }
    },
    watch: {},
    created() {
    },
    mounted() {
    },
}
</script>

样式代码

<style lang="scss" scoped>
// collapse内容显示
.content-show {
    height: 90px;
}
// collapse内容隐藏
.content-hidden {
    height: 0px;
}
// 添加内容高度变化时动画
.content-animation {
    // transition-property: height;
    // transition-duration: 0.15s;
    // transition-timing-function: cubic-bezier(0, 0.1, 0.15, 1);
    // transition-delay: 0.15s;
    transition: height 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s;
    -moz-transition: height 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Firefox 4 */
    -webkit-transition: height 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s;  /* Safari 和 Chrome */
    -o-transition: height 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Opera */
}

// 三角旋转
.triangle-route {
    transform: rotate(-90deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */
    color: #222222;
}
//  三角默认
.triangle-base {
    color: #cccccc;
}
// 三角旋转动画
.triangle-animation {
    // transition-property: all;
    // transition-duration: 0.15s;
    // transition-timing-function: cubic-bezier(0, 0.1, 0.15, 1);
    // transition-delay: 0.15s;
     transition: all 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s;
    -moz-transition: all 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Firefox 4 */
    -webkit-transition: all 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s;  /* Safari 和 Chrome */
    -o-transition: all 0.15s cubic-bezier(0, 0.1, 0.15, 1) 0.15s; /* Opera */
}
// 文本默认
.title {
    font-size: 16px;
    font-weight: bold;
}
// 点击collapse时的文本变化
.span-click {
    color: #212121;
}
// 点击其他collapse时的文本变化
.span-lose {
    color: #888888;
}
</style>

引入的Icon组件来自iview design
html代码中所使用的 global.scss部分样式

.pl5 {
    padding-left: 5px;
}
.pr5 {
    padding-right: 5px;
}
.flex-ac {
    display: flex;
    align-items: center;
}
.flex-j-between {
    display: flex;
    justify-content: space-between;
}

最后

根据所贴出的代码可复现功能

posted @   DAmarkday  阅读(3351)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示