教程6 Vue3+Element Plus el-carousel制作轮播图（后面有修改样式的方法）

阅读本书更多章节>>>>

实验 轮播图

1、引入Element Plus

（1）引入Element开发环境

npm install element-plus --save

（2）自动引入Element

npm install -D unplugin-vue-components unplugin-auto-import

（3）在配置文件中进行配置，本人使用的是Vit构建工具

如果使用Vite作为构建工具，配置文件为vite.config.js，配置方法如下：

import { fileURLToPath, URL } from "node:url";import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import AutoImport from 'unplugin-auto-import/vite';import Components from 'unplugin-vue-components/vite';import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';export default defineConfig({  plugins: [    vue(),    AutoImport({      resolvers: [ElementPlusResolver()],    }),    Components({      resolvers: [ElementPlusResolver()],    }),  ],  resolve: {    alias: {      "@": fileURLToPath(new URL("./src", import.meta.url)),    },  },  server: {    port: 8080,  },});

（4）Element Plus全局引入

main.ts中增加下面的代码：

import { createApp } from 'vue'import './style.css'import App from './App.vue'import ElementPlus from "element-plus";const app = createApp(App);app.use(ElementPlus);app.mount('#app')

2、使用简单的在线图片制作轮播图

（1）运行效果

（2）Rotation.vue参考代码

<template>  <div class="block text-center" style="text-align:center">    <el-carousel height="800px">      <el-carousel-item v-for="item in imageUrl" :key="item">        <img :src="item.url" alt=""/>      </el-carousel-item>    </el-carousel>  </div></template><script setup lang="ts">const imageUrl = [  { url: "http://www.gengdan.cn/wp-content/uploads/2023/03/2023030921323441.jpg" },  { url: "http://www.gengdan.cn/wp-content/uploads/2023/03/2023030921333114.jpg" },  { url: "http://www.gengdan.cn/wp-content/uploads/2023/03/2023030921323441.jpg" },  { url: "http://www.gengdan.cn/wp-content/uploads/2023/03/2023030921325368.jpg" }];</script>

（3）卡片式轮播图

 <el-carousel height="500px" type="card">           ……</el-carousel>

3、图片放入src/assets/（解决方法一）

<script setup lang="ts">import image1 from "../assets/1.jpg";import image2 from "../assets/2.jpg";import image3 from "../assets/3.jpg";import image4 from "../assets/4.jpg";const imageUrl = [  { url: image1 },  { url: image2 },  { url: image3 },  { url: image4 },];</script>

4、图片放入src/assets/（解决方法二）

（1）新建一个文件src/utils/utils.ts，用于读取静态图片

// 获取assets静态资源const getAssetsFile = (url: string) => {    return new URL(`../assets/${url}`, import.meta.url).href;};export default {    getAssetsFile,};

（2）创建src/components/Rotation.vue

<template>  <div style="display: grid; place-items: center;">    <el-carousel :interval="5000" arrow="always">      <el-carousel-item v-for="item in imageList" :key="item">        <img :src="item.url" no-repeat style="object-fit: fill;height:100%; width:100%;" />      </el-carousel-item>    </el-carousel>  </div></template><script setup lang="ts">import utils from '../utils/utils'//定义跑马灯的图片路径const imageList = [  { url: utils.getAssetsFile('1.jpg') },  { url: utils.getAssetsFile('2.jpg') },  { url: utils.getAssetsFile('3.jpg') },];</script><style scoped>.el-carousel {  width: 1200px;}.el-carousel__item img {  width: 100%;  height: 100%;  color: #475669;  opacity: 0.75;  margin: 0;  text-align: center;}</style>

（3）修改App.vue

<template>    <Rotation/></template><script setup lang="ts">import Rotation from './components/Rotation.vue';</script>

（4）运行

cd rotationnpm installnpm run dev

5、修改轮播图的样式（修改指示器为小圆点、修改左右箭头）

<style scoped>/* 需要改变vue自带的样式时需要在元素前面加上::v-deep*//* 左箭头 */:deep(.el-carousel__arrow--left) {  top: 250px;  left: 0px;  font-size: 24px;  font-weight: 900;  color: orange;  /* 设置背景图片 */  background: url("../assets/left.jpg") no-repeat center center;  background-size: auto 40px;}/* 右箭头 */:deep(.el-carousel__arrow--right) {  top: 250px;  right: -13px;  font-size: 24px;  color: blue;}/* 水平指示器 */:deep(.el-carousel__indicators--horizontal) {  background: red;  /* background: transparent; */  bottom: 0px;  border-radius: 20%;}/* 将轮播图指示器变成圆点 */:deep(.el-carousel__indicator--horizontal .el-carousel__button) {  width: 10px;  height: 10px;  /* background: transparent; */  background: greenyellow;  border: 1px solid #ffffff;  border-radius: 50%;  /*不透明度 */  opacity: 0.5;}/* 当前被选中的指示器样式 */:deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button) {  width: 10px;  height: 10px;  background: yellow;  border-radius: 50%;  opacity: 1;}:deep(.el-carousel__container) {  width: 100%;}</style>

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-01/151933.html，文章来源：网络cs，作者：付梓，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！