1. 程式人生 > 實用技巧 >dialog彈窗優雅寫法

dialog彈窗優雅寫法

 <!-- -----彈窗------ -->
    <new-adddialog  :dialog-visible.sync="newAddvisible"></new-adddialog>

data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'childNodes',
        label: 'name',
        isLeaf: 'leaf',
      },
      filterText: '',
      // 彈窗
      tableData: [],
      newAddvisible:false,  //新增彈窗
      loading: false,

method:{
    // 新增
    newAddclick(){
      this.newAddvisible = true
      
    }
}

 子元件

 props: {
    dialogVisible: { type: Boolean, require: true, default: false },
    subTaskInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },

  通過'update:dialogVisible',可以實時更新父元件的newAddvisible的值
 
<span slot="footer" class="dialog-footer"> <el-button @click="()=>{this.$emit('update:dialogVisible', false)}">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">確 定</el-button> </span>