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

简介: 本文介绍了在Vue 3中使用Element UI Plus的Carousel组件实现跑马灯效果的方法,并分享了在实现过程中遇到的常见问题和解决方案。

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
(ಥ﹏ಥ),以后一定要相信自己的想法,坚持自己没错啊!!!

相关文章
|
6月前
|
JavaScript 前端开发 小程序
Vue 3的高颜值UI组件库
Vue 3的高颜值UI组件库
250 1
|
2月前
|
JavaScript 前端开发 开发工具
使用vue3+element-ui plus 快速构建后台管理模板
本文介绍了如何使用Vue 3和Element UI Plus快速构建后台管理模板的步骤,包括安装Vue 3脚手架、Element UI Plus以及如何全局配置Element UI Plus。然后详细讲解了如何使用Element UI Plus构建布局,包括Header组件、Aside组件和HomeView视图的创建和样式调整,以及App.vue和main.css的修改,最后提供了项目的文件结构图和效果展示。
使用vue3+element-ui plus 快速构建后台管理模板
|
前端开发
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
Vue3 element-ui el-upload(上传组件) 上传图片后,隐藏上传按钮
451 0
|
5月前
|
缓存 JavaScript 测试技术
如何创建一个VUE3项目并使用Element UI插件
如何创建一个VUE3项目并使用Element UI插件
|
4月前
|
JavaScript
Vue3如何使用element-ui,vue3使用Element,Element使用
Vue3如何使用element-ui,vue3使用Element,Element使用
|
6月前
Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用
202 1
|
6月前
|
编解码 JavaScript 数据可视化
【vue3】 vue3 几款值得推荐的UI组件库
【vue3】 vue3 几款值得推荐的UI组件库
419 0
|
6月前
Vue3导入element-ui
Vue3导入element-ui
70 0
Vue3引入element-ui报错:Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
配置无误、代码未报错,运行时页面空白,F12控制台报错: Uncaught TypeError: Cannot read property ‘prototype’ of undefined
351 0
|
JavaScript
解决vue3使用element-ui
解决vue3使用element-ui
472 0