Popup (弹出框)
弹出层出现的位置可以为上下左右中
可以自定义内容
代码示例
显示与隐藏
通过v-model进行双向绑定,值为boolean类型。
居中弹出popup
这是一个最简单的popup,但是样子可能特别丑
调整显示位置
通过position属性控制。可选的值有:center,top,right,bottom,left。默认为center。
底部弹出popup
item 1
item 2
item 3
指定高度和限制最大高度
position为bottom时,可以通过top属性指定高度。当内容过多时可能会超过屏幕,此时可以通过max-height来限制最大高度,然后内部内容上下滚动显示。top属性和maxHeight属性两者的区别在于:top会完全确定高度,无论内容的多少;而maxHeight会根据内容的多少自适应高度,当超过临界值时,maxHeight会见效。
限制最大高度为屏幕高度的80%
item {{item}}
监听关闭事件
监听close事件可以处理关闭popup时的逻辑
监听close事件
item {{item}}
export default {
data () {
return {
isShowPopup4: false
}
},
methods: {
handleClose () {
this.$toast('popup被关闭')
}
}
}