Wex5 popOver组件的使用

1.popOver是一个遮罩组件，包含两个div，第一个div（x-popOver-overlay）为遮罩的部分，要显示的内容写在第二个div（x-popOver-content）里面

为了方便操作，选择组件点击右键可在设计器中显示和隐藏组件。

2.popOver组件属性

opacity
[float]遮罩透明度，可设为0，即没有阴影效果；

Position
[string]显示位置，相对屏幕的位置，取值范围：top（上）、left（左）、center（居中）、right（右）、bottom（下）；

anchor
[string]停靠位置，指定相对停靠组件的xid；

direction
[string]停靠方向，当设置了anchor属性有效；

3.样式问题

在设计器中对组件设置position方向和div宽高时，发现不能如期按自己所设的显示，位置和宽高都会有所偏差，打开谷歌浏览器的控制台发现pop组件有自带的默认样式。解决方法如下：

4.方法

this.comp(“popOver”).show(); //显示
this.comp(“popOver”).hide(); //隐藏

官网文档：http://docs.wex5.com/comps-popover/

Wex5 popOver组件的使用相关推荐

wex5 数据绑定组件简单介绍
wex5 数据绑定组件简单介绍了解一下wex5组件一个页面分为数据和展现两个部分,组件也对应分为数据组件和展现组件. 使用数据组件存储页面中的数据:使用展现组件将页面展现出来.数据组件和展现组件 ...
WeX5数据组件详解
[分享]WeX5的正确打开方式(7)--数据组件详解本文是[WeX5的正确打开方式]系列的第7篇文章,详细介绍WeX5中数据组件的增删改查以及数据定位方法. 前言上一篇数据组件初探我们简单介绍 ...
element ui 中 Popover 组件定位不精准的问题
问题原因 Popover 内部数据动态获取到之后,Popover 尺寸变化导致的定位不准确. 解决方法动态数据获取到之后,调用 Popover 的 updatePopper() 方法重新计算 Pop ...
Ant design vue Popover组件样式设置无效
审查元素的时候在.ant-popover-title里加上background-color:red;是有效的,但是我自己写代码的时候,这样写 /deep/.ant-popover-title{back ...
WEX5常用组件介绍
data 数据组件 model 模型 bar ...
element-ui的popover组件没有在正常位置弹出
在el-popver标签中添加属性 ref="newProjectPopover" :popper-options="{ boundariesElement: 'view ...
wex5 教程前端UI编译原理与记事本编辑
一前言 wex5页面,与html页面有何差异?两者之前的关系是什么?是如何完成转译的? 能否像编辑html那样用记事本来修改w页面? wex5前端UI在云部署后能否在云端进行二次编辑,而不需要在we ...
vue + element 顶部二级菜单_揭秘vue/react组件库中5个quot;作者不造的轮子quot;
点击上方"前端公虾米"关注最新前端资讯来源: 铁皮饭盒https://juejin.im/post/5d89cd156fb9a06acb3ee19e ? 这五个轮子其实是5个纯j ...
少女风vue组件库制作全攻略~~
预览组件库官网 github地址如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈, 请勿在生产环境中使用,供学习&交流~~ 完整项目目录结构 git clone到本地安装依赖后,执行npm r ...

Wex5 popOver组件的使用

Wex5 popOver组件的使用相关推荐

最新文章

热门文章