Vue之Vant移动端组件库使用方法

￡神魔★判官ぃ 2022-10-20 13:44 200阅读 0赞

## 步骤： ##

**全局安装**

npm i vant -S

在mian.js中引入

import Vant from 'vant';
    import 'vant/lib/index.css';
    Vue.use(Vant);

**根据实际情况引入组件**

<template>
      <div>
        <van-cell title="选择多个日期" :value="text" @click="show = true" />
        <van-calendar v-model="show" type="multiple" @confirm="onConfirm" />
      </div>
    </template>
    
    <script>
    export default { 
       data() { 
        return { 
          text: '',
          show: false,
        };
      },
      methods: { 
        onConfirm(date) { 
          this.show = false;
          this.text = `选择了 ${ date.length} 个日期`;
        },
      },
    }
    </script>
    
    <style>
    
    </style>

**效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]: /images/20221020/7462cc64809347ef895a52b8b2e80d07.png

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue移动端弹框组件

这里说一下 `vue-layer-mobile`插件的使用一、npm 安装 // 当前最新版本 1.2.0 npm install vue-laye

心已赠人/ 2023年02月10日 12:26/ 0 赞/ 48 阅读

相关 Vue移动端组件库Vant的快速上手

1. 初次创建项目使用此方法 > Vue 官方提供的脚手架 [Vue Cli][] 创建项目安装 npm install -g @vue/cli

曾经终败给现在/ 2023年02月10日 05:08/ 0 赞/ 147 阅读

相关 Vue+vant移动端处理弹框滑动问题

Vue+vant做移动端需要实现一个弹框向上下滑动的功能遇到了问题记录一下 <div class="popupShowHeight" id="popupShow

ゝ一世哀愁。/ 2022年12月31日 02:19/ 0 赞/ 794 阅读

相关 vue移动组件vant官网打不开的解决方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

你的名字/ 2022年12月10日 05:57/ 0 赞/ 401 阅读

相关 Vue之Vant移动端组件库使用方法

步骤：全局安装 npm i vant -S 在mian.js中引入 import Vant from 'vant'; import 'va

￡神魔★判官ぃ/ 2022年10月20日 13:44/ 0 赞/ 201 阅读

相关 vue+vant适配移动端REM

第一步：下载 npm i -S amfe-flexible 第二步：在main.js里面引入 import ‘amfe-flexible’ 第三步：下载 npm insta

谁借莪１个温暖的怀抱￠/ 2022年10月20日 01:14/ 0 赞/ 196 阅读

相关 Taroify 移动端组件库 (极力推荐)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5ZGA5ZOIQA_si

拼搏现实的明天。/ 2022年09月09日 15:52/ 0 赞/ 340 阅读

相关基于 Vue.js 的移动端组件库 Mint UI

Mint UI 详细介绍 Mint-UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。真正意义上

深藏阁楼爱情的钟/ 2022年05月20日 06:21/ 0 赞/ 215 阅读

相关基于 Vue.js 的移动端组件库 cube-ui

cube-ui 详细介绍 cube-ui 是由滴滴开源的基于 Vue.js 实现的移动端组件库。功能特性质量可靠由滴滴内部组件库精简提炼

迈不过友情╰/ 2022年05月17日 20:46/ 0 赞/ 208 阅读

相关 vue 使用vant库

1、引入 cnpm i vant -S cnpm i babel-plugin-import -D 2、配置按需加载

雨点打透心脏的1/2处/ 2021年07月25日 00:58/ 0 赞/ 367 阅读