Vue 模态视图创建

本文里的模态视图创建，加载在子组件上可成为模态视图，加载 在主组件上可成为子组件。通过创建模态视图的例子，首先总结学到几个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