el-dialog使用心得

<el-dialog title="修改协作人"
           width="600px"
           :visible.sync="isOpen"
           :before-close="cancelDialogFn"
           :modal-append-to-body="false"
           append-to-body
           :close-on-click-modal="false">

  <div slot="footer" class="dialog-footer">
    <el-button @click="affirmDialogFn" type="primary">确认</el-button>
    <el-button @click="cancelDialogFn">关 闭</el-button>
  </div>
</el-dialog>

export default {
  name: "selectProduct",
  props:['isOpen'],
  data(){
    return {

    }
  },
  methods:{
    affirmDialogFn(){

    },
    cancelDialogFn(){

    },
  }
}

:visible.sync : 是否显示Dialog

:before-close : 关闭前的回调，会暂停 Dialog 的关闭

:modal-append-to-body : 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上

append-to-body : Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true

close-on-click-modal : 点击旁边 是否关闭 对话框