Popover弹出框

基础用法

使用content属性来决定hover时提示的信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top，left，right，bottom；三种对齐配置：start，end，默认为空。如placement=“left-end”，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus和manual。对于触发Popover的元素，有两种写法：使用slot=“reference”的具名插槽，或使用自定义指令v-popover指向Popover的索引ref。

<template> <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> <el-button slot="reference">hover 激活</el-button> </el-popover> <el-popover placement="bottom" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> <el-button slot="reference">click 激活</el-button> </el-popover> <el-popover ref="popover" placement="right" title="标题" width="200" trigger="focus" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> </el-popover> <el-button v-popover:popover>focus 激活</el-button> <el-popover placement="bottom" title="标题" width="200" trigger="manual" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。" v-model="visible"> <el-button slot="reference" @click="visible = !visible">手动激活</el-button> </el-popover> </template> <script> export default { data() { return { visible: false }; } }; </script>

效果图如下所示:

嵌套信息

可以在Popover中嵌套多种类型信息。利用分发取代content属性。

<el-popover 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-button slot="reference">click 激活</el-button> </el-popover> <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>

效果图如下所示:

嵌套操作

<el-popover placement="top" width="160" v-model="visible"> <p>这是一段内容这是一段内容确定删除吗？</p> <div style="text-align: right; margin: 0"> <el-button size="mini" type="text" @click="visible = false">取消</el-button> <el-button type="primary" size="mini" @click="visible = false">确定</el-button> </div> <el-button slot="reference">删除</el-button> </el-popover> <script> export default { data() { return { visible: false, }; } } </script>

效果图如下所示:

Attributes

参数说明类型可选值默认值trigger触发方式Stringclick/focus/hover/manualclicktitle标题String————content显示的内容，也可以通过slot传入DOMString————width宽度String，Number——最小宽度150pxplacement出现的位置String

top、top-start、top-end

bottom、bottom-start、bottom-end、left、left-start、left-end、right、right-start、right-end

bottomdisabledPopover是否可用Boolean——falsevalue/v-model状态是否可见Boolean——falseoffset出现位置的偏移量Number——0 transition定义渐变动画String——fade-in-linear visible-arrow是否显示 Tooltip箭头Boolean——true popper-options popper.js的参数Object———— popper-class为popper添加类名String———— open-delay触发方式为hover时的显示延迟，单位为毫秒Number———— close-delay触发方式为hover时的隐藏延迟，单位为毫秒number——200tabindexPoper组件的tabindexnumber——0

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Slot

参数说明—— Popover内嵌HTML文本reference触发Popover显示的HTML元素

 

 

 

 

Events

事件名称说明回调函数show显示时触发——after-enter显示动画播放完毕后触发——hide隐藏时触发——after-leave隐藏动画播放完毕后触发——