Others-popover弹出框

<!--Popover 弹出框
Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的
trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot="reference" 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。-->
    <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>

<script>
    new Vue({
        el: '#app',
        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>
    new Vue({
        el: '#app',
        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
    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-button slot="reference">删除</el-button>
</el-popover>

<script>
    new Vue({
        el: '#app',
        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
transition	定义渐变动画	String	—	fade-in-linear

¶Slot

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