封装dialog弹窗

封装

<template>
  <!-- 遮罩层 -->
  <div
    v-if="isShowPop"
    class="pop_box"
  >
	<!-- 内容 -->
    <div class="pop_content">
      <div class="content_box">
        <div class="content">
          <div v-html="popInfo" />
        </div>
        <div
          class="btn"
          @click="closePopup"
        >确认</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    isShowPop: {
      type: Boolean,
      default: false
    },
    dataInfo: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },
  computed: {
    isShow() {
      return this.isShowPop
    },
    popInfo() {
      return this.dataInfo
    }
  },
  methods: {
    closePopup() {
      this.$emit('close')
    }
  }
}
</script>
<style lang="less" scoped>
  .pop_box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: 10000;
    .pop_content {
      height: 100%;
      width: 100%;
      display: flex;
      z-index: 10001;
      justify-content: center;
      align-items: center;
      .content_box {
        width: 265px;
        background: #FFFFFF;
        border-radius: 10px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #303133;
        .content {
          padding: 30px 20px 0 20px;
          line-height: 22px;
        }
      }
      .btn {
        margin-top: 19px;
        height: 48px;
        line-height: 48px;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #71A8FF;
        text-align: center;
        font-weight: 500;
        border-top: 0.5px solid rgba(237,237,237,1);
        border-radius: 0 0 10px 10px;
      }
    }
  }
</style>

使用

<template>
  <div>
	<div @click="showPop">打开弹窗</div>
    <confirm-pop
	  v-if="isShowPop"
	  :dataInfo="KTBInfo"
	  :is-show-pop="isShowPop"
	  @close="closePop"
	/>
  </div>
  
</template>

import confirmPop from '@/components/confirm-pop/confirmPop.vue'

export default {
  components: {
    confirmPop
  },
  data() {
    return {
      KTBInfo: '',
      isShowPop: false
    }
  },
  methods: {
  	showPop() {
      this.isShowPop = true
    },
  	closePop() {
      this.isShowPop = false
    }
  }
}