专栏首页魏晓蕾的专栏【Vue.js】Vue.js组件库Element中的弹出框、气泡确认框、卡片和走马灯

【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

触发方式

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 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 传入 DOM

string

body-style

设置 body 的样式

object

{ padding: ‘20px’ }

shadow

设置阴影显示时机

string

always / hover / never

always

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>

参数

说明

类型

可选值

默认值

height

走马灯的高度

string

initial-index

初始状态激活的幻灯片的索引,从 0 开始

number

0

trigger

指示器的触发方式

string

click

autoplay

是否自动切换

boolean

true

interval

自动切换的时间间隔,单位为毫秒

number

3000

indicator-position

指示器的位置

string

outside/none

arrow

切换箭头的显示时机

string

always/hover/never

hover

type

走马灯的类型

string

card

loop

是否循环显示

boolean

-

true

direction

走马灯展示的方向

string

horizontal/vertical

horizontal

事件名称

说明

回调参数

change

幻灯片切换时触发

目前激活的幻灯片的索引,原幻灯片的索引

方法名

说明

参数

setActiveItem

手动切换幻灯片

需要切换的幻灯片的索引,从 0 开始;或相应 el-carousel-item 的 name 属性值

prev

切换至上一张幻灯片

next

切换至下一张幻灯片

参数

说明

类型

可选值

默认值

name

幻灯片的名字,可用作 setActiveItem 的参数

string

label

该幻灯片所对应指示器的文本

string

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Vue.js】Vue.js组件库Element中的导航菜单、标签页、面包屑和页头

    魏晓蕾
  • 【Vue.js】Vue.js组件库Element的基础用法

    Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,是帮助网站快速成型的工具。

    魏晓蕾
  • 【Vue.js】Vue.js组件库Element中的图片、回到顶部、无限滚动和抽屉

    在要实现滚动加载的列表上上添加v-infinite-scroll,并赋值相应的加载方法,可实现滚动到底部时自动执行加载方法。

    魏晓蕾
  • Element表单嵌套数据验证

    除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则

    一只图雀
  • vue通过数据驱动实现表格行的增加与删除

    以前做明细表格的新增改查,都是需要操作dom的,但现在数据驱动,不需要了,只需要操作数据即可,相当简单

    星痕
  • scala的reduce

    spark 中的 reduce 非常的好用,reduce 可以对 dataframe 中的元素进行计算、拼接等等。例如生成了一个 dataframe :

    机器学习和大数据挖掘
  • 流程表单的导入导出替换方案--源代码模式

    最近要做流程表单的导入导出功能,但总觉得这个功能有点多余。 这个功能只是为了方便迁移配置到环境,为什么需要搞这么复杂呢。 后面想想,觉得没必要这么做,我只作...

    星痕
  • 2019.5.27拼团活动链接

    腾讯云2019年新的拼团活动来啦1H1G2M50G云盘15块一个月,买两个月送一个月,最多送半年,现在是2019年6.25上午10.09。下面的链接48小时有效...

    大脑斧
  • 看得见的数据结构Android版之双链表篇

    张风捷特烈
  • netty案例,netty4.1基础入门篇零《初入JavaIO之门BIO、NIO、AIO实战练习》

    在Java中,提供了一些关于使用IO的API,可以供开发者来读写外部数据和文件,我们称这些API为Java IO。IO是Java中比较重要知识点,且比较难学习的...

    小傅哥

扫码关注云+社区

领取腾讯云代金券