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

妖狐艹你老母 2022-12-03 13:07 1622阅读 0赞

## 1、Popover 弹出框 ##

#### 基础用法 ####

Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。  
![2020090316560594.png_pic_center][]

> 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 中嵌套多种类型信息，以下为嵌套表格的例子。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]

> 利用分发取代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 更为轻量：  
![20200903170411602.png_pic_center][]

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

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>trigger</td> 
   <td>触发方式</td> 
   <td>String</td> 
   <td>click/focus/hover/manual</td> 
   <td>click</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>标题</td> 
   <td>String</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>显示的内容，也可以通过 slot 传入 DOM</td> 
   <td>String</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>宽度</td> 
   <td>String, Number</td> 
   <td>—</td> 
   <td>最小宽度 150px</td> 
  </tr> 
  <tr> 
   <td>placement</td> 
   <td>出现位置</td> 
   <td>String</td> 
   <td>top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end</td> 
   <td>bottom</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>Popover 是否可用</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>value / v-model</td> 
   <td>状态是否可见</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>offset</td> 
   <td>出现位置的偏移量</td> 
   <td>Number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>transition</td> 
   <td>定义渐变动画</td> 
   <td>String</td> 
   <td>—</td> 
   <td>fade-in-linear</td> 
  </tr> 
  <tr> 
   <td>visible-arrow</td> 
   <td>是否显示 Tooltip 箭头，更多参数可见Vue-popper</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>popper-options</td> 
   <td>popper.js 的参数</td> 
   <td>Object</td> 
   <td>参考 popper.js 文档</td> 
   <td>{ boundariesElement: ‘body’, gpuAcceleration: false }</td> 
  </tr> 
  <tr> 
   <td>popper-class</td> 
   <td>为 popper 添加类名</td> 
   <td>String</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>open-delay</td> 
   <td>触发方式为 hover 时的显示延迟，单位为毫秒</td> 
   <td>Number</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>close-delay</td> 
   <td>触发方式为 hover 时的隐藏延迟，单位为毫秒</td> 
   <td>number</td> 
   <td>—</td> 
   <td>200</td> 
  </tr> 
  <tr> 
   <td>tabindex</td> 
   <td>Popover 组件的 tabindex</td> 
   <td>number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
 </tbody> 
</table>

#### Slot ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>—</td> 
   <td>Popover 内嵌 HTML 文本</td> 
  </tr> 
  <tr> 
   <td>reference</td> 
   <td>触发 Popover 显示的 HTML 元素</td> 
  </tr> 
 </tbody> 
</table>

#### Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>show</td> 
   <td>显示时触发</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>after-enter</td> 
   <td>显示动画播放完毕后触发</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>hide</td> 
   <td>隐藏时触发</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>after-leave</td> 
   <td>隐藏动画播放完毕后触发</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

## 2、Popconfirm 气泡确认框 ##

点击元素，弹出气泡确认框。

#### 基础用法 ####

Popconfirm 的属性与 Popover 很类似，因此对于重复属性，请参考 Popover 的文档，在此文档中不做详尽解释。  
![20200903171442570.png_pic_center][]

> 在 Popconfirm 中，只有 title 属性可用，content 属性不会被展示。

#### 自定义 ####

可以在 Popconfirm 中自定义内容。  
![20200903171623942.png_pic_center][]

#### Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>标题</td> 
   <td>String</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>confirmButtonText</td> 
   <td>确认按钮文字</td> 
   <td>String</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>cancelButtonText</td> 
   <td>取消按钮文字</td> 
   <td>String</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>confirmButtonType</td> 
   <td>确认按钮类型</td> 
   <td>String</td> 
   <td>—</td> 
   <td>Primary</td> 
  </tr> 
  <tr> 
   <td>cancelButtonType</td> 
   <td>取消按钮类型</td> 
   <td>String</td> 
   <td>—</td> 
   <td>Text</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>Icon</td> 
   <td>String</td> 
   <td>—</td> 
   <td>el-icon-question</td> 
  </tr> 
  <tr> 
   <td>iconColor</td> 
   <td>Icon 颜色</td> 
   <td>String</td> 
   <td>—</td> 
   <td>#f90</td> 
  </tr> 
  <tr> 
   <td>hideIcon</td> 
   <td>是否隐藏 Icon</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

#### Slot ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>reference</td> 
   <td>触发 Popconfirm 显示的 HTML 元素</td> 
  </tr> 
 </tbody> 
</table>

#### Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onConfirm</td> 
   <td>点击确认按钮时触发</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>onCancel</td> 
   <td>点击取消按钮时触发</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

## 3、Card 卡片 ##

将信息聚合在卡片容器中展示。

#### 基础用法 ####

包含标题，内容和操作。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]

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

#### 简单卡片 ####

卡片可以只有内容区域。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2][]

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

#### 带图片 ####

可配置定义更丰富的内容展示。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3][]

> 配置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>

#### 卡片阴影 ####

可对阴影的显示进行配置。  
![20200903172620945.png_pic_center][]

> 通过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 ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>header</td> 
   <td>设置 header，也可以通过 slot#header 传入 DOM</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>body-style</td> 
   <td>设置 body 的样式</td> 
   <td>object</td> 
   <td>—</td> 
   <td>{ padding: ‘20px’ }</td> 
  </tr> 
  <tr> 
   <td>shadow</td> 
   <td>设置阴影显示时机</td> 
   <td>string</td> 
   <td>always / hover / never</td> 
   <td>always</td> 
  </tr> 
 </tbody> 
</table>

## 4、Carousel 走马灯 ##

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

#### 基础用法 ####

适用广泛的基础用法。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4][]

> 结合使用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>

#### 指示器 ####

可以将指示器的显示位置设置在容器外部。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5][]

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

#### 切换箭头 ####

可以设置切换箭头的显示时机。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6][]

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

#### 卡片化 ####

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

> 将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 来让走马灯在垂直方向上显示。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 8][]

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

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>height</td> 
   <td>走马灯的高度</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>initial-index</td> 
   <td>初始状态激活的幻灯片的索引，从 0 开始</td> 
   <td>number</td> 
   <td>—</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>trigger</td> 
   <td>指示器的触发方式</td> 
   <td>string</td> 
   <td>click</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>是否自动切换</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>interval</td> 
   <td>自动切换的时间间隔，单位为毫秒</td> 
   <td>number</td> 
   <td>—</td> 
   <td>3000</td> 
  </tr> 
  <tr> 
   <td>indicator-position</td> 
   <td>指示器的位置</td> 
   <td>string</td> 
   <td>outside/none</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>arrow</td> 
   <td>切换箭头的显示时机</td> 
   <td>string</td> 
   <td>always/hover/never</td> 
   <td>hover</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>走马灯的类型</td> 
   <td>string</td> 
   <td>card</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>是否循环显示</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>direction</td> 
   <td>走马灯展示的方向</td> 
   <td>string</td> 
   <td>horizontal/vertical</td> 
   <td>horizontal</td> 
  </tr> 
 </tbody> 
</table>

#### Carousel Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>幻灯片切换时触发</td> 
   <td>目前激活的幻灯片的索引，原幻灯片的索引</td> 
  </tr> 
 </tbody> 
</table>

#### Carousel Methods ####

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

#### Carousel-Item Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>幻灯片的名字，可用作 setActiveItem 的参数</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>该幻灯片所对应指示器的文本</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

[2020090316560594.png_pic_center]: /images/20221123/0467e34a400b4e3bb8912256f41d378e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/133a2b0e5909401caf2153cbcd580bbf.png
[20200903170411602.png_pic_center]: /images/20221123/878e9ac1ba5c41dba3135db3f3aa88ba.png
[20200903171442570.png_pic_center]: /images/20221123/d94ac2939c7f42c28cde0700632451df.png
[20200903171623942.png_pic_center]: /images/20221123/521110877ca54fc69b861a95d0d6e6b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/f3d3ef333a2146218c4a40d29572b5e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/fbe723ce7e38474e9bec8b6deab00747.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/55ae1280d1ab41a396d5f63f895dd506.png
[20200903172620945.png_pic_center]: /images/20221123/312fc9039af0463e9ef1547e2f8b2c82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/c78b41ed3eab4f569a5535f87670cb41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/89e86a0448ea4ef7b711c043d61f7bb0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/c1846ff7920f403b88ae117a82c681cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/d120881a6be3440faf9869567b19dbc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/5f791889adfb49e48b9c19517bbaaa90.png