本文主要介紹了vue+elementui通用彈窗的實現(新增+編輯)，分享給大家，具體如下：

組件模板

<el-dialog :title='title' :visible.sync='dialogShow' :close-on-click-modal='false'> <div :class='customClass'> <div v-for='(col,index) in cols'> <span><em v-if='!!col.isRequire'>*</em>{{col.name}}</span> <template v-if='col.type === ’text’'><div>{{submitData[col.key]}}</div> </template> <template v-if='col.type === ’input’'><input type='text' v-model='submitData[col.key]' :placeholder='’請輸入’ + col.name'> </template> <template v-if='col.type === ’radio’'><div class='flexX'><el-radio v-for='radio in col.data' v-model='submitData[col.key]' :label='radio.label'>{{radio.name}}</el-radio></div> </template> <template v-if='col.type === ’select’'><el-select v-model='submitData[col.key]' placeholder='請選擇'> <el-option v-for='option in col.data' :key='option.value' :label='option.label' :value='option.value'> </el-option></el-select> </template> </div> </div> <span slot='footer' class='dialog-footer'> <el-button @click='dialogShow = false'>取 消</el-button> <el-button type='primary' @click='confirm'>確 定</el-button> </span></el-dialog>

彈窗的內容根據傳入的數據去渲染，數據格式如下

cols: [{ name: ’輸入框’, key: ’ccc’, // 提交時對應的字段 type: ’input’, // 類型 isRequire: true // 是否必填}, { name: ’單選框’, key: ’aaa’, type: ’radio’, data: [{ label: ’1’, name: ’長城’ }, { label: ’2’, name: ’長安’ }], isRequire: true}, { name: ’下拉框’, key: ’bbb’, type: ’select’, data: [{ value: ’選項1’, label: ’黃金糕’ }, { value: ’選項2’, label: ’雙皮奶’ }], isRequire: true}],

組件data和props

data() { return { submitData: {}, // 提交數據集合 dialogShow: false }},props: { // 彈窗顯示/隱藏 dialogVisible: { type: Number, default: 0 }, // 彈窗Title title: String, // 自定義樣式 customClass: String, // 數據列 cols: { type: Array, default: () => [] }, // 編輯時傳入初始值 data: { type: Object, default: () => {} }},

組件數據的監聽

watch: { dialogVisible(val) { if (val > 0) { this.dialogShow = true } }, data: { handler(val) { this.submitData = val }, immediate: true }, submitData: { // 應對 切換單選框隱藏其他元素的問題 // 父組件監聽到單選框的值變化時，修改cols的值，即可實現元素的隱藏與顯示 handler() { this.$emit(’change’, this.submitData) }, deep: true }}

數據提交以及驗證

confirm() { // 驗證必填項 let isMust = this.cols.filter(item => item.isRequire).map(item => item.key) Object.keys(this.submitData).forEach(key => { let index = isMust.indexOf(key) if ((index > -1) && this.submitData[key] !== ’’ && !!this.submitData[key]) { isMust.splice(index, 1) } }) if (isMust.length > 0) { showDefaultTips(’請注意必填項!’, ’’, 3) return } this.$emit(’complete’, this.submitData) this.dialogShow = false}

代碼在此

到此這篇關于vue+elementui通用彈窗的實現(新增+編輯)的文章就介紹到這了,更多相關vue elementui 彈窗內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！