【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 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>

嵌套信息

可以在 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 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>

Attributes

参数说明类型可选值默认值trigger触发方式Stringclick/focus/hover/manualclicktitle标题String——content显示的内容，也可以通过 slot 传入 DOMString——width宽度String, Number—最小宽度 150pxplacement出现位置Stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottomdisabledPopover 是否可用Boolean—falsevalue / v-model状态是否可见Boolean—falseoffset出现位置的偏移量Number—0transition定义渐变动画String—fade-in-linearvisible-arrow是否显示 Tooltip 箭头，更多参数可见Vue-popperBoolean—truepopper-optionspopper.js 的参数Object参考 popper.js 文档{ boundariesElement: ‘body’, gpuAcceleration: false }popper-class为 popper 添加类名String——open-delay触发方式为 hover 时的显示延迟，单位为毫秒Number——close-delay触发方式为 hover 时的隐藏延迟，单位为毫秒number—200tabindexPopover 组件的 tabindexnumber—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—PrimarycancelButtonType取消按钮类型String—TexticonIconString—el-icon-questioniconColorIcon 颜色String—#f90hideIcon是否隐藏 IconBoolean—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 style="float: right; padding: 3px 0" 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: ""; } .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>

带图片

可配置定义更丰富的内容展示。

配置body-style属性来自定义body部分的style，我们还使用了布局组件。

<el-row> <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0"> <el-card :body-style="{ padding: '0px' }"> <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image"> <div style="padding: 14px;"> <span>好吃的汉堡</span> <div class="bottom clearfix"> <time class="time">{{ currentDate }}</time> <el-button type="text" class="button">操作按钮</el-button> </div> </div> </el-card> </el-col> </el-row> <style> .time { font-size: 13px; color: #999; } .bottom { margin-top: 13px; line-height: 12px; } .button { padding: 0; float: right; } .image { width: 100%; display: block; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both } </style> <script> export default { data() { return { currentDate: new Date() }; } } </script>

卡片阴影

可对阴影的显示进行配置。

通过shadow属性设置卡片阴影出现的时机：always、hover或never。

<el-row :gutter="12"> <el-col :span="8"> <el-card shadow="always"> 总是显示 </el-card> </el-col> <el-col :span="8"> <el-card shadow="hover"> 鼠标悬浮时显示 </el-card> </el-col> <el-col :span="8"> <el-card shadow="never"> 从不显示 </el-card> </el-col> </el-row>

Attributes

参数说明类型可选值默认值header设置 header，也可以通过 slot#header 传入 DOMstring——body-style设置 body 的样式object—{ padding: ‘20px’ }shadow设置阴影显示时机stringalways / hover / neveralways

4、Carousel 走马灯

在有限空间内，循环播放同一类型的图片、文字等内容。

基础用法

适用广泛的基础用法。

结合使用el-carousel和el-carousel-item标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在el-carousel-item标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger属性为click，可以达到点击触发的效果。

<template> <div class="block"> <span class="demonstration">默认 Hover 指示器触发</span> <el-carousel height="150px"> <el-carousel-item v-for="item in 4" :key="item"> <h3 class="small">{{ item }}</h3> </el-carousel-item> </el-carousel> </div> <div class="block"> <span class="demonstration">Click 指示器触发</span> <el-carousel trigger="click" height="150px"> <el-carousel-item v-for="item in 4" :key="item"> <h3 class="small">{{ item }}</h3> </el-carousel-item> </el-carousel> </div> </template> <style> .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 150px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } </style>

指示器

可以将指示器的显示位置设置在容器外部。

indicator-position属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为outside则会显示在外部；设置为none则不会显示指示器。

<template> <el-carousel indicator-position="outside"> <el-carousel-item v-for="item in 4" :key="item"> <h3>{{ item }}</h3> </el-carousel-item> </el-carousel> </template> <style> .el-carousel__item h3 { color: #475669; font-size: 18px; opacity: 0.75; line-height: 300px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } </style>

切换箭头

可以设置切换箭头的显示时机。

arrow属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将arrow设置为always，则会一直显示；设置为never，则会一直隐藏。

<template> <el-carousel :interval="5000" arrow="always"> <el-carousel-item v-for="item in 4" :key="item"> <h3>{{ item }}</h3> </el-carousel-item> </el-carousel> </template> <style> .el-carousel__item h3 { color: #475669; font-size: 18px; opacity: 0.75; line-height: 300px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } </style>

卡片化

当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格。

将type属性设置为card即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。

<template> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="item in 6" :key="item"> <h3 class="medium">{{ item }}</h3> </el-carousel-item> </el-carousel> </template> <style> .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 200px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } </style>

方向

默认情况下，direction 为 horizontal。通过设置 direction 为 vertical 来让走马灯在垂直方向上显示。

<template> <el-carousel height="200px" direction="vertical" :autoplay="false"> <el-carousel-item v-for="item in 3" :key="item"> <h3 class="medium">{{ item }}</h3> </el-carousel-item> </el-carousel> </template> <style> .el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 200px; margin: 0; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } </style>

Carousel Attributes

参数说明类型可选值默认值height走马灯的高度string——initial-index初始状态激活的幻灯片的索引，从 0 开始number—0trigger指示器的触发方式stringclick—autoplay是否自动切换boolean—trueinterval自动切换的时间间隔，单位为毫秒number—3000indicator-position指示器的位置stringoutside/none—arrow切换箭头的显示时机stringalways/hover/neverhovertype走马灯的类型stringcard—loop是否循环显示boolean-truedirection走马灯展示的方向stringhorizontal/verticalhorizontal

Carousel Events

事件名称说明回调参数change幻灯片切换时触发目前激活的幻灯片的索引，原幻灯片的索引

Carousel Methods

方法名说明参数setActiveItem手动切换幻灯片需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值prev切换至上一张幻灯片—next切换至下一张幻灯片—

Carousel-Item Attributes

参数说明类型可选值默认值name幻灯片的名字，可用作 setActiveItem 的参数string——label该幻灯片所对应指示器的文本string——