弹窗组件 - 1556461835/note GitHub Wiki

<template>
  <el-dialog :visible.sync="isShow" :title="dialogTitle" @close="closeDialog">
    <el-form ref="ValidateForm" :model="form">
      <el-form-item :label-width="formLabelWidth" label="姓名">
        <el-input
          v-model="form.name"
          autocomplete="off" />
      </el-form-item>
      <el-form-item
        :label-width="formLabelWidth"
        label="日期">
        <el-input
          v-model="form.date"
          autocomplete="off" />
      </el-form-item>
      <el-form-item
        :label-width="formLabelWidth"
        label="地址">
        <el-input
          v-model="form.address"
          autocomplete="off" />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer">
      <el-button @click="handleclose">取 消</el-button>
      <el-button
        type="primary"
        @click="sure">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    formData: {
      type: Object,
      default: function() {
        return null
      }
    },
    dialogFlag: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      form: {
        name: '',
        date: '',
        address: ''
      },
      formArr: [],
      formLabelWidth: '60px',
      dialogTitle: '编辑表单',
      isShow: false
    }
  },
  watch: {
    dialogFlag: {
      handler(newValue) {
        if (newValue === 'add') {
          console.log(this.form)
          this.dialogTitle = '添加表单'
          this.formArr.map(o => {
            this.form[o] = ''
          })
        } else if (newValue === 'edit') {
          this.dialogTitle = '编辑表单'
          this.formArr.map(o => {
            this.form[o] = JSON.parse(JSON.stringify(this.formData[o]))
          })
        }
      },
      deep: true,
      immediate: true
    },
    form: {},
    dialogFormVisible: {
      handler(newName, oldName) {
        this.isShow = newName
      }
    },
    isShow(newVal) {
      this.$emit('update:dialogFormVisible', newVal)
    }
  },
  created() {
    for (let val in this.form) {
      this.formArr.push(val)
    }
  },
  methods: {
    /**
     * description:确定按钮
     */
    sure() {
      let data = {
        viaible: this.dialogFormVisible,
        form: this.form
      }
      this.$emit('submit', data)
    },
    /**
     * description:取消按钮
     */
    handleclose() {
      this.$emit('cancel', this.dialogFormVisible)
    },
    /**
     * @description:关闭弹窗按钮
     */
    closeDialog() {
      this.isShow = false
      console.log(this.isShow)
    }
  }
}
</script>

<style>
</style>