【Vue.js】Vue.js组件库Element中的弹出框、⽓泡确认框、卡⽚和⾛马灯1、Popover 弹出框
基础⽤法
Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的⽂档，在此⽂档中不做详尽解释。
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 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>
嵌套操作
当然，你还可以嵌套操作，这相⽐ Dialog 更为轻量：
<el-popover
placement="top"
width="160"
v-model="visible">
<p>这是⼀段内容这是⼀段内容确定删除吗？</p>
<div >
<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触发⽅式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 offset出现位置的偏移量Number—0 transition定义渐变动画String—fade-in-linear
visible-arrow
是否显⽰ Tooltip 箭头，
更多参数可见Vue-popper
Boolean—true
popper-options popper.js 的参数Object参考 popper.js ⽂档
{ boundariesElement:
‘body’, gpuAcceleration:
false }
popper-
class
为 popper 添加类名String——
open-delay 触发⽅式为 hover 时的显
⽰延迟，单位为毫秒
Number——
close-delay 触发⽅式为 hover 时的隐
藏延迟，单位为毫秒
number—200
tabindex Popover 组件的
tabindex
number—0
参数说明类型可选值默认值
Slot
参数说明
—Popover 内嵌 HTML ⽂本
reference触发 Popover 显⽰的 HTML 元素
Events
事件名称说明回调参数
show显⽰时触发—after-enter显⽰动画播放完毕后触发—hide隐藏时触发—after-leave隐藏动画播放完毕后触发—2、Popconfirm ⽓泡确认框
点击元素，弹出⽓泡确认框。
基础⽤法
Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的⽂档，在此⽂档中不做详尽解释。
在 Popconfirm 中，只有 title 属性可⽤，content 属性不会被展⽰。
<template>
<el-popconfirm
title="这是⼀段内容确定删除吗？"
>
<el-button slot="reference">删除</el-button>
</el-popconfirm>
</template>
⾃定义
可以在 Popconfirm 中⾃定义内容。
<template>
<el-popconfirm
confirmButtonText='好的'
cancelButtonText='不⽤了'
icon="el-icon-info"
iconColor="red"
title="这是⼀段内容确定删除吗？"
>
<el-button slot="reference">删除</el-button>
</el-popconfirm>
</template>
Attributes
参数说明类型可选值默认值
title标题String——confirmButtonText确认按钮⽂字String——
cancelButtonText取消按钮⽂字String——
confirmButtonType确认按钮类型String—Primary
cancelButtonType取消按钮类型String—Text icon Icon String—el-icon-question iconColor Icon 颜⾊String—#f90
hideIcon是否隐藏 Icon Boolean—false Slot
参数说明
reference触发 Popconfirm 显⽰的 HTML 元素
Events
事件名称说明回调参数
onConfirm点击确认按钮时触发—
onCancel点击取消按钮时触发—
3、Card 卡⽚
将信息聚合在卡⽚容器中展⽰。
基础⽤法
包含标题，内容和操作。
Card 组件包括header和body部分，header部分需要有显式具名 slot 分发，同时也是可选的。
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡⽚名称</span>
<el-button type="text">操作按钮</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card>
<style>
.text{
font-size: 14px;
}
.item{
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after{
display: table;
content:"";position标签属性
}
.clearfix:after{
clear: both
}
.box-card{
width: 480px;
}
</style>
简单卡⽚
卡⽚可以只有内容区域。
<el-card class="box-card">
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card>
<style>
.text{
font-size: 14px;
}
.item{
padding: 18px 0;
}
.
box-card{
width: 480px;
}
</style>
带图⽚
可配置定义更丰富的内容展⽰。