封裝el-dialog
爲一個組件
我們在使用element-ui
的時候,如果一個彈窗中的內容很多,那麼我們經常會把這個彈窗封裝成一個組件,如下:
<!-- DetailDialog.vue html -->
<template>
<el-dialog title="標題" :visible.sync="visible" width="720px" >
<p>彈窗內容</p>
</el-dialog>
</template>
// DetailDialog.vue js
<script>
props: {
visible: {
type: Boolean,
default: false
}
}
</script>
el-dialog
會修改 props,並報錯
但是這樣會有一個問題,當觸發了el-dialog
內部的關閉事件時, 比如點擊彈窗陰影等, 它會emit
事件來修改當前組件的props [visible]
,由於組件不能直接修改prop
屬性,然後就會報錯。
我們新增了一箇中間變量innerVisible
,來攔截props [visible]
的修改和獲取
<!-- DetailDialog.vue html -->
<template>
<el-dialog title="標題" :visible.sync="innerVisible" width="720px" >
<p>彈窗內容</p>
</el-dialog>
</template>
// DetailDialog.vue js
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
computed: {
innerVisible: {
get: function() {
return this.visible
},
set: function(val) {
this.$emit('update:visible', val)
}
}
}
}
</script>
這樣在el-dialog
內部修改prop[visible]
的時候,我們會通過emit('update:')
的方式來通知父組件,避免直接修改props。當然父組件需要加上sync修飾符來接受修改:
<!-- father.vue html -->
<DetailDialog :visible.sync="detailVisible" />
到此爲止,封裝的彈窗組件已經沒有問題了。
繼續優化,使用v-model控制顯示隱藏
// DetailDialog.vue js
<script>
export default {
model: {
prop: 'visible', // 修改 v-model 綁定的props名稱
event: 'toggle' // 修改 v-model 綁定的自定義事件名
},
props: {
visible: {
type: Boolean,
default: false
}
},
computed: {
innerVisible: {
get: function() {
return this.visible
},
set: function(val) {
this.$emit('update:toggle', val)
}
}
}
}
</script>
接入了v-model
,使用起來就更高大上而且整潔了
<!-- father.vue html -->
<DetailDialog v-model="detailVisible" />
繼續優化,封裝成mixins
當頻繁封裝彈窗組件時,那麼上述邏輯也需要不停地複製,所以繼續優化,把上述控制顯示隱藏的邏輯封裝成了mxins
,直接複用即可
// vModelDialog.js
export default {
model: {
prop: 'visible',
event: 'toggle'
},
props: {
visible: {
type: Boolean,
default: () => {
return false
}
}
},
computed: {
innerVisible: {
get: function() {
return this.visible
},
set: function(val) {
this.$emit('toggle', val)
}
}
}
}
那麼封裝彈窗插件時,只需引入mixins
即可完成顯示隱藏邏輯。
// DetailDialog.vue js
<script>
import vModelDialog from './vModelDialog.js'
export default {
mixins: [vModelDialog],
}
</script>