【Vue.js】Vue.js组件库Element中的弹出框、气泡确认框、卡片和走马灯

时间:2022-07-24
本文章向大家介绍【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

—

—

随机文章
Javascript知识点必读
最近更新