vue3 element-ui-plus Carousel 跑马灯 的使用 及 踩坑记录

vue3 element-ui-plus Carousel 跑马灯 的踩坑记录

  • Carousel 跑马灯
  • 首页跑马灯demo

Carousel 跑马灯

首先,打开其官网-跑马灯案例

在这里插入图片描述

跑马灯代码:

	<el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3 text="2xl" justify="center">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>

首页跑马灯demo

在这里插入图片描述

tips: vue3不再使用require函数导入,而是使用支持es6的import函数去导入

<scripe setup>
	import image1 from '@/assets/images/mrhb.jpg'
	import image2 from '@/assets/images/mrlm.jpg'
	import image3 from '@/assets/images/mrxtt.jpg'
	import image4 from '@/assets/images/zly.jpg'
	const bgList = ref([
	    {
	        url:image1
	    },
	    {
	        url:image2
	    },
	    {
	        url:image3
	    },
	    {
	        url:image4
	    }
	])
</scripe>

<template>
	<el-carousel :interval="4000" indicator-position="outside" type="card"  height="450px" style="line-height: 450px;">
        <el-carousel-item v-for="item in bgList" :key="item">
                <!-- <h3 text="2xl" justify="center">{{ item.url }}</h3> -->
                <el-image :src=" item.url " style="height: 450px;width: 100%;"></el-image>
            </el-carousel-item>
   </el-carousel>
<template>


我的踩坑记录就是明明,网页的资源文件已经渲染,但是无法看到图片,然后查了半天,最后发现是h3标签的那块儿内容占了位置将我的图片顶了下去,QAQ
(ಥ﹏ಥ),以后一定要相信自己的想法,坚持自己没错啊!!!文章来源地址:https://www.uudwc.com/A/woq1W/

原文地址:https://blog.csdn.net/m0_63622279/article/details/133443265

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇2023年10月22日 16:32
华为云云耀云服务器L实例评测|Elasticsearch的Docker版本的安装和参数设置 & 端口开放和浏览器访问
下一篇 2023年10月22日 18:02