Vue封装组件-可折叠面板 LjCollapse

短命女 2022-09-03 00:17 86阅读 0赞

效果图：

![20210804160353514.png][]

![20210804160401616.png][]

使用：

LjCollapse.vue:

<template>
      <div class="LjCollapse" :style="{ backgroundColor: bgColor, width: width }">
        <div
          class="LjCollapseHead"
          :style="{
            color: headColor,
            borderLeftColor: headColor,
          }"
          @click="collapse = !collapse"
        >
          <span>{
       { title }}</span>
          <span style="float: right">
            <i v-if="collapse" class="el-icon-arrow-down"></i>
            <i v-else class="el-icon-arrow-right"></i>
          </span>
        </div>
        <div style="margin-top: 10px; font-size: 18px" v-if="collapse">
          <slot></slot>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "LjCollapse",
      components: {},
      props: {
        title: {
          type: String,
          default: "标题",
        },
        headColor: {
          type: String,
          default: "orange",
        },
        bgColor: {
          type: String,
          default: "rgba(41, 41, 41, 0.589)", //浅黑
          // default: "#253266b7",//浅蓝
        },
        width: {
          type: String,
          default: "100%",
        },
        isCollapse: {
          type: Boolean,
          default: true,
        },
      },
      data() {
        return {
          collapse: this.isCollapse,
        };
      },
      computed: {},
      created() {},
      mounted() {},
      filters: {},
      methods: {},
      watch: {},
    };
    </script>
    
    <style lang="scss" scoped>
    .LjCollapse {
      color: white;
      background-color: rgba(41, 41, 41, 0.589);
      padding: 10px;
    
      .LjCollapseHead {
        line-height: 30px;
        border-left: 5px solid;
        font-weight: bold;
        padding-left: 10px;
        font-size: 20px;
        caret-color: transparent;
        &:hover {
          cursor: pointer;
        }
      }
    }
    </style>

[20210804160353514.png]: /images/20220829/ce2e203ea20d419080e86096a2d09583.png
[20210804160401616.png]: /images/20220829/295cba52026e465baa6664e772842256.png