一、popup組件
uniapp中的popup組件可以用於彈出簡單的提示框、操作框、菜單等。它可以通過position屬性控制彈出框的位置，不同的position值會使得彈出框呈現不同的彈出形式。下面是一個簡單的popup組件的使用例子：
這是一個從底部彈出的popup組件
export default { data() { return { showPopup: false } } }
代碼說明：
– button標籤綁定了一個點擊事件，點擊按鈕可以控制顯示或隱藏popup組件。
– popup組件的v-model值與data中定義的showPopup變數綁定，可以通過修改showPopup的值控制popup組件的顯示或隱藏。
– popup組件的position屬性設置為”bottom”，表示從底部彈出。
– popup組件中的內容可以自定義，這裡是一個簡單的view標籤，並包含一些文字和按鈕。
二、uniapp彈窗組件
除了popup組件，uniapp還提供了彈窗組件（uni-popup），可以實現更複雜的彈窗功能。彈窗組件包含了顯示、關閉、位置、動畫、拖曳等功能。下面是一個簡單的彈窗組件的使用示例：
這是一個從底部彈出的uni-popup組件
這是一個支持拖曳的uni-popup組件
import {UniPopup} from '@dcloudio/uni-ui'; export default { components: {UniPopup}, data() { return { showDialog: false } } }
代碼說明：
– button標籤綁定了一個點擊事件，點擊按鈕可以控制顯示或隱藏uni-popup組件。
– uni-popup組件的v-model值與data中定義的showDialog變數綁定，可以通過修改showDialog的值控制uni-popup組件的顯示或隱藏。
– uni-popup組件的position屬性設置為”bottom”，表示從底部彈出。
– uni-popup組件的overlay屬性設置為true，表示顯示遮罩層。
– uni-popup組件的animation屬性設置為pop-up，表示彈齣動畫效果為pop-up。
– uni-popup組件的mask-click-close屬性設置為true，表示點擊遮罩層可關閉uni-popup組件。
– uni-popup組件的mask-opacity屬性控制遮罩層的透明度。
– uni-popup組件中的內容可以自定義，這裡是一個簡單的view標籤，包含一些文字和按鈕。
– uni-popup組件支持拖曳的功能，默認開啟拖曳的方式為長按拖動或滑鼠拖動。
三、uniapp彈出框組件
與uni-popup組件類似，uniapp還提供了彈出框組件uni-dialog，可以實現類似於iOS系統中彈出框的功能。uni-dialog組件包括了標題、按鈕、內容、位置、大小等屬性，可以自定義彈出框的樣式和內容，下面是一個簡單的uni-dialog組件的使用示例：
import {UniDialog} from '@dcloudio/uni-ui';
export default {
components: {UniDialog},
data() {
return {
showDialog: false
}
}
}
代碼說明：
– button標籤綁定了一個點擊事件，點擊按鈕可以控制顯示或隱藏uni-dialog組件。
– uni-dialog組件的v-model值與data中定義的showDialog變數綁定，可以通過修改showDialog的值控制uni-dialog組件的顯示或隱藏。
– uni-dialog組件的title屬性設置彈出框的標題。
– uni-dialog組件的message屬性設置彈出框的內容。
– uni-dialog組件的show-confirm-button屬性設置為true，表示顯示確認按鈕。
– uni-dialog組件的show-cancel-button屬性設置為true，表示顯示取消按鈕。
– uni-dialog組件的confirm-button-text屬性和cancel-button-text屬性控制按鈕的文字內容。
– uni-dialog組件的cancel-button-color屬性和confirm-button-color屬性設置按鈕的顏色。
– uni-dialog組件還支持其他屬性的設置，例如位置、大小、彈齣動畫等，具體參考uniapp官方文檔。
四、uniapp彈出選擇框
除了簡單的提示框和彈出框，uniapp還提供了彈出選擇框的組件——uni-actionsheet。uni-actionsheet組件可以用於選擇列表、操作列表等彈出框場景。下面是一個簡單的uni-actionsheet組件的使用示例：
import {UniActionsheet} from '@dcloudio/uni-ui';
export default {
components: {UniActionsheet},
data() {
return {
showActionSheet: false,
actions: [
{ name: '選項1', value: '1' },
{ name: '選項2', value: '2' },
{ name: '選項3', value: '3' },
{ name: '選項4', value: '4' },
{ name: '選項5', value: '5' }
]
}
},
methods: {
onCancel() {
this.showActionSheet = false;
},
onSelect(index) {
console.log('選中了第' + (index + 1) + '個選項');
this.showActionSheet = false;
}
}
}
代碼說明：
– button標籤綁定了一個點擊事件，點擊按鈕可以控制顯示或隱藏uni-actionsheet組件。
– uni-actionsheet組件的v-model值與data中定義的showActionSheet變數綁定，可以通過修改showActionSheet的值控制uni-actionsheet組件的顯示或隱藏。
– uni-actionsheet組件的actions屬性設置選擇框的選項列表。
– uni-actionsheet組件的title屬性設置選擇框的標題。
– uni-actionsheet組件的cancel-text屬性設置取消按鈕的文字內容。
– uni-actionsheet組件的cancel-color屬性設置取消按鈕的顏色。
– uni-actionsheet組件支持通過select事件響應用戶選擇的選項。
五、uniapp彈出框做頁面
上面介紹過幾個簡單的uniapp彈出框組件，這裡我們可以使用這些彈出框組件來完成彈出框做頁面的功能。下面是一個示例代碼：
這是一個容器，可以放置任何組件。
這是一個透明的uni-popup組件，點擊即可關閉。
這是一個自定義的button組件，點擊可觸發非同步事件。
這是一個從右側彈出的彈出框內容
這裡可以放置一些其他的組件
import {UniDialog, Popup} from '@dcloudio/uni-ui'; export default { components: {UniDialog, Popup}, data() { return { showPage: false, showPopup: false } }, methods: { doAsync() { let that = this; setTimeout(function() { that.showPage = false; }, 3000); } } }
代碼說明：
– button標籤綁定了一個點擊事件，點擊按鈕可以打開一個彈出框模擬頁面效果。
– uni-dialog組件作為彈出框的容器，包含了一些其他組件和內容，比如image、view、popup和custom-button等。
– popup組件作為popup按鈕的容器，點擊popup按鈕可以彈出一個彈出框。
– custom-button組件是一個自定義組件，用於替代彈出框中的按鈕，並觸發自定義事件。
– 通過此例子可以了解到，uniapp的彈出框組件可以組合使用，實現更複雜的應用場景。
六、uniapp彈出框添加內容
uniapp彈出框組件不僅僅可以顯示簡單的文字和按鈕，還可以通過插入富文本內容、圖片、表格等組件，實現更加豐富的彈出框內容。下面是一個簡單的示例代碼：
這是一個uni-dialog組件
{{ item.title }}
{{ item.content }}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/304188.html
微信掃一掃 
支付寶掃一掃 