vue中使用mixins提高弹框编写效率

使用vue开发后台系统会有大量弹框, 弹框一般都在做增改查操作,我们可以编写mixins,吧一些公共函数做个封装,可以极大提高开发效率

mixins/dlg.js

export default {
  data() {
    return {
      title: '',
      dialogVisible: false,
      btnLoading: false,
      type: 'add',
    }
  },
  methods: {
    show(type, row) {
      this.type = type || 'add'
      if (row) {
        this.form = Object.assign({},row)
      }
      this.dialogVisible = true
    },
    setTitle(tit) {
        this.title = tit
    },
    submitForm(formName, successText) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.btnLoading) return
          this.btnLoading = true
          try {
            await this.submit()
            this.btnLoading = false
            this.$message.success(successText || '操作成功')
            this.$emit('success', Object.assign({}, this.form))
            this.handleClose()
          } catch (error) {
            console.log('error', error)
            this.btnLoading = false
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      try {
        this.$refs['form'].resetFields()
        if (!this.noReset) {
          Object.assign(this.$data, this.$options.data())
        }
        if (typeof this.afterClose === 'function') {
          this.afterClose()
        }
      } catch (error) {
        console.log('error', error)
      }
    },
  },
}

使用: dlg.vue

<template>
    <div class="add-dlg">
        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose"
        >
            <el-form :model="form" status-icon :rules="rules" label-width="120px" ref="form" :disabled="type == 'view'">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="type !== 'view'">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" :loading="btnLoading" @click="submitForm('form')">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import dlg from '@/mixins/dlg'

export default {
    name: 'add-dlg',
    mixins: [dlg],
    data() {
        return {         
            form: {
                name: ''
            },
            rules: {
                name: [{ required: true, message: '该项不能为空', trigger: 'blur' }]
            }
        }
    },
    methods: {        
        submit() {
            let params = {
                ...this.form,
            }
            if (this.type === 'add') {
                return this.$api.post('/add', params) // 这里是示例 return一个Promise
            } else {
                return this.$api.post('/edit', params)
            }
        },
        afterClose() {}
    }
}
</script>