EPopup
表示浮出框,跟 EDialog
不一样,它在视觉上不是独占式的,不会有蒙层。它也是脱离文档流,全局定位。它一般会放置在某个组件(元素)内,组件(DOM)提供了浮出框的定位基准信息,该组件被称为锚点元素。
# placement
placement 表示在锚点元素的哪个位置展开浮出框。下面示例里,锚点元素都是 EButton(即按钮)。
<template>
<EBlock class="e-popup-placement-showcase" horizontal wrap>
<EButton label="default" class="placement">
<EPopup>
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
<EButton label="top" class="placement">
<EPopup placement="top">
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
<EButton label="top-left" class="placement">
<EPopup placement="top-left">
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
<EButton label="top-right" class="placement">
<EPopup placement="top-right">
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
<EButton label="bottom" class="placement">
<EPopup placement="bottom">
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
<EButton label="bottom-left" class="placement">
<EPopup placement="bottom-left">
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
<EButton label="bottom-right" class="placement">
<EPopup placement="bottom-right">
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
<EButton label="left" class="placement">
<EPopup placement="left">
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
<EButton label="left-top" class="placement">
<EPopup placement="left-top">
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
<EButton label="left-bottom" class="placement">
<EPopup placement="left-bottom">
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
<EButton label="right" class="placement">
<EPopup placement="right">
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
<EButton label="right-top" class="placement">
<EPopup placement="right-top">
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
<EButton ref="body" label="right-bottom" class="placement">
<EPopup placement="right-bottom">
<EBlock :class="['pop-content', zoomIn?'zoom-in':'']" align="center" @click="zoom">
点击缩放,检查是否有跳跃感
</EBlock>
</EPopup>
</EButton>
</EBlock>
</template>
<script>
export default {
data() {
return {
visible: false,
zoomIn: false,
};
},
methods: {
zoom() {
this.zoomIn = !this.zoomIn;
},
},
};
</script>
<style>
.e-popup-placement-showcase .placement {
background: #ddd;
width: 110px;
margin: 0 10px 10px 0;
}
.pop-content {
height: 160px;
width: 100px;
padding: 16px;
background: #f2f2f2;
user-select: none;
}
.pop-content.zoom-in {
height: 120px;
width: 200px;
}
</style>
# 与 EDialog
组件联动
在浮层中打开对话框,浮层将自动消失。
<template>
<EBlock horizontal class="e-popup-showcase">
<EButton label="与 EDialog 联动" class="placement">
<EPopup offset="20 0" placement="right middle">
<EBlock class="pop-content" align="center" @click="visible=true">
点击这里打开对话框,对话框出现后本浮出框消失
</EBlock>
<EDialog :visible.sync="visible">
<EBlock style="padding: 100px;">
dialog
</EBlock>
</EDialog>
</EPopup>
</EButton>
</EBlock>
</template>
<script>
export default {
data() {
return {
visible: false,
zoomIn: false,
};
},
methods: {
zoom() {
this.zoomIn = !this.zoomIn;
},
},
};
</script>
<style>
.e-popup-showcase .placement {
background: #ddd;
width: 120px;
margin: 10px;
}
</style>
# 浮层偏移量设置
设置 offset
属性,来控制浮层位置得偏移量。
<template>
<EScroll class="e-popup-showcase">
<!-- offset -->
<EBlock horizontal wrap>
<EButton label="offset: 0 50" class="placement">
<EPopup offset="0 50">
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
<EButton label="bottom center" class="placement">
<EPopup offset="0 50" placement="bottom center">
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
<EButton label="right" class="placement">
<EPopup offset="0 50" placement="right">
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
</EBlock>
<EBlock horizontal wrap style="border: 1px solid #ddd; margin-bottom: 10px;">
<EButton label="offset: 20 0" class="placement">
<EPopup offset="20 0">
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
<EButton label="right" class="placement">
<EPopup offset="20 0" placement="right">
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
<EButton label="right bottom" class="placement">
<EPopup offset="20 0" placement="right bottom">
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
</EBlock>
</EScroll>
</template>
<script>
export default {
data() {
return {
visible: false,
};
},
};
</script>
<style>
.e-popup-showcase .placement {
background: #ddd;
width: 120px;
margin: 10px;
}
</style>
# 浮层箭头设置
showArrow
属性接收两种类型的值 Boolean | Object
,Boolean
值用于控制是否显示箭头,Object
值用于自定义箭头的大小、颜色;如果想要镂空边框,还可以额外传入 {innerColor, innerSize}
。
<template>
<EScroll class="e-popup-showcase">
<!-- show-arrow -->
<EBlock horizontal wrap style="border: 1px solid #ddd; margin-bottom: 10px;">
<EButton label="show-arrow" class="placement">
<EPopup show-arrow>
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
<EButton label="top" class="placement">
<EPopup placement="top" show-arrow>
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
<EButton label="left" class="placement">
<EPopup placement="left" show-arrow>
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
<EButton label="right" class="placement">
<EPopup placement="right" show-arrow>
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
<EButton label="show-arrow={size,color}" class="placement">
<EPopup placement="bottom"
:show-arrow="{size: 16, color: '#d2d2d2', innerSize: 14, innerColor: '#f2f2f2'}">
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
<EButton label="top" class="placement">
<EPopup placement="top"
:show-arrow="{size: 16, color: '#d2d2d2', innerSize: 14, innerColor: '#f2f2f2'}">
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
<EButton label="left" class="placement">
<EPopup placement="left"
:show-arrow="{size: 16, color: '#d2d2d2', innerSize: 14, innerColor: '#f2f2f2'}">
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
<EButton label="right" class="placement">
<EPopup placement="right"
:show-arrow="{size: 16, color: '#d2d2d2', innerSize: 14, innerColor: '#f2f2f2'}">
<EBlock class="pop-content" align="center">
hello
</EBlock>
</EPopup>
</EButton>
</EBlock>
</EScroll>
</template>
<script>
export default {
data() {
return {
visible: false,
};
},
};
</script>
<style>
.e-popup-showcase .placement {
background: #ddd;
width: 120px;
margin: 10px;
}
</style>
# EPopup
# Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
visible | 是否显示 | Boolean | false | - |
placement | 在锚点元素的哪个位置展示,支持 12 个位置:top-left, top, top-right, bottom-left, bottom, bottom-right, left-top, left, left-bottom, right-top, right, right-bottom | String | false | bottom-left |
anchorClick | 是否默认注册锚点的 click 事件,显示 popup。否则只能通过 visible 来控制显隐。 | Boolean | false | true |
fit | 是否跟锚点元素的宽度一致 | Boolean | false | - |
offset | 与锚点的间距,两段式,分别代表锚点元素在 Y、X 轴上的扩充半径。 | String | false | - |
lazy | 是否延迟加载,延迟加载时,子组件不会被创建、渲染。 | Boolean | false | true |
showArrow | 是否显示箭头,还可以定制化箭头的大小、颜色,此时传入一个对象 {color, size}。如果想要镂空边框,还可以额外传入 {innerColor, innerSize} | Boolean / Object | false | - |
# Slots
Name | Description | Default Slot Content |
---|---|---|
default | - | - |