Vue Vant使用

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：vant简单使用

目录

Vant组件

安装

修改入口

修改回移动端入口

引入组件

手动引入组件

导入所有组件

Vant应用

顶部标题

图片预览

预览一张

预览所有

预览初始位置

关闭按钮

总结

---

Vant组件

有赞技术团队推出的Vue移动端框架

移动端框架：vant

中文官网 Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

安装

通过npm安装

在现有项目中使用vant时，可以通过npm或者yarn进行安装。

npm安装命令

# Vue 2项目，安装Vant 2
npm i vant@latest-v2# Vue 3项目，安装Vant 3
npm i vant

修改入口

修改回移动端入口

在main.js中把PC端入口改为App.vue。

示例如下：

引入组件

手动引入组件

在不使用插件的情况下，可以手动引入需要的组件。

导入所有组件

Vant支持一次性导入所有组件爱你，引入所有组件会增加代码包体积，

因此不推荐这种做法。

Vant应用

顶部标题

在app.vue中引入Vant后，然后在CinemasView.vue中使用Vant增加搜索框。

示例如下：

<template><div><van-nav-bar title="影院"><template #left>北京<van-icon name="arrow-down"/></template><template #right><van-icon name="search" size="18" color="black" /></template></van-nav-bar><div class="box" :style="{height: height}"><ul><li v-for="data in cinemaList" :key="data.cinemaId"><div class="left"><div class="cinema_name">{{data.name}}</div><div class="cinema_text">{{data.address}}</div></div><div class="right cinema_name"><div style="color:red">￥ {{data.lowPrice / 100}} 起</div></div></li></ul></div></div>
</template>

页面高度计算修改

首先绑定ref

然后动态计算时减去顶部标题的高度

图片预览

使用函数调用 ImagePreview是一个函数，调用函数后会直接在页面中展示图片预览界面。

预览一张

应用在点击详情：剧照点击查看图片：首先图片绑定事件。

设置绑定事件

components: {detailSwiper,detailSwiperItem,detailHeader},methods: {handlePreview () {ImagePreview(['https://pic.maizuo.com/usr/movie/713548d3d3880fb3962bbf248c1852fd.jpeg'])}},

预览所有

使用动态传值，预览所有照片。

 methods: {handlePreview () {ImagePreview(this.filmInfo.photos)}},

预览初始位置

ImagePreview支持传入配置对象，

并通过 startPosition 选项指定图片的初始位置（索引值）

绑定事件时，传递索引

接收index，设定初始位置

methods: {handlePreview (index) {ImagePreview({image: this.filmInfo.photos,startPosition: index})}}

关闭按钮

设置是否显示关闭按钮，示例如下：

ImagePreview({image: this.filmInfo.photos,startPosition: index,closeable: true})

总结

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：vant简单使用