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

組件模板

<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>

彈窗的內(nèi)容根據(jù)傳入的數(shù)據(jù)去渲染，數(shù)據(jù)格式如下

cols: [{ name: ’輸入框’, key: ’ccc’, // 提交時對應(yīng)的字段 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: {}, // 提交數(shù)據(jù)集合 dialogShow: false }},props: { // 彈窗顯示/隱藏 dialogVisible: { type: Number, default: 0 }, // 彈窗Title title: String, // 自定義樣式 customClass: String, // 數(shù)據(jù)列 cols: { type: Array, default: () => [] }, // 編輯時傳入初始值 data: { type: Object, default: () => {} }},

組件數(shù)據(jù)的監(jiān)聽

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

數(shù)據(jù)提交以及驗證

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}

代碼在此

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