<template>
? ? <transition
? ? ? ? ? ? name="dialog-fade"
? ? ? ? ? ? @after-enter="afterEnter"
? ? ? ? ? ? @after-leave="afterLeave">
? ? ? ? <div v-show="visible">
? ? ? ? ? ? <div class="md-wapper" >
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="md-content" @click.self="handleOut">
? ? ? ? ? ? ? ? <slot></slot>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </transition>
</template>

<script>
? ? export default {
? ? ? ? name: "MyDialog",
? ? ? ? data(){
? ? ? ? ? ? return{
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? props:{
? ? ? ? ? ? visible: {
? ? ? ? ? ? ? ? type: Boolean,
? ? ? ? ? ? ? ? default: false
? ? ? ? ? ? },
? ? ? ? ? ? closeOnClickModal: {
? ? ? ? ? ? ? ? type: Boolean,
? ? ? ? ? ? ? ? default: true
? ? ? ? ? ? },
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? afterEnter(){

? ? ? ? ? ? },
? ? ? ? ? ? afterLeave(){

? ? ? ? ? ? },
? ? ? ? ? ? handleOut(){
? ? ? ? ? ? ? ? // this.visible =false
? ? ? ? ? ? ? ? if(this.closeOnClickModal){
? ? ? ? ? ? ? ? ? ? this.$emit("closeMyDialog")
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },

? ? }
</script>

<style scoped lang="less">
? ? .md-wapper{
? ? ? ? z-index: 10;
? ? ? ? position: fixed;
? ? ? ? left: 0;
? ? ? ? top: 0;
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? opacity: .5;
? ? ? ? background: #000;
? ? }
? ? .md-content{
? ? ? ? z-index: 11;
? ? ? ? position: fixed;
? ? ? ? left: 0;
? ? ? ? top: 0;
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? }
</style>

import MyDialog from './MyDialog';

MyDialog.install = function(Vue) {
? ? Vue.component(MyDialog.name, MyDialog);
};

export default MyDialog;

// 引入自定義彈框組件
import MyDialog from '@/common/my-dialog/index'
Vue.use(MyDialog)

<template v-else>
?<div class="ds-bg">
? ?<my-dialog :visible="true">
? ? ? ? <div class="da-sty">
? ? ? ? ? ? ?<div class="da-show">
? ? ? ? ? ? ? ?<div class="da-name">
? ? ? ? ? ? ? ? ?我要報名
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ?</my-dialog>
? ? </div>
</template>