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

最新推荐文章于 2024-08-04 21:18:46 发布

疆~

最新推荐文章于 2024-08-04 21:18:46 发布

阅读量677

点赞数

分类专栏： Vue2

本文链接：https://blog.csdn.net/qq_40323256/article/details/119390079

版权

Vue2 专栏收录该内容

196 篇文章 59 订阅

订阅专栏

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

使用：

      <LjPanel
        title="标题"
        v-if="isDkInfoPanelVisible"
        :isShowTitle="false"
        :isShowBtnClose="true"
        @closePanel="closeDkInfoPanel"
        width="600px"
        padding="10px"
        >
        内容
      </LjPanel>

LjPanel.vue:

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