Vue封装组件-面板3-LjPanel3

迷南。 2022-09-04 00:52 206阅读 0赞

# 效果图： #

![20210809162246703.png][]

#  使用： #

# LjPanel3 #

<template>
      <div class="LjPanel3" :style="{ width: width, backgroundColor: bgColor }">
        <span class="btnClose" v-if="showBtnClose" @click="closeBtn">x</span>
        <div class="content" :style="{ height: height_content }">
          <el-scrollbar style="height: 100%">
            <slot></slot>
          </el-scrollbar>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "LjPanel3",
      components: {},
      props: {
        width: {
          type: String,
          default: "100%",
        },
        bgColor: {
          type: String,
          default: "rgba(2, 2, 2, 0.418)",
        },
        showBtnClose: {
          type: Boolean,
          default: true,
        },
        //设置此属性，让滚动条生效
        height_content: {
          type: String,
          default: "",
        },
      },
      data() {
        return {};
      },
      computed: {},
      created() {},
      mounted() {},
      filters: {},
      methods: {
        closeBtn() {
          this.$emit("closeBtn");
        },
      },
      watch: {},
    };
    </script>
    
    <style lang="scss" scoped>
    .LjPanel3 {
      position: relative;
      color: white;
      font-size: 18px;
      .btnClose {
        position: absolute;
        right: 10px;
        top: 10px;
        color: white;
        z-index: 9999;
        &:hover {
          cursor: pointer;
          color: rgb(185, 185, 185);
        }
      }
      .content {
        min-height: 35px;
        min-width: 50px;
        padding: 10px;
        ::v-deep .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
    }
    </style>

[20210809162246703.png]: /images/20220829/0e3c485102e34e75a6684153958eeb30.png