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

                                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/（解决方法一）

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

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

                    import utils from '../utils/utils'//定义跑马灯的图片路径const imageList = [  { url: utils.getAssetsFile('1.jpg') },  { url: utils.getAssetsFile('2.jpg') },  { url: utils.getAssetsFile('3.jpg') },];.el-carousel {  width: 1200px;}.el-carousel__item img {  width: 100%;  height: 100%;  color: #475669;  opacity: 0.75;  margin: 0;  text-align: center;}

（3）修改App.vue

    import Rotation from './components/Rotation.vue';

（4）运行

cd rotationnpm installnpm run dev

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

/* 需要改变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%;}