基础用法

Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解释。

设置索引ref,在按钮中,我们注册了自定义指令v-popover,指向索引ID。trigger属性用于设置何时触发 Popover ,提供三种触发方式:hoverclick 和 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 弹出框的更多相关文章

  1. Bootstrap popover弹出框

    popover被挤压.遮挡的问题: 弹出框显示的时候如果贴近一个列的边沿,就会很窄或被遮挡,解决起来很简单,只需在初始化的时候添加一个container属性就可以了: $(function (){ $ ...

  2. php中bootstrap框架.popover弹出框,鼠标移动到上面自动显示,离开自动消失

    <div rel="name"></div> <script> $(function(){//显示弹出框 $("[rel=name]& ...

  3. popover弹出框

    <style> #view{width: 300px;height: 200px;border: 1px solid red;} </style> 以上是为了viewport更 ...

  4. popOver 弹出框简单使用

    1.仿QQ弹出框 1.1用到的知识点 1.1.1如何调整弹出框的大小(这里弹出的也是控制器) 这里已经有讲解过http://blog.csdn.net/iostiannan/article/detai ...

  5. Popover 弹出框 设置top,显示有时是向下的,解决方式

    参数里面有个popper-options,官网给的值是{boundariesElement: 'body', gpuAcceleration: false },将这个加上问题就解决了.

  6. element-UI动态的循环生成Popover弹出框的方法

    父组件:<div class="itemLi" :class="{gray: (salse.flashsaleStatus==3 || salse.flashsal ...

  7. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  8. 第二百四十六节,Bootstrap弹出框和警告框插件

    Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...

  9. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

随机推荐

  1. 工控安全入门之 Ethernet/IP

    工控安全入门之 Ethernet/IP Ethernet/IP 与 Modbus 相比,EtherNet/IP 是一个更现代化的标准协议.由工作组 ControlNet International 与 ...

  2. stm32WB 笔记

    1.HAL Debug functions(调试功能) 可以在不同模式下使能或者失能调试器 This section provides functions allowing to:• Enable/D ...

  3. kafka api的基本使用

    kafka API kafka Consumer提供两套Java API:高级Consumer API.和低级Consumer API. 高级Consumer API 优点: 高级API写起来简单,易 ...

  4. Vue快速学习_第四节

    获取原生的DOM方式($.refs) 给标签或者组件 添加ref <div ref = 'liu'>test</div> <Home ref = 'home'>&l ...

  5. TCP_Wrappers应用层防火墙

    TCP_Wrappers是一个工作在应用层的安全工具,它只能针对某些具体的应用或者服务起到一定的防护作用.比如说ssh.telnet.FTP等服务的请求,都会先受到TCP_Wrappers的拦截. T ...

  6. jsp页面判定某个变量值的时候改变颜色

    <td> <c:if test="${v.price>'15' }"> <font color="yellow">${ ...

  7. Oracle之:Function :dateToNumber()

    create or replace function dateToNumber(i_date in date) return number is result number ; begin resul ...

  8. 小程序上传base64的图片,可上传多张

    微信小程序上传图片转化为base64格式 clickimage: function(e) { var index = e.currentTarget.dataset.index; var count ...

  9. React Native 项目常用第三方组件汇总

    React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...

  10. Linux—查看远程Linux系统运行时间

    [选择题]在Shell环境下,如何查看远程Linux系统运行了多少时间? A.scp user@被监控主机ip "uptime" B.ssh user@被监控主机ip " ...