Popup
弹出层,Toast、Dialog、Picker、ActionSheet等组件的基础组件。Demo
引入
import { Popup } from 'vue-pmui';
// 全局使用
Vue.component(Popup.name, Popup);
// 或者
Vue.use(Popup);
例子
控制Popup组件显示的方法:
- 1.使用v-show指令
- 2.为组件添加ref属性调用组件的内部方法show和hide
- 两种方法不要混合使用
为了方便定制,Popup主体并没有设置任何样式
样式
.popup-content {
background-color: #fff;
padding: 30px;
}
禁用遮罩层
<pm-popup :mask="false">
<div class="popup-content">禁用遮罩层</div>
</pm-popup>
处于屏幕不同位置
<!-- 屏幕上方,默认为正中央 -->
<pm-popup position="top">
<div class="popup-content">屏幕上方</div>
</pm-popup>
为Popup添加过渡,同时使用v-show指令
<pm-popup v-show="visible">
<transition name="yourTransitionName">
<div v-show="visible"
class="popup-content">
transition
</div>
<transition>
</pm-popup>
Props
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
position | 弹出层出现的屏幕位置 | String | center/top/left/right/bottom | center |
mask | 是否显示遮罩层 | Boolean | true |
Methods
方法名 | 说明 | 参数 |
---|---|---|
show | 显示 | |
hide | 隐藏 |
Slots
Name | 描述 |
---|---|
default | 主体 |
mask | 遮罩层 |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
mask-click | 点击遮罩层 | event |