弹窗效果
vue element ui dialog对话框弹窗二次封装
功能
接口请求,表单验证
代码
/**
* @Author: 858834013@qq.com
* @Name: addAdmin
* @Date: 2022-05-04
* @Desc: 新增人员
*/
<template>
<div>
<div @click="getShow">
<slot></slot>
</div>
<el-dialog
title="提示"
@close="getHide"
append-to-body
:visible.sync="show"
width="40%"
>
<el-form
:model="ruleForm"
ref="ruleForm"
label-width="70px"
:rules="rules"
class="demo-ruleForm"
>
<el-form-item label="账 号" prop="phone">
<el-input v-model="ruleForm.phone"></el-input>
</el-form-item>
<el-form-item label="密 码" prop="password">
<el-input v-model="ruleForm.password" type="password"></el-input>
</el-form-item>
<div style="text-align:right;">
<el-button @click="getHide">取 消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
</div>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { addAdmin } from '@/api/user'
export default {
name: 'addAdmin',
components: {},
data() {
return {
show: false,
ruleForm: {
phone: '',
password: ''
},
rules: {
phone: [
{ required: true, message: '请输入账号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
watch: {},
mounted() {
},
methods: {
getHide() {
this.show = false
},
getShow() {
this.show = true
},
submitForm(formName) {
var that = this
that.$refs[formName].validate(valid => {
if (valid) {
let params = {
password: this.ruleForm.password,
phone: this.ruleForm.phone
}
addAdmin(params).then(function(res) {
that.$message({
type: 'success',
message: '添加成功'
})
that.show = false
that.$emit('getdata', 1)
})
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
<style lang="scss" scoped>
</style>