免費(fèi)AI編程助手
Mint UI 彈出框-Popup
彈出框，可自定義內(nèi)容。
引入
import { Popup } from 'mint-ui';
Vue.component(Popup.name, Popup);
例子
position 屬性指定了 popup 的位置。比如，position 為 'bottom' 時(shí)，popup 會(huì)從屏幕下方移入，并最終固定在屏幕下方。移入/移出的動(dòng)效會(huì)根據(jù) position 的不同而自動(dòng)改變，無(wú)需手動(dòng)配置。
將 v-model 綁定到一個(gè)本地變量，通過(guò)操作這個(gè)變量即可控制 popup 的顯示與隱藏。
<mt-popup
v-model="popupVisible"
position="bottom">
...
</mt-popup>
若省略 position 屬性，則 popup 會(huì)相對(duì)于屏幕居中顯示（若不想讓其居中，可通過(guò) CSS 對(duì)其重新定位）。此時(shí)建議將動(dòng)效設(shè)置為 popup-fade，這樣在顯示/隱藏時(shí)會(huì)有淡入/淡出效果。
<mt-popup
v-model="popupVisible"
popup-transition="popup-fade">
...
</mt-popup>
API
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| position | popup 的位置。省略則居中顯示 |
String | 'top'
'right' 'bottom' 'left' |
|
| pop-transition | 顯示/隱藏時(shí)的動(dòng)效，僅在省略 position 時(shí)可配置 |
String | 'popup-fade' | |
| modal | 是否創(chuàng)建一個(gè) modal 層 | Boolean | true | |
| closeOnClickModal | 是否可以通過(guò)點(diǎn)擊 modal 層來(lái)關(guān)閉 popup
|
Boolean | true |
Slot
| name | 描述 |
|---|---|
| - | 彈出框的內(nèi)容 |
下面是一個(gè)從左側(cè)彈出的實(shí)例：
實(shí)例
<html>
<head>
<meta charset="UTF-8">
<!-- 引入樣式 -->
<link rel="stylesheet" rel="external nofollow" target="_blank" >
</head>
<body>
<div id="app">
<mt-button @click.native="handleClick">按鈕</mt-button>
<mt-popup v-model="popupVisible" position="left" modal=false>
<child> </child>
</mt-popup>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js" rel="external nofollow" ></script>
<!-- 引入組件庫(kù) -->
<script src="https://unpkg.com/mint-ui/lib/index.js" rel="external nofollow" ></script>
<script>
new Vue({
el: '#app',
data: {
popupVisible: false
},
methods: {
handleClick: function () {
this.popupVisible = true
}
},
components: {
child: {
template: "<h1>w3cschool</h1>"
}
}
})
</script>
</html>
嘗試一下 ?
更多建議：