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