elementUI Dialog 封装

<template>
  <el-dialog
    title="绑定设备"
    :visible="visible"
    width="50%"
    append-to-body
    close-on-click-modal
    @close="$emit('update:visible', false)"
  >
    <el-form class="demo-form-inline" :rules="rules" ref="form" :model="form"
             label-width="80px">
      <el-form-item label="人员：" prop="person">
        <el-select v-model="form.person" style="width: 100%">
          <el-option
            v-for="item in personOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" size="mini">取 消</el-button>
        <el-button type="primary" @click="handleOk" size="mini">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
import {mapState} from "vuex";
import {getBindPersonList} from '@/api/device'

export default {
  name: "bindDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        person: ''
      },
      personOptions: [],
      rules: {
        person: [{required: true, message: '请选择绑定人员', trigger: 'change'},]
      }
    }
  },
  computed: {
    ...mapState({
      // 这里的`myModule`是模块注册时的名字
      userInfo: state => state.user.userInfo,
      projectUserInfo: state => state.user.projectUserInfo,
    }),
  },
  mounted() {
    getBindPersonList(this.projectUserInfo.orgId).then((res) => {
      this.personOptions = res.data.data
    })
  },
  methods: {
    handleClose() {
      this.$refs['form'].resetFields()
      this.$emit('update:visible', false)
    },
    handleOk() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('handleOk', this.form.person)
          this.form.person = ''
          this.$emit('update:visible', false)
          this.$refs['form'].resetFields()
        }
      })

    },
  }
}
</script>

<style scoped>

</style>

父组件调用

<BindDialog :visible.sync="visible" @handleOk = "handleOk" />

记得加上sync修饰符 子组件就不需要去this.visible来改变值并且回调一个方法 直接使用this.$emit('update:visible', false)

问题

1.封装之后 会发现点击x按钮关不掉弹窗，在子组件增加一个方法如下： @close="$emit('update:visible', false)"