Vue封装组件-通用面板-LjPanel

àì夳堔傛蜴生んèń 2022-09-03 00:27 251阅读 0赞

![20210804180016384.png][]

![20210804180036526.png][]

1.  作为底板时，通常设置属性：padding:10px;并设置关闭按钮可见：:isShowBtnClose="true"

使用：

LjPanel.vue:

<template>
      <div class="LjPanel" :style="{ padding: padding, width: width }">
        <div class="LjPanelHead" :style="{ color: headColor }">
          <span v-if="isShowTitle">{
       { title }}</span>
          <span class="btnClose" v-if="isShowBtnClose" @click="btnClose()">x</span>
        </div>
        <div class="content">
          <slot></slot>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "LjPanel",
      components: {},
      props: {
        title: {
          type: String,
          default: "title",
        },
        width: {
          type: String,
          default: "100%",
        },
        headColor: {
          type: String,
          default: "orange",
        },
        padding: {
          type: String,
          default: "0px",
        },
        isShowBtnClose: {
          type: Boolean,
          default: false,
        },
        isShowTitle: {
          type: Boolean,
          default: true,
        },
      },
      data() {
        return {};
      },
      computed: {},
      created() {},
      mounted() {},
      filters: {},
      methods: {
        btnClose() {
          this.$emit("closePanel");
        },
      },
      watch: {},
    };
    </script>
    
    <style lang="scss" scoped>
    .LjPanel {
      background-color: rgba(41, 41, 41, 0.589);
      color: white;
      .LjPanelHead {
        line-height: 40px;
        border-left: 5px solid;
        font-weight: bold;
        padding-left: 10px;
        font-size: 20px;
        background-color: rgba(36, 36, 36, 0.685);
        caret-color: transparent;
    
        .btnClose {
          float: right;
          padding-right: 10px;
          &:hover {
            cursor: pointer;
            color: rgb(185, 30, 9);
          }
        }
      }
      .content {
        padding: 10px;
      }
    }
    </style>

[20210804180016384.png]: /images/20220829/4e400bfdcf1642fa8c7b27a922d8225a.png
[20210804180036526.png]: /images/20220829/4d53ab7aeec44d43bfbef113023210a4.png