Element浅尝辄止9：Popover 弹出框组件

Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此有重复属性

1.如何使用？

/*trigger属性用于设置何时触发 Popover，支持四种触发方式：
hover，click，focus 和 manual。
对于触发 Popover 的元素，有两种写法：使用 slot="reference" 
的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。*/<template><el-popoverplacement="top-start"title="标题"width="200"trigger="hover"content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"><el-button slot="reference">hover 激活</el-button></el-popover><el-popoverplacement="bottom"title="标题"width="200"trigger="click"content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"><el-button slot="reference">click 激活</el-button></el-popover><el-popoverref="popover"placement="right"title="标题"width="200"trigger="focus"content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"></el-popover><el-button v-popover:popover>focus 激活</el-button><el-popoverplacement="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>

2.嵌套信息

 Popover 中可以嵌套多种类型信息 

利用分发取代content属性<el-popoverplacement="top"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: '王xx',address: '北京市普陀弄'}, {date: '2016-05-04',name: '王xy',address: '天津 1518 弄'}, {date: '2016-05-01',name: '王二狗',address: '普陀区金沙江路 1518 弄'}]};}};
</script>

3.嵌套操作

也可以嵌套操作，这相比 Dialog 更为轻量

<el-popoverplacement="top"width="160"v-model="visible"><p>Are you OK？</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>

上述即为popover组件的大致内容，想要深入浅出可以移步弹出框