封裝el-dialog為一個組件
我們在使用element-ui的時候，如果一個彈窗中的內容很多，那么我們經常會把這個彈窗封裝成一個組件，如下：
|
1
2
3
4
5
6
|
<!-- DetailDialog.vue html --><template> <el-dialog title="標題" :visible.sync="visible" width="720px" > <p>彈窗內容</p> </el-dialog></template> |
|
1
2
3
4
5
6
7
8
9
|
// DetailDialog.vue js<script> props: { visible: { type: Boolean, default: false } }</script> |
el-dialog會修改 props，并報錯
但是這樣會有一個問題，當觸發了el-dialog內部的關閉事件時， 比如點擊彈窗陰影等， 它會emit事件來修改當前組件的props [visible]，由于組件不能直接修改prop屬性，然后就會報錯。
我們新增了一個中間變量innerVisible，來攔截props [visible]的修改和獲取
|
1
2
3
4
5
6
|
<!-- DetailDialog.vue html --><template> <el-dialog title="標題" :visible.sync="innerVisible" width="720px" > <p>彈窗內容</p> </el-dialog></template> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// 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修飾符來接受修改：
|
1
2
|
<!-- father.vue html --><DetailDialog :visible.sync="detailVisible" /> |
到此為止，封裝的彈窗組件已經沒有問題了。
繼續優化，使用v-model控制顯示隱藏
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// 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，使用起來就更高大上而且整潔了
|
1
2
|
<!-- father.vue html --><DetailDialog v-model="detailVisible" /> |
繼續優化，封裝成mixins
當頻繁封裝彈窗組件時，那么上述邏輯也需要不停地復制，所以繼續優化，把上述控制顯示隱藏的邏輯封裝成了mxins，直接復用即可
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// vModelDialog.jsexport 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即可完成顯示隱藏邏輯。
|
1
2
3
4
5
6
7
|
// DetailDialog.vue js<script>import vModelDialog from './vModelDialog.js'export default { mixins: [vModelDialog],}</script> |
以上就是element-ui 彈窗組件封裝的步驟的詳細內容，更多關于element-ui 彈窗組件封裝的資料請關注服務器之家其它相關文章！
原文鏈接：https://juejin.cn/post/6920160545962197006
