Popover 弹出框
基础用法
Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper
开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解释。
设置索引ref
,在按钮中,我们注册了自定义指令v-popover
,指向索引ID。trigger
属性用于设置何时触发 Popover ,提供三种触发方式:hover
, click
和 focus
。第二种用法通过 slot
指定 reference。
<el-popover
ref="popover1"
placement="top-start"
title="标题"
width="200"
trigger="hover"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
</el-popover> <el-popover
ref="popover2"
placement="bottom"
title="标题"
width="200"
trigger="click"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
</el-popover> <el-button v-popover:popover1>hover 激活</el-button>
<el-button v-popover:popover2>click 激活</el-button>
<el-popover
placement="right"
title="标题"
width="200"
trigger="focus"
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
<el-button slot="reference">focus 激活</el-button>
</el-popover>
嵌套信息
可以在 Popover 中嵌套多种类型信息,以下为嵌套表格的例子.
利用分发取代content
属性
<el-popover
ref="popover4"
placement="right"
width="400"
trigger="click">
<el-table :data="gridData">
<el-table-column width="150" property="date" label="日期"></el-table-column>
<el-table-column width="100" property="name" label="姓名"></el-table-column>
<el-table-column width="300" property="address" label="地址"></el-table-column>
</el-table>
</el-popover> <el-button v-popover:popover4>click 激活</el-button> <script>
export default {
data() {
return {
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
};
}
};
</script>
嵌套操作
当然,你还可以嵌套操作,这相比 Dialog 更为轻量:
<el-popover
ref="popover5"
placement="top"
width="160"
v-model="visible2">
<p>这是一段内容这是一段内容确定删除吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
</div>
</el-popover> <el-button v-popover:popover5>删除</el-button> <script>
export default {
data() {
return {
visible2: false,
};
}
}
</script>
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
trigger | 触发方式 | String | click/focus/hover/manual | click |
title | 标题 | String | — | — |
content | 显示的内容,也可以通过 slot 传入 DOM |
String | — | — |
width | 宽度 | String, Number | — | 最小宽度 150px |
placement | 出现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
disabled | Popover 是否可用 | Boolean | — | false |
value(v-model) | 状态是否可见 | Boolean | — | false |
offset | 出现位置的偏移量 | Number | — | 0 |
transition | 定义渐变动画 | String | — | fade-in-linear |
visible-arrow | 是否显示 Tooltip 箭头,更多参数可见Vue-popper | Boolean | — | true |
popper-options | popper.js 的参数 | Object | 参考 popper.js 文档 | { boundariesElement: 'body', gpuAcceleration: false } |
popper-class | 为 popper 添加类名 | String | — | — |
open-delay | 触发方式为 hover 时的显示延迟,单位为毫秒 | Number | — | — |
Slot
参数 | 说明 |
---|---|
— | Popover 内嵌 HTML 文本 |
reference | 触发 Popover 显示的 HTML 元素 |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
show | 显示时触发 | — |
hide | 隐藏时触发 | — |
Popover 弹出框的更多相关文章
- Bootstrap popover弹出框
popover被挤压.遮挡的问题: 弹出框显示的时候如果贴近一个列的边沿,就会很窄或被遮挡,解决起来很简单,只需在初始化的时候添加一个container属性就可以了: $(function (){ $ ...
- php中bootstrap框架.popover弹出框,鼠标移动到上面自动显示,离开自动消失
<div rel="name"></div> <script> $(function(){//显示弹出框 $("[rel=name]& ...
- popover弹出框
<style> #view{width: 300px;height: 200px;border: 1px solid red;} </style> 以上是为了viewport更 ...
- popOver 弹出框简单使用
1.仿QQ弹出框 1.1用到的知识点 1.1.1如何调整弹出框的大小(这里弹出的也是控制器) 这里已经有讲解过http://blog.csdn.net/iostiannan/article/detai ...
- Popover 弹出框 设置top,显示有时是向下的,解决方式
参数里面有个popper-options,官网给的值是{boundariesElement: 'body', gpuAcceleration: false },将这个加上问题就解决了.
- element-UI动态的循环生成Popover弹出框的方法
父组件:<div class="itemLi" :class="{gray: (salse.flashsaleStatus==3 || salse.flashsal ...
- bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
- 第二百四十六节,Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
随机推荐
- 工控安全入门之 Ethernet/IP
工控安全入门之 Ethernet/IP Ethernet/IP 与 Modbus 相比,EtherNet/IP 是一个更现代化的标准协议.由工作组 ControlNet International 与 ...
- stm32WB 笔记
1.HAL Debug functions(调试功能) 可以在不同模式下使能或者失能调试器 This section provides functions allowing to:• Enable/D ...
- kafka api的基本使用
kafka API kafka Consumer提供两套Java API:高级Consumer API.和低级Consumer API. 高级Consumer API 优点: 高级API写起来简单,易 ...
- Vue快速学习_第四节
获取原生的DOM方式($.refs) 给标签或者组件 添加ref <div ref = 'liu'>test</div> <Home ref = 'home'>&l ...
- TCP_Wrappers应用层防火墙
TCP_Wrappers是一个工作在应用层的安全工具,它只能针对某些具体的应用或者服务起到一定的防护作用.比如说ssh.telnet.FTP等服务的请求,都会先受到TCP_Wrappers的拦截. T ...
- jsp页面判定某个变量值的时候改变颜色
<td> <c:if test="${v.price>'15' }"> <font color="yellow">${ ...
- Oracle之:Function :dateToNumber()
create or replace function dateToNumber(i_date in date) return number is result number ; begin resul ...
- 小程序上传base64的图片,可上传多张
微信小程序上传图片转化为base64格式 clickimage: function(e) { var index = e.currentTarget.dataset.index; var count ...
- React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
- Linux—查看远程Linux系统运行时间
[选择题]在Shell环境下,如何查看远程Linux系统运行了多少时间? A.scp user@被监控主机ip "uptime" B.ssh user@被监控主机ip " ...