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

效果图： 

 

 使用：

      <LjCollapse
        title="这是标题"
        headColor="orange"
        width="400px"
        bgColor="rgba(41, 41, 41, 0.589)"
        :isCollapse="true"
      >
        这是内容...
      </LjCollapse>

LjCollapse.vue:

<!--LjCollapse-->
<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>