vant的特性:

  • 60+ 高质量组件
  • 95% 单元测试覆盖率
  • 完善的中英文文档和示例
  • 支持按需引入
  • 支持主题定制
  • 支持国际化
  • 支持 TS
  • 支持 SSR

vant  在  vue中引入 

# 通过 npm 安装 npm i vant -S

在main.js引入

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

vant

 

vant主要是vue中的移动端

下面我们来演示一下在vue移动端中点击按钮显示遮罩层  在遮罩层中显示DatetimePicker 时间选择

如图所示

 vant

vant

 

在temolate中写入button按钮并设置点击事件

vant

遮罩层中写入DatetimePicker 时间选择

vant

v-show显示与隐藏

position定位于底部bottom

type属性是时间的年月

formatter是选项格式化函数

 !!!应该驼峰命名 sorry~!!!!

confirm是确认按钮que是点击事件  

 cancel是取消按钮del是点击事件

vant

 

 

 点击取消时隐藏遮罩层

点击按钮时显示遮罩层

vant

 

vant

 

formatter是时间的选择器

vant

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-04-08
  • 2021-10-09
  • 2021-07-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-12-19
  • 2022-12-23
  • 2021-12-28
  • 2021-05-16
  • 2022-12-23
  • 2021-07-07
  • 2021-12-05
相关资源
相似解决方案