vue基础弹出层封装

<template>
  <div @click.self="handleCancel" class="logout">
    <Frame :shape="3" class="contain">
      <div class="title">
        <slot name="title"></slot>
      </div>
      <div class="main">
        <slot name="info"></slot>
      </div>
      <div class="btn" @click.stop="exit">
        <slot name="btn"></slot>
      </div>
    </Frame>
  </div>
</template>

<script>
export default {
  name: "logout",

  components: {},
  props: {
    popShow: {
      type: Boolean
    }
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  methods: {
    /**
     * 取消退出登录
     */
    handleCancel() {
      this.$emit("update:popShow", false);
    },
    /**
     * 退出登录
     */
    exit() {}
  }
};
</script>

<style scoped lang='less'>
.logout {
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 4;
  .contain {
    text-align: center;
    background-color: #211f4a;
    height: 2.2vw;
    .title {
      line-height: 5.6vw;
      .fz20m;
      font-weight: 700;
    }
    .main {
      .fz16m;
      height: 3.3vw;
    }
    .btn {
      width: 9.6vw;
      height: 2.2vw;
      line-height: 2.2vw;
      margin-bottom: 1vw;
      display: inline-block;
      ::v-deep {
        span {
          border-radius: 3px;
          display: inline-block;
          background-color: #008cb9;
          width: 48%;
          height: 100%;
          .cur;
          float: left;
          &:last-child {
            float: right;
          }
          &.active,
          &:hover {
            background-image: linear-gradient(269deg, #74e1ef 0%, #0ea4b6 100%),
              linear-gradient(#49c1c6, #49c1c6);
            background-blend-mode: normal, normal;
          }
        }
      }
      .fz14f;
    }
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    margin: auto;
    width: 27.9vw;
    height: 13vw;
  }
}

.active {
  background-color: #24b4af;background-image: linear-gradient(0deg, #0f3b83 0%, #24b4af 100%),
    linear-gradient(#0c6d9b, #0c6d9b) !important;
}
</style>