


Bagaimana untuk menyelesaikan masalah yang dihadapi apabila menggunakan swiper dalam vue3
1. Pasang swiper
Gunakan npm install swiper untuk memasang swpier plug-in
npm install swiper -s // @9.2.0 // 或者安装指定版本 npm install swiper@8.4.7 -s
2 , projek akan melaporkan ralat
Penyelesaian:
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue"; import "swiper/swiper.min.css";
Kadangkala anda juga perlu menggunakan beberapa API komponen lain , seperti:
<template> <swiper class="swpier" :modules="modules" :slides-per-view="3" :space-between="50" loop="true" direction="horizontal" navigation :autoplay="{ delay: 2000, disableOnInteraction: false, pauseOnMouseEnter: true, }" :pagination="{ clickable: true }" :scrollbar="{ draggable: true }" @swiper="onSwiper" @slideChange="onSlideChange" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> <swiper-slide>Slide 4</swiper-slide> <swiper-slide>Slide 5</swiper-slide> </swiper> </template> <script> // Navigation: 方向箭头:向左,向右 /* Pagination: 轮播小圆点 clickable: 如果为true,则单击分页按钮将跳转到对应的slide。仅适用于项目符号分页类型 */ /* Scrollbar: 滚动条 draggable: 设置为true可使滚动条可拖动,从而控制滑块位置 */ /* AutoPlay: 自动轮播 delay: 转换之间的延迟(毫秒)。如果未指定此参数,将禁用自动播放 disableOnInteraction:设置为false,用户交互(滑动)后自动播放不会被禁用,每次交互后都会重新启动 pauseOnMouseEnter:启用后,指针(鼠标)在Swiper容器上输入时将暂停自动播放。 */
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from "swiper"; import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue"; import "swiper/swiper.min.css"; import "swiper/modules/navigation/navigation.min.css"; import "swiper/modules/pagination/pagination.min.css"; import "swiper/modules/scrollbar/scrollbar.min.css"; import "swiper/modules/autoplay/autoplay.min.css"; export default { components: { Swiper, SwiperSlide, }, setup() { const onSwiper = (swiper) => { console.log(swiper); }; const onSlideChange = () => { console.log("slide change"); }; return { onSwiper, onSlideChange, modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay], }; }, };
Antaranya:
gelung: Sama ada hendak gelung: benar/salah
arah: arah karusel "mendatar"/"menegak", lalai "mendatar"slaid-per-pandangan: mengawal bilangan kali dipaparkan pada satu masa Imej karusel
ruang-antara: Jarak antara setiap imej karusel ini tidak boleh digunakan dengan atribut jidar pada masa yang sama; 🎜>3. echarts+swiper
Latar belakang projek
Perlu memaparkan dan menyertakan echarts berbeza dalam setiap item karusel swiper dan menghidupkan gelung:true loop
“echarts ”: “^5.4.0”
“swiper ": "^9.2.0" Perihalan masalah:
Selepas menghidupkan gelung: benar, ecarta pertama dan terakhir tidak boleh diberikan seperti biasa
Punca:
gelung: Selepas benar, leret akan menyalin slaid yang sama sebelum dan selepas untuk memastikan kesan gelung ID yang digunakan semasa pemulaan tidak unik, menyebabkan permulaan echarts menjadi tidak sah
Penyelesaian:
// 通过class获取dom,并在循环时初始化,为了保证echarts初始化时dom已经更新渲染,加一个setTimeout函数 setTimeout(() => { const myEchart = document.getElementsByClassName(classname); let chart = null; Array.prototype.forEach.call(myEchart, function (element, i, arr) { element.setAttribute("_echarts_instance_", ""); chart = echarts.init(element); console.log(arr); chart.setOption(optionArr[i]); }); })
Atau gunakan untuk (biar i = 0; i
Nota: for (let i in myEchart) {} tidak boleh digunakan di sini, jika tidak, ralat akan dilaporkan seperti berikut :
Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah yang dihadapi apabila menggunakan swiper dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Penggunaan vue3+vite:src memerlukan pengimportan imej secara dinamik dan laporan ralat dan penyelesaian vue3+vite secara dinamik Jika vue3 dibangunkan menggunakan skrip taip, akan terdapat mesej ralat untuk keperluan untuk memperkenalkan imej tidak boleh digunakan :require(' .../assets/test.png') diimport kerana typescript tidak menyokong require, jadi import digunakan Berikut ialah cara menyelesaikannya: gunakan awaitimport

tinymce ialah pemalam editor teks kaya yang berfungsi sepenuhnya, tetapi memperkenalkan tinymce ke dalam vue tidak selancar seperti pemalam teks kaya Vue yang lain tidak sesuai untuk Vue dan @tinymce/tinymce-vue perlu diperkenalkan. dan Ia adalah pemalam teks kaya asing dan belum melepasi versi Cina Anda perlu memuat turun pakej terjemahan dari tapak web rasminya (anda mungkin perlu memintas tembok api). 1. Pasang kebergantungan yang berkaitan npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2 Muat turun pakej Cina 3. Perkenalkan pakej kulit dan Cina Buat folder tinymce baharu dalam folder awam projek dan muat turun

Vue melaksanakan bahagian hadapan blog dan perlu melaksanakan penghuraian markdown Jika terdapat kod, ia perlu melaksanakan penyerlahan kod. Terdapat banyak pustaka parsing markdown untuk Vue, seperti markdown-it, vue-markdown-loader, marked, vue-markdown, dsb. Perpustakaan ini semuanya sangat serupa. Ditanda digunakan di sini, dan highlight.js digunakan sebagai pustaka penonjolan kod. Langkah-langkah pelaksanaan khusus adalah seperti berikut: 1. Pasang perpustakaan bergantung Buka tetingkap arahan di bawah projek vue dan masukkan arahan berikut npminstallmarked-save//marked untuk menukar markdown ke htmlnpmins.

Untuk mencapai muat semula separa halaman, kami hanya perlu melaksanakan pemaparan semula komponen setempat (dom). Dalam Vue, cara paling mudah untuk mencapai kesan ini ialah menggunakan arahan v-if. Dalam Vue2, selain menggunakan arahan v-if untuk memaparkan semula dom setempat, kami juga boleh mencipta komponen kosong baharu Apabila kami perlu memuat semula halaman setempat, lompat ke halaman komponen kosong ini dan kemudian masuk semula pengawal beforeRouteEnter dalam komponen kosong. Seperti yang ditunjukkan dalam rajah di bawah, cara mengklik butang muat semula dalam Vue3.X untuk memuatkan semula DOM dalam kotak merah dan memaparkan status pemuatan yang sepadan. Memandangkan pengawal dalam komponen dalam sintaks persediaan skrip dalam Vue3.X hanya mempunyai o

Selepas projek vue3 dibungkus dan diterbitkan ke pelayan, halaman akses memaparkan kosong 1. PublicPath dalam fail vue.config.js diproses seperti berikut: const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='pengeluaran'?'./':'/&

Prakata Sama ada ia adalah vue atau react, apabila kita menghadapi berbilang kod berulang, kita akan memikirkan cara untuk menggunakan semula kod ini, dan bukannya mengisi fail dengan sekumpulan kod berlebihan. Malah, kedua-dua vue dan react boleh mencapai penggunaan semula dengan mengekstrak komponen, tetapi jika anda menemui beberapa serpihan kod kecil dan anda tidak mahu mengekstrak fail lain, sebagai perbandingan, react boleh digunakan dalam yang sama Isytiharkan widget yang sepadan dalam fail , atau laksanakannya melalui fungsi render, seperti: constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

Menggunakan Vue untuk membina elemen tersuai WebComponents ialah nama kolektif untuk satu set API asli web yang membenarkan pembangun mencipta elemen tersuai yang boleh diguna semula (customelements). Faedah utama elemen tersuai ialah ia boleh digunakan dengan mana-mana rangka kerja, walaupun tanpa satu. Ia sesuai apabila anda menyasarkan pengguna akhir yang mungkin menggunakan tindanan teknologi bahagian hadapan yang berbeza, atau apabila anda ingin mengasingkan aplikasi akhir daripada butiran pelaksanaan komponen yang digunakannya. Vue dan WebComponents ialah teknologi pelengkap, dan Vue menyediakan sokongan yang sangat baik untuk menggunakan dan mencipta elemen tersuai. Anda boleh menyepadukan elemen tersuai ke dalam aplikasi Vue sedia ada, atau menggunakan Vue untuk membina

1 Pengenalan 1.1 Tujuan ElementPlus menggunakan pengenalan atas permintaan untuk mengurangkan saiz fail yang dibungkus dengan banyak 1.2 Kesan terakhir adalah untuk menjana fail komponen.d.ts secara automatik dan memasukkannya ke dalam fail secara automatik. d.ts dan masukkannya ke dalam fail Persediaan ElementPlusAPI2 Pasang ElementPlus#Pilih pengurus pakej yang anda suka#NPM$npminstallelement-plus--save#Yarn$yarnaddelement-plus#pnpm$pnpminstallelement-plus3 Tekan
