Mint UI 弹出框-Popup
弹出框，可自定义内容。
引入
import { Popup } from 'mint-ui';
Vue.component(Popup.name, Popup);
例子
position 属性指定了 popup 的位置。比如，position 为 'bottom' 时，popup 会从屏幕下方移入，并最终固定在屏幕下方。移入/移出的动效会根据 position 的不同而自动改变，无需手动配置。
将 v-model 绑定到一个本地变量，通过操作这个变量即可控制 popup 的显示与隐藏。
<mt-popup
v-model="popupVisible"
position="bottom">
...
</mt-popup>
若省略 position 属性，则 popup 会相对于屏幕居中显示（若不想让其居中，可通过 CSS 对其重新定位）。此时建议将动效设置为 popup-fade，这样在显示/隐藏时会有淡入/淡出效果。
<mt-popup
v-model="popupVisible"
popup-transition="popup-fade">
...
</mt-popup>
API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| position | popup 的位置。省略则居中显示 |
String | 'top'
'right' 'bottom' 'left' |
|
| pop-transition | 显示/隐藏时的动效，仅在省略 position 时可配置 |
String | 'popup-fade' | |
| modal | 是否创建一个 modal 层 | Boolean | true | |
| closeOnClickModal | 是否可以通过点击 modal 层来关闭 popup
|
Boolean | true |
Slot
| name | 描述 |
|---|---|
| - | 弹出框的内容 |
下面是一个从左侧弹出的实例：
实例
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
</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"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
popupVisible: false
},
methods: {
handleClick: function () {
this.popupVisible = true
}
},
components: {
child: {
template: "<h1>w3cschool</h1>"
}
}
})
</script>
</html>
尝试一下 »