1. Popover弹出框
1.1. Popover的属性与Tooltip很类似, 它们都是基于Vue-popper开发的, 因此对于重复属性, 请参考Tooltip的文档。
1.2. Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
trigger | 触发方式 | String | click/focus/hover/manual | click |
title | 标题 | String | 无 | 无 |
content | 显示的内容, 也可以通过slot#content传入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 |
value / v-model | 状态是否可见 | Boolean | 无 | false |
disabled | Popover是否可用 | Boolean | 无 | false |
offset | 出现位置的偏移量 | Number | 无 | 0 |
transition | 定义渐变动画 | String | 无 | el-fade-in-linear |
visible-arrow | 是否显示Popover箭头, 更多参数可见Vue-popper | Boolean | 无 | true |
popper-options | popper.js的参数 | Object | 参考popper.js文档 | { boundariesElement: 'body', gpuAcceleration: false } |
manual | 手动控制模式 | Boolean | 无 | false |
popper-class | 为popper添加类名 | String | 无 | 无 |
open-delay | 触发方式为hover时的显示延迟, 单位为毫秒 | Number | 无 | 无 |
close-delay | 触发方式为hover时的隐藏延迟, 单位为毫秒 | Number | 无 | 200 |
tabindex | Tooltip组件的tabindex | Number | 无 | 0 |
1.3. Slot
Name | 说明 |
— | Popover内嵌HTML文本 |
reference | 触发Popover显示的HTML元素 |
1.4. Events
事件名称 | 说明 | 回调参数 |
show | 显示时触发 | 无 |
after-enter | 显示动画播放完毕后触发 | 无 |
hide | 隐藏时触发 | 无 |
after-leave | 隐藏动画播放完毕后触发 | 无 |
2. Popover弹出框例子
2.1. 使用脚手架新建一个名为element-ui-popover的前端项目, 同时安装Element插件。
2.2. 编辑index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Popover from '../components/Popover.vue'
import TablePopover from '../components/TablePopover.vue'
import DialogPopover from '../components/DialogPopover.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', redirect: '/Popover' },
{ path: '/Popover', component: Popover },
{ path: '/TablePopover', component: TablePopover },
{ path: '/DialogPopover', component: DialogPopover }
]
const router = new VueRouter({
routes
})
export default router
2.3. 在components下创建Popover.vue
<template>
<div>
<h1>基础用法</h1>
<h4>Popover的通过trigger属性, 设置click、focus、hover、manual, 4种触发方式。</h4>
<el-row>
<el-col :span="3">
<el-popover placement="top-start" title="标题" width="200" trigger="hover" content="hover这是一段内容。">
<el-button slot="reference">hover 激活</el-button>
</el-popover>
</el-col>
<el-col :span="3">
<el-popover placement="bottom" title="标题" width="200" trigger="click" content="click这是一段内容。">
<el-button slot="reference">click 激活</el-button>
</el-popover>
</el-col>
<el-col :span="3">
<el-popover ref="popover" placement="right" title="标题" width="200" trigger="focus" content="focus这是一段内容。"></el-popover>
<el-button v-popover:popover>focus 激活</el-button>
</el-col>
<el-col :span="3">
<el-popover placement="bottom" title="标题" width="200" trigger="manual" content="manual这是一段内容。" v-model="visible">
<el-button slot="reference" @click="visible = !visible">手动激活</el-button>
</el-popover>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
visible: false
}
}
}
</script>
2.4. 在components下创建TablePopover.vue
<template>
<div>
<h1>嵌套信息</h1>
<h4>可以在Popover中嵌套多种类型信息, 以下为嵌套表格的例子。</h4>
<el-popover placement="bottom" width="600" 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>
</div>
</template>
<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>
2.5. 在components下创建DialogPopover.vue
<template>
<div>
<h1>嵌套操作</h1>
<h4>当然, 你还可以嵌套操作, 这相比Dialog更为轻量。</h4>
<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>
</div>
</template>
<script>
export default {
data () {
return {
visible: false
}
}
}
</script>
2.6. 运行项目, 访问http://localhost:8080/#/Popover
2.7. 运行项目, 访问http://localhost:8080/#/TablePopover
2.8. 运行项目, 访问http://localhost:8080/#/DialogPopover