Vue Vant使用

最新推荐文章于 2025-09-18 09:52:43 发布

原创最新推荐文章于 2025-09-18 09:52:43 发布 · 1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

60 篇文章

订阅专栏

Vue 渐进式JavaScript 框架基于Vue2的移动端项目：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简单使用