<style lang=sass>
@import "../../assets/components/_dialog.scss";
</style>
<template>
<div class="dialog-wrap" :class="activeCls" v-if="visible">
    <div class="overlay"></div>
    <div class="dialog">
        <div class="dialog-bd">
            <h3 class="bd-tt" v-if="title" v-text="title"></h3>
            <p class="bd-txt" v-text="content"></p>
        </div>
        <footer class="dialog-ft ft">
            <span class="ft-btn" @click="cancel" v-text="cancelText"></span>
            <span class="ft-btn" @click="ok" v-text="okText"></span>
        </footer>
    </div>
</div>
</template>

<script>
export default {
  props:{//继承父级组件参数
    title:String,
    content:String,
    className:String,
    transition:String,
    okText:{
        type:String,
        default:"确定"
    },
    cancelText:{
        type:String,
        default:"取消"
    },
    visible:{
        type:Boolean,
        default:false,
        twoWay:true
    }
  },
  data(){
    return{
      activeCls:null
    }
  },
  watch:{
     visible(val){
        val?this.activeCls="active":this.activeCls=null;
     }
  },
  methods:{
      ok(){
          this.visible=false;
          this.$emit("ok");
      },
      cancel(){
          this.visible=false;
          this.$emit("cancel");
      }
  }
}
</script>


