本文里的模态视图创建,加载在子组件上可成为模态视图,加载 在主组件上可成为子组件。通过创建模态视图的例子,首先总结学到几个Vue方面的技术点:
一、总结要点
1.模态视图创建的显示位置的CSS布局设置
//主背景
position: fixed;
//显示涂层
position: absolute;
2.组件间的数据传递
//父组件向子组件传递
1.子组件通过props 进行接收
props: {
editType: {
type: String,
required: true,//类型验证检查
default: String//默认类型
},
form: {
type: Object,
required: true,
default: Object
}
}
2.父组件传递
<EditApp :edit-type="editType" :form="editapp" @eventCancel="handleEditCancel"></EditApp>
//子组件向父组件传递:通过钩子函数回穿
handlecancel () {
this.$emit('eventCancel', this.update)
}
3.数据双向绑定,及对数据双向绑定带来的数据更改 所产生的影响处理
//数据深拷贝参考
https://blog.csdn.net/kangguang/article/details/104911910
//自定义js工具类导入
https://blog.csdn.net/kangguang/article/details/104911764
4.子组件挂载完成后的,子组件更新操作
//通过ref数据进行操作
设置ref点
<AppManager ref="referpage" ></AppManager>
//调用
handleEditCancel (isUpdate) {
if (isUpdate) {
this.$refs.referpage.initApps()
}
}
5.Element-UI el-form 的数字监测验证
//视图
<el-form :model="form" :rules="rules" ref="form" label-width="130px" >
<el-form-item label="客服QQ:" prop="qq">
<el-input placeholder="请输入客服QQ号码" v-model.number="form.qq"></el-input>
</el-form-item>
</el-form>
//验证规则
return {
rules: {
qq: [
{ validator: checknum, trigger: 'blur' }
],
}
}
//验证方法
data () {
var checknum = (rule, value, callback) => {
if (!value) {
return callback(new Error('内容不能为空'))
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'))
} else {
callback()
}
}, 1000)
}
}
6.loading 显示位置
//根据需要放在相应的div上
<div class="dialog_container">
<div class="dialog_content" v-loading="loading">
</div>
</div>
二、代码实现
1.模态视图代码
<template >
<div class="dialog_mask" >
<div class="dialog_container">
<div class="dialog_content" v-loading="loading">
<el-form :model="form" :rules="rules" ref="form" label-width="130px" class="demo-ruleForm" >
<el-form-item label="App名称:" prop="appname">
<el-input placeholder="请输入用户标签" v-model="form.appname"></el-input>
</el-form-item>
<el-form-item label="用户标签:" prop="tag">
<el-input placeholder="请输入用户标签" type="textarea" v-model="form.tag"></el-input>
</el-form-item>
<el-form-item label="搜索标签:" prop="seatag">
<el-input placeholder="请输入搜索标签" type="textarea" v-model="form.seatag"></el-input>
</el-form-item>
<el-form-item label="短信签名:" prop="wxname">
<el-input placeholder="请输入短信签名" v-model="form.wxname"></el-input>
</el-form-item>
<el-form-item label="客服QQ:" prop="qq">
<el-input placeholder="请输入客服QQ号码" v-model.number="form.qq"></el-input>
</el-form-item>
<el-form-item label="商务合作:" prop="buscoo">
<el-input placeholder="请输入商务合作QQ号码" v-model="form.buscoo"></el-input>
</el-form-item>
<el-form-item label="App详情地址:" prop="url">
<el-input placeholder="请输入详情页面链接地址" type="textarea" v-model="form.url"></el-input>
</el-form-item>
<el-form-item label="App审核版本:" prop="version" >
<el-input placeholder="输入app版本号" v-model="form.version"></el-input>
</el-form-item>
<el-form-item label="渠道号审核:" prop="channel" >
<el-input placeholder="输入渠道号" v-model.number="form.channel"></el-input>
</el-form-item>
<el-form-item>
<el-button v-show="editType=='add'" type="primary" @click="submitForm('form')">创建</el-button>
<el-button v-show="editType=='edit'" type="primary" @click="submitForm('form')">提交</el-button>
<el-button @click="resetForm('form')">重置</el-button>
<el-button @click="handlecancel">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import {postRequest} from '../../utils/api'
export default {
name: 'EditApp',
props: {
editType: {
type: String,
required: true,
default: String
},
form: {
type: Object,
required: true,
default: Object
}
},
data () {
var checknum = (rule, value, callback) => {
if (!value) {
return callback(new Error('内容不能为空'))
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'))
} else {
callback()
}
}, 1000)
}
return {
rules: {
appname: [
{ required: true, message: '请填写App名称', trigger: 'blur' }
],
tag: [
{ required: true, message: '请填写用户标签' },
{ min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
],
seatag: [
{ required: true, message: '请填写搜索标签' },
{ min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
],
wxname: [
{ required: true, message: '请填写短信签名', trigger: 'blur' },
{ min: 1, max: 64, message: '长度在 1 到 64 个字符', trigger: 'blur' }
],
qq: [
{ validator: checknum, trigger: 'blur' }
],
buscoo: [
{ required: true, message: '请至填写商务合作QQ号码', trigger: 'blur' }
],
url: [
{ required: true, message: '请填写app详情地址', trigger: 'blur' }
],
version: [
{ required: true, message: '请填写app版本好', trigger: 'blur' }
],
channel: [
{ validator: checknum, trigger: 'blur' }
]
},
update: false,
loading: false
}
},
methods: {
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// alert('submit!')
if (this.editType === 'add') {
this.postAddApp(this.form)
} else {
this.postUpdateApp(this.form)
}
} else {
console.log('error submit!!')
return false
}
})
},
postAddApp (app) {
this.loading = true
postRequest('/apps/addapp', app).then(data => {
this.loading = false
if (!data) {
return
}
this.update = true
})
},
postUpdateApp (app) {
this.loading = true
postRequest('/apps/updateapp', app).then(data => {
this.loading = false
if (!data) {
return
}
this.update = true
})
},
resetForm (formName) {
this.$refs[formName].resetFields()
},
handlecancel () {
this.resetForm('form')
this.$emit('eventCancel', this.update)
this.update = false
}
}
}
</script>
<style>
.dialog_mask{
position: fixed;
left: 220px;
top: 70px;
width: 100%;
height: 100%;
/*background: #fff;*/
background: rgba(0,0,0,0.5);
}
.dialog_container{
background: #fff;
width: 100%;
height: 100%;
position: absolute;
top: 0;
}
.dialog_content{
font-size: 12px;
background: #fff;
font-family: "Microsoft YaHei";
width: 40%;
margin-left: 10%;
margin-top: 40px;
position: absolute;
top: 0;
}
</style>
2.父组件相关代码
//挂载调用
<EditApp v-show="isEditApp" :edit-type="editType"
:form="editapp"
@eventCancel="handleEditCancel">
</EditApp>
//数据
data () {
return {
editapp: {},
editType: '',
user: JSON.parse(window.sessionStorage.getItem('user'))
}
},
//回调方法
handleEditCancel (isUpdate) {
this.isEditApp = false
this.editapp = {}
this.editType = ''
if (isUpdate) {
this.$refs.referpage.initApps()
}
}
三、参考博客
https://www.cnblogs.com/fozero/p/8546883.html