Element UI学习6--Carousel 走马灯

小灰灰 2023-01-08 02:21 536阅读 0赞

轮播是前端页面运用的比较广泛的一个功能。  
在有限空间内，循环播放同一类型的图片、文字等内容。  
今天主要学习了Element UI中Carousel 走马灯这一功能的使用方法。

## 1、基础用法 ##

**1、默认 Hover 指示器触发**

<template>
        <div>
          <el-carousel>
          <el-carousel-item v-for="item in imgwrap" :key="item.url">
            <img :src="item.url"/>
          </el-carousel-item>
        </el-carousel>
        </div>
    </template>
    <script>
    export default { 
        data(){ 
            return{ 
                imgwrap:[
                    { url:require("../assets/img/pic1.jpg")},
                    { url:require("../assets/img/pic2.jpg")},
                    { url:require("../assets/img/pic3.jpg")},
                    { url:require("../assets/img/pic4.jpg")},
                    { url:require("../assets/img/pic5.jpg")}
                ]
            }
        }
    }
    </script>
    <style>
    .el-carousel-item img{ 
      width: 100%;
      height: 100%;
    }
    </style>

如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]  
一般情况下我们导入的图片宽高都是100%,有时候不能准确的计算出容器的宽高，就会遇到图片不能完全显示出来的问题。  
将代码改成下面的就可以解决了

<template>
        <div>
          <el-carousel :height="bannerHeight + 'px'">
          <el-carousel-item v-for="item in imgwrap" :key="item.url">
            <img :src="item.url" class="bannerimg"/>
          </el-carousel-item>
        </el-carousel>
        </div>
    </template>
    <script>
    export default { 
        data(){ 
            return{ 
                bannerHeight: 200,
                imgwrap:[
                    { url:require("../assets/img/pic1.jpg")},
                    { url:require("../assets/img/pic2.jpg")},
                    { url:require("../assets/img/pic3.jpg")},
                    { url:require("../assets/img/pic4.jpg")},
                    { url:require("../assets/img/pic5.jpg")}
                ]
            }
        },
         mounted(){ 
           this.setSize();
           window.addEventListener('resize', ()=>{ 
             this.setSize();
           },false);       
      },
      methods:{ 
        setSize(){ 
          this.bannerHeight = document.body.clientWidth / 4
        }
      }
    }
    </script>
    <style>
    .bannerimg{ 
      width: 100%;
      height: inherit;
    }
    </style>

如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]  
**2、Click 指示器触发**  
默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger属性为click，可以达到点击触发的效果。

**3、指示器位置**  
indicator-position属性定义了指示器的位置。默认情况下，它会显示在走马灯内部。  
**indicator-position=“outside” 外部**  
如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 2]  
**indicator-position=“none” 不会显示指示器**

**4、切换箭头**  
arrow = “always” 一直显示  
arrow = “never” 一直隐藏  
arrow = “hover” 鼠标悬停时显示

## 2、卡片化 ##

type=“card” 启用卡片模式  
如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 3]

## 3、改变方向 ##

默认情况下，direction 为 horizontal。  
通过设置 direction 为 vertical 来让轮播上下播放。  
如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/a18a6476cdf9494281b2477ee6b08d48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/ae3c8e640d8b417b95a938decc549a3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20210120163629545.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20210120172002775.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20210120172333627.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA==,size_16,color_FFFFFF,t_70#pic_center