教程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 rotation
npm install
npm 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%;
}