Mint UI 弹出框-Popup

2021-09-06 15:09 更新
弹出框,可自定义内容。

引入

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 描述
- 弹出框的内容


下面是一个从左侧弹出的实例:

实例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<!-- 引入样式 -->

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css" 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>

<!-- 引入组件库 -->

<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>


尝试一下 »


实例演示

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号