Popover 的属性与 Tooltip 很类似,它们都是基于
Vue-popper
开发的,因此有重复属性
1.如何使用?
/*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>
2.嵌套信息
Popover 中可以嵌套多种类型信息
利用分发取代content属性
<el-popover
placement="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-popover
placement="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组件的大致内容,想要深入浅出可以移步弹出框