弹出框

<template>
  <el-button type="default" size="mini" @click="model = true">打开弹出框</el-button>
  
  <vol-box :lazy="true"  v-model="model" title="弹出框"  :width="700" :padding="5" :onModelClose="onModelClose">
    <div style="height:300px">弹出框内容</div>
    <template #footer>
      <div>
        <el-button type="primary" size="small" @click="$Message.error('点击确认')">确认</el-button >
        <el-button type="default" size="small" @click="closeModel" >点击关闭弹出框</el-button >
      </div>
    </template>
  </vol-box>
</template>
<script>
import VolBox from '@/components/basic/VolBox.vue';
//这里使用的vue2语法，也可以写成vue3语法
export default {
  components: { 'vol-box': VolBox },
  methods: {},
  data() {
    return {
      model: false
    };
  },
  methods: {
    onModelClose(){
         alert('弹出框右上角点击x关闭事件')
    },
    closeModel(){
        this.model=false;
    }
  }
};
</script>