vue封装弹框组件

1、引入弹框组件

<Popout v-show="isPrpout" v-on:confirm="onConfirm" v-on:cancel="onCancel" />

2、点击显示弹框

<button @click="onClick">点击</button>

3、在组建内使用

import Popout from './Popout'
export default {
  components: {
    Popout
  },
  data () {
    return {
      isPrpout: false
    }
  },
  methods: {
  
  	// 点击显示弹框
    onClick () {
      this.isPrpout = true
    }
  
    // 点击确定隐藏
    onConfirm (val) {
      console.log(val)
      this.isPrpout = false
    },
    
    // 点击取消隐藏
    onCancel () {
      this.isPrpout = false
    }
  }
}

组件代码

<template>
    <div class="popout">    <!-- 弹框组件 -->
        <div class="popout_box">
            <div class="popout_box_top">
                <h1>内容</h1>
            </div>
            <div class="popout_box_bot">
                <p v-on:click="onConfirm">确定</p>
                <p v-on:click="onCancel">取消</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      isPrpout: true
    }
  },
  methods: {
    //  点击确定
    onConfirm () {
      this.$emit('confirm',"确定111")
    },
    // 点击取消
    onCancel () {
      this.$emit('cancel',"取消111")
    }
  }
}
</script>

<style scoped>
.popout{
    width: 100vw;height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popout_box{
    width: 80%;height: 25%;
    background-color: white;
}
.popout_box_top{
    width: 100%;height: 75%;
    background-color: tomato;
}
.popout_box_bot{
    width: 100%;height: 25%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.popout_box_bot p{
  width: 15%;height: 75%;
  background-color: #E6E6E6;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

@ cc