實驗 輪播圖

1、引入Element Plus

（1）引入Element開發(fā)環(huán)境

npm install element-plus --save

（2）自動引入Element

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

（3）在配置文件中進行配置，本人使用的是Vit構(gòu)建工具

如果使用Vite作為構(gòu)建工具，配置文件為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，用于讀取靜態(tài)圖片

// 獲取assets靜態(tài)資源
const getAssetsFile = (url: string) => {
    return new URL(`../assets/${url}`, import.meta.url).href;
};

export default {
    getAssetsFile,
};

（2）創(chuàng)建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 rotation
npm install
npm run dev

5、修改輪播圖的樣式（修改指示器為小圓點、修改左右箭頭）

文章來源地址http://www.zghlxwxcb.cn/news/detail-737167.html

<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>

到了這里，關于教程6 Vue3+Element Plus el-carousel制作輪播圖（后面有修改樣式的方法）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！