element ui plus跑马灯放置图片,实现轮播效果,图片路径在assets

首先在element ui plus里面找到跑马灯,复制一个下来用复制需要用到代码,就这里就好了<el-carousel height="150px"><el-carousel-item v-for="item in 4" :key="item"><h3 class="small">{{ item }}</h3></el-carousel-it

阿民不加班

9267人浏览 · 2021-12-11 15:08:00

阿民不加班 · 2021-12-11 15:08:00 发布

首先在element ui plus里面找到跑马灯,复制一个下来用
在这里插入图片描述
复制需要用到代码,就这里就好了

<el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

粘贴到VSCode
在这里插入图片描述
并修改这里面的值
v-for="item in carouseData"

然后就写数据


export default {
  name: "home",
  components: {},
  data() {
    return {
      //定义跑马灯的图片路径
      carouseData: [
        { url: require("../assets/img/home/轮播图/1.jpg") },
        { url: require("../assets/img/home/轮播图/2.jpg") },
        { url: require("../assets/img/home/轮播图/3.jpg") },
        { url: require("../assets/img/home/轮播图/4.jpg") },
        { url: require("../assets/img/home/轮播图/5.jpg") },
        { url: require("../assets/img/home/轮播图/6.jpg") },
        { url: require("../assets/img/home/轮播图/7.jpg") },
        { url: require("../assets/img/home/轮播图/8.jpg") },
        { url: require("../assets/img/home/轮播图/9.jpg") },
        { url: require("../assets/img/home/轮播图/10.jpg") },
      ],
    };
  },
};
</script>

路径如下
在这里插入图片描述
这是根路径了
效果图

这是原文作者

https://www.jianshu.com/p/8e99a7da583a

这里放上我全部的代码

<template>
  <div class="Home">
    <el-carousel height="322px">
      <el-carousel-item v-for="item in carouseData" :key="item">
        <img :src="item.url" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "home",
  components: {},
  data() {
    return {
      //定义跑马灯的图片路径
      carouseData: [
        { url: require("../assets/img/home/轮播图/1.jpg") },
        { url: require("../assets/img/home/轮播图/2.jpg") },
        { url: require("../assets/img/home/轮播图/3.jpg") },
        { url: require("../assets/img/home/轮播图/4.jpg") },
        { url: require("../assets/img/home/轮播图/5.jpg") },
        { url: require("../assets/img/home/轮播图/6.jpg") },
        { url: require("../assets/img/home/轮播图/7.jpg") },
        { url: require("../assets/img/home/轮播图/8.jpg") },
        { url: require("../assets/img/home/轮播图/9.jpg") },
        { url: require("../assets/img/home/轮播图/10.jpg") },
      ],
    };
  },
};
</script>

<style>
.Home {
  margin-top: 20px;
}
</style>