Vue封装组件-面板2-LjPanel2

阳光穿透心脏的1/2处 2022-09-03 16:18 125阅读 0赞

效果图：

![20210809113400706.png][]![20210809093006114.png][]

使用：

LjPanel2.vue:

<template>
      <div class="LjPanel2" :style="{ width: width }">
        <div class="LjPanel2_head">
          <span>{
       { title }}</span>
          <span v-if="showCloseBtn" class="closeBtn" @click="closeBtn()">x</span>
        </div>
        <div class="content" :style="{ height: height_content }">
          <el-scrollbar style="height: 100%">
            <slot></slot>
          </el-scrollbar>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "LjPanel2",
      components: {},
      props: {
        title: {
          type: String,
          default: "标题",
        },
        width: {
          type: String,
          default: "100%",
        },
        //设置此属性，让滚动条生效
        height_content: {
          type: String,
          default: "50px",
          required: true,
        },
        showCloseBtn: {
          type: Boolean,
          default: true,
        },
      },
      data() {
        return {};
      },
      computed: {},
      created() {},
      mounted() {},
      filters: {},
      methods: {
        closeBtn() {
          this.$emit("closeBtn");
        },
      },
      watch: {},
    };
    </script>
    
    <style lang="scss" scoped>
    $primary_color: #32b6ff;
    
    .LjPanel2 {
      border: 2px solid $primary_color;
      background-color: rgba(12, 12, 12, 0.6);
      min-width: 120px;
      color: white;
      font-size: 18px;
    
      .LjPanel2_head {
        border-bottom: 1px solid $primary_color;
        text-align: center;
        line-height: 40px;
        word-break: break-all;
        caret-color: transparent;
    
        .closeBtn {
          float: right;
          padding-right: 10px;
    
          &:hover {
            color: $primary_color;
            cursor: pointer;
          }
        }
      }
      .content {
        padding: 15px;
        word-break: break-all;
        ::v-deep .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
    }
    </style>

[20210809113400706.png]: https://img-blog.csdnimg.cn/20210809113400706.png
[20210809093006114.png]: /images/20220829/1dc1cdbfbf114be181a27781fa35afac.png