新浪网站制作,网页设计与网站建设步骤,单页面的网站模板,大丰做网站一. 内容简介
vue使用vant轮播图组件(桌面端)
二. 软件环境
2.1 Visual Studio Code 1.75.0
2.2 chrome浏览器
2.3 node v18.14.0
三.主要流程
3.1 安装环境
3.2 添加代码
3.3 结果展示
四.具体步骤
4.1 安装环境
先安装包
# Vue 3 项目#xff0c;安装最新版 Va…一. 内容简介
vue使用vant轮播图组件(桌面端)
二. 软件环境
2.1 Visual Studio Code 1.75.0
2.2 chrome浏览器
2.3 node v18.14.0
三.主要流程
3.1 安装环境
3.2 添加代码
3.3 结果展示
四.具体步骤
4.1 安装环境
先安装包
# Vue 3 项目安装最新版 Vant
npm i vant# Vue 2 项目安装 Vant 2
npm i vantlatest-v2然后桌面端适配
npm i vant/touch-emulator -S4.2 添加代码
注册组件 相比于官方给的代码有两个方面需要注意一个是适配桌面端还有一个就是我以为vant组件是和vue组件一样导入一个就包含所有的结构了其实vant组件import导入的时候并没有导入css样式就会出现这样就是样式不全。
templatediv idccvan-swipe classmy-swipe :autoplay3000 indicator-colorwhitevan-swipe-item1/van-swipe-itemvan-swipe-item2/van-swipe-itemvan-swipe-item3/van-swipe-item/van-swipe/div
/templatescript
import { Swipe, SwipeItem } from vant;
// 为了适配桌面端
import vant/touch-emulator;
export default {data() {return {};},components: { [Swipe.name]: Swipe, [SwipeItem.name]: SwipeItem },
};
/scriptstyle
// 导入样式
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;
}
/style4.3 结果展示 五. 参考
