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

results matching ""

    No results matching ""