官方文档地址:
https://element.eleme.cn/#/zh-CN/component/carousel

require 是 commonjs 的语法。目的是根据路径引入图片。浏览器是不支持 commonjs 的。如果使用 require,需要使用 vue-cli 创建项目或者 webpack 创建项目,因为webpack会最终将图片资源转换成相对地址的。

这个是template里面中的

<template>
<el-carousel 
    type="card"
    :interval=6000
    >
      <el-carousel-item v-for="(img,index) in imgList" :key="index">
        <img :src="img.url" width="100%" height="100%">
      </el-carousel-item>
    </el-carousel>
</template>

下面是script中的

export default {

data(){
  return{
    imgList:[
     {
        url:require('@/assets/lake.jpg') //url: '../assets/lake.jpg'      
     },
     {
        url:require('@/assets/build.jpg') //url: '../assets/build.jpg' 
     },
     {
        url:require('@/assets/road.jpg') //url: '../assets/road.jpg' 
     },
     {
        url:require('@/assets/sea.jpg') //url: '../assets/sea.jpg' 
     }
    ]
    }
 }
}

注意,如果样式很乱,和官网上的不一样。可能是没有引入elementui 的 css 文件。

	@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");

或者如果本地下载了elementui的资源的话,可以直接写本地的相对地址。

如果有问题,欢迎评论。我看到就会及时解答的

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐