elementUI 的el-dialog作为子组件，父组件如何控制其关闭的按钮

转载

mob604756e6f1ac 2019-11-21 20:33:00

文章标签 推送显示隐藏 sed 数据 文章分类 代码人生

这里有三点需要说明：

1. 使用：before-close="closeHandle" 将其 $emit() 出去

2. 取消按钮也需要$emeit出去

3. 控制对话框显示隐藏的变量需要props给父组件来传值，这个相当重要，不然控制不了对话框的显示隐藏

4.1,2步骤是为了在子组件不再重复操作显示隐藏的变量，vue会报错

现在看代码：

对话框子组件：

<el-dialog
      :title="dialogTitle"
      :visible.sync="createDialog"
      width="544px"
      center
      custom-class="dialogStyle"
      :before-close="handleClose">
      <el-form ref="pushForm" label-position="right" :model="pushForm" :rules="Rules" label-width="100px">
        <el-form-item label="URL" prop="url">
          <el-input placeholder="请输入URL链接" clearable v-model="pushForm.url"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="depicts">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入备注内容（255字符以内）"
            v-model="pushForm.depicts"
            maxlength="255">
          </el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="isEnable">
          <el-radio-group v-model="pushForm.isEnable">
            <el-radio :label="0">启用</el-radio>
            <el-radio :label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitPushForm">确 定</el-button>
      </div>
    </el-dialog>
export default {
  name: '',
  props: {
    title: {
      type: String,
      default: ''
    },
    createDialog: {
      type: Boolean
    }
    // pushDataList: {
    //   type: Array,
    //   // default: []
    // }
  },

....
methods: {
    addDialog (sign, item) {
      // this.createDialog = true
      this.$emit('opendialog')
      this.dialogTitle = sign + this.title
      this.typeNum = item.type
      this.reMark = sign
    },
    editDialog (sign, item) {
      // this.createDialog = true
      this.$emit('opendialog')
      this.dialogTitle = sign + this.title
      this.typeNum = item.type
      this.reMark = sign
    },
    submitPushForm () {
      this.$refs.pushForm.validate((valid) => {
        if (valid) {
          console.log(this.pushForm)
          this.pushForm.type = this.typeNum
          if (this.reMark === '添加') {
            this.$emit('addPushHandle', this.pushForm)
          } else if (this.reMark === '编辑') {
            this.$emit('updatePushHandle', this.pushForm)
          }
        } else {
          console.log('error submit!')
        }
      })
    },
    handleClose () {
      this.$emit('closeDialog') // 取消和 x 按钮的事件，防止重复操作createDialog变量

}, }

父组件：

<push-data :title="title" :createDialog="createDialog" @opendialog="opendialog" @addPushHandle="addPushHandle" @updatePushHandle="updatePushHandle" @closeDialog="closeHandle"></push-data>

data () {
    return {
      title: '应用推送',
      createDialog: false
    }
  },
  methods: {
    opendialog () {
      this.createDialog = true
    },
    addPushHandle (form) {
      // console.log('添加应用推送')
      // console.log(form)
      // console.log(this.applicationId)
      let params = Object.assign({},form,{applicationId: this.applicationId})
      console.log(params)
      this.createDialog = false  // 亲测。操作dialog可以生效
    },
    updatePushHandle (form) {
      console.log('编辑应用推送')
      applicationPushUpdate().then((res) => {

      }).catch((err) => {

      })
    },
    closeHandle () {
      this.createDialog = false  // 控制取消和X按钮，关闭弹窗
    }