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

步骤：

全局安装

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>

效果图