實作在右下角顯示多個提示框功能
修改index.html部分, 在body區域新增一個messages用來放置提示框的位置
1
2
3
4
5
6
7
8
9
| //index.html
<!doctype html>
//...
<body>
<div id="app"></div>
<div id="messages"></div>
<script type="module" src="/src/main.js"></script>
</body>
//...
|
建立提示框組件:
- 使用
Teleport將組件傳送到原生DOM的message位置
- 使用
show參數決定是否顯示, button手動關閉提示框
- 提供slot區塊讓父元件填入自定義訊息
mounted內設定自動關閉時間- style區塊定義提示框長寬, 顏色, 預留間距
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
|
<template>
<Teleport to="#messages">
<div v-if="show" class="alertBox">
<div @click="show = false">X</div>
<slot></slot>
</div>
</Teleport>
</template>
<script>
export default {
data() {
return {
show: true,
};
},
mounted() {
setTimeout(() => {
this.show = false;
}, 3000);
},
};
</script>
<style scoped>
.alertBox {
width: 350px;
height: 80px;
border: 1px solid hsl(280, 100%, 50%);
border-radius: 8px;
padding: 24px;
position: relative;
}
</style>
|
父元件定義message樣式:
position: absolute, right: 12px, bottom: 12px 將message起始位置定義在畫面右下角display: flex;啟用Flexbox布局模式, flex-direction: column-reverse;指定主軸方向以及在主軸上的排列方式, 讓較晚加入的訊息依序向上顯示gap: 12px設定訊息框與框之間的間隔
父元件呼叫組件, 在按下button時加入提示框到陣列中, 使用陣列將現有提示框顯示出來, 生成後會自動顯示在畫面右下角
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
| <template>
<button @click="msgs.push(`test message${msgs.length + 1}`)">
Add message
</button>
<AlertBox v-for="msg in msgs">{{ msg }}</AlertBox>
</template>
<script>
import AlertBox from './components/AlertBox.vue';
export default {
components: { AlertBox },
data() {
return {
msgs: [],
};
}
};
</script>
<style>
#messages {
position: absolute;
right: 12px;
bottom: 12px;
display: flex;
flex-direction: column-reverse;
gap: 12px;
}
</style>
|