Teleport
遇到的问题:
- Dialog 被包裹在其他组件之中,容易被干扰
- 样式也在其他组件中,容易变得非常混乱
新建src/components/Modal.vue
:
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 |
|
src/App.vue
:
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
|
此时的 dialog 嵌套在其他结构当中
使用 teleport 改造
teleport 为默认组件,可以直接使用
修改public/index.html
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
修改src/components/Modal.vue
:
1 2 3 4 5 6 7 |
|
此时 dialog 在 modal 节点中,不在 app 中(从 app 节点传送到了 modal 节点)
完善 modal(实现打开关闭)
src/components/Modal.vue
:
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
|
src/App.vue
:
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
|