popup
优质
小牛编辑
130浏览
2023-12-01
弹出框,可自定义内容。
引入
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 | 描述 |
---|---|
- | 弹出框的内容 |