一. 內容簡介
vue使用vant輪播圖組件(桌面端)
二. 軟件環(huán)境
2.1 Visual Studio Code 1.75.0
2.2 chrome瀏覽器
2.3 node v18.14.0
三.主要流程
3.1 安裝環(huán)境
3.2 添加代碼
3.3 結果展示
四.具體步驟
4.1 安裝環(huán)境
先安裝包
# Vue 3 項目，安裝最新版 Vant
npm i vant
# Vue 2 項目，安裝 Vant 2
npm i vant@latest-v2
然后桌面端適配
npm i @vant/touch-emulator -S
4.2 添加代碼
注冊組件
相比于官方給的代碼，有兩個方面需要注意，一個是適配桌面端，還有一個就是我以為vant組件是和vue組件一樣，導入一個就包含所有的結構了，其實vant組件import導入的時候并沒有導入css樣式，就會出現(xiàn)這樣，就是樣式不全。
<template>
<div id="cc">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
</van-swipe>
</div>
</template>
<script>
import { Swipe, SwipeItem } from "vant";
// 為了適配桌面端
import "@vant/touch-emulator";
export default {
data() {
return {};
},
components: { [Swipe.name]: Swipe, [SwipeItem.name]: SwipeItem },
};
</script>
<style>
// 導入樣式
@import "vant/lib/index.css";
#cc {
width: 100%;
clip: auto;
}
.van-swipe-item {
width: 100%;
color: #fff;
font-size: 20px;
line-height: 150px;
text-align: center;
background-color: #39a9ed;
}
</style>
后續(xù)更新
放到main.js里面就好了,改樣式可以直接覆蓋他原來的樣式就可以了文章來源：http://www.zghlxwxcb.cn/news/detail-759529.html
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 加載Vant組件庫
import Vant from 'vant';
import 'vant/lib/index.css';
// 自己的要放在組件庫后面,這樣才能方便修改
// 加載全局樣式
import './styles/index.less'
// 移動端REM適配，動態(tài)調整html字體大小
import 'amfe-flexible'
// 桌面端適配
import "@vant/touch-emulator";
// 注冊Vant組件
Vue.use(Vant);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
4.3 結果展示
文章來源地址http://www.zghlxwxcb.cn/news/detail-759529.html
五. 參考
到了這里，關于vue項目中使用vant輪播圖組件(桌面端)的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
