实验 轮播图

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参考代码

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" }];

（3）卡片式轮播图

  ……

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>