介绍
弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
弹出框组件支持函数调用和组件调用两种方式
函数调用
Dialog 是一个函数而不是组件，因此可以直接调用，展示对应的提示弹窗
import { Dialog } f...
AI君
2年前 (2020-03-06) 55℃
1喜欢
引入
import Vue from 'vue';
import { ActionSheet } from 'vant';
Vue.use(ActionSheet);
代码演示
基础用法
ActionSheet通过actions数组来定...
AI君
2年前 (2020-03-06) 57℃
0喜欢
引入
import Vue from 'vue';
import { Uploader } from 'vant';
Vue.use(Uploader);
代码演示
基础用法
文件上传完毕后会触发after-read回调函数，获取到对应...
AI君
2年前 (2020-03-06) 60℃
2喜欢
引入
import Vue from 'vue';
import { Switch } from 'vant';
Vue.use(Switch);
代码演示
基础用法
通过v-model绑定开关的选中状态，true表示开，false表示...
AI君
2年前 (2020-03-06) 65℃
6喜欢
介绍
步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字
引入
import Vue from 'vue';
import { Stepper } from 'vant';
Vue.use(Stepper);
代码演...
AI君
2年前 (2020-03-06) 60℃
3喜欢
引入
import Vue from 'vue';
import { Slider } from 'vant';
Vue.use(Slider);
代码演示
基本用法
<van-slider v-model="value" @ch...
AI君
2年前 (2020-03-06) 58℃
3喜欢
引入
import Vue from 'vue';
import { Search } from 'vant';
Vue.use(Search);
代码演示
基础用法
v-model 用于控制搜索框中的文字，background 可以自...
AI君
2年前 (2020-03-06) 60℃
1喜欢
引入
import Vue from 'vue';
import { Rate } from 'vant';
Vue.use(Rate);
代码演示
基础用法
<van-rate v-model="value" />
ex...
AI君
2年前 (2020-03-06) 57℃
0喜欢
引入
import Vue from 'vue';
import { RadioGroup, Radio } from 'vant';
Vue.use(Radio);
Vue.use(RadioGroup);
代码演示
基础用法
通过v...
AI君
2年前 (2020-03-06) 58℃
2喜欢
介绍
提供多个选项集合供用户选择，支持单列选择和多列级联，通常与 弹出层 组件配合使用
引入
import Vue from 'vue';
import { Picker } from 'vant';
Vue.use(Picker);
...
AI君
2年前 (2020-03-06) 63℃
7喜欢
介绍
带网格的输入框组件，可以用于输入支付密码、短信验证码等，通常与数字键盘组件配合使用
引入
import Vue from 'vue';
import { PasswordInput, NumberKeyboard } from 'va...
AI君
2年前 (2020-03-06) 59℃
2喜欢
介绍
数字键盘，提供两种样式风格，可以与密码输入框或自定义的输入框组件配合使用
引入
import Vue from 'vue';
import { NumberKeyboard } from 'vant';
Vue.use(Number...
AI君
2年前 (2020-03-06) 58℃
1喜欢
介绍
表单中的输入框组件
引入
import Vue from 'vue';
import { Field } from 'vant';
Vue.use(Field);
代码演示
基础用法
可以通过v-model双向绑定输入框的值，通过...
AI君
2年前 (2020-03-06) 57℃
3喜欢
介绍
时间选择器，支持日期、年月、时分等维度，通常与 弹出层 组件配合使用
引入
import Vue from 'vue';
import { DatetimePicker } from 'vant';
Vue.use(Datetime...
AI君
2年前 (2020-03-06) 88℃
1喜欢
引入
import Vue from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
代...
AI君
2年前 (2020-03-06) 58℃
4喜欢
介绍
日历组件用于选择日期或日期区间，2.4 版本开始支持此组件
引入
import Vue from 'vue';
import { Calendar } from 'vant';
Vue.use(Calendar);
代码演示
选择...
AI君
2年前 (2020-03-06) 57℃
3喜欢
介绍
Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。
文字省略
当文本内容长度超过容器最大宽度时，自动省略多余的文本。
<!-- 最多显示一行 -->
<div class="van-e...
AI君
2年前 (2020-03-06) 65℃
2喜欢
介绍
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示
引入
import Vue from 'vue';
import { Popup } from 'vant';
Vue.use(Popup);
代码演示
基础用法
...
AI君
2年前 (2020-03-06) 57℃
3喜欢
介绍
Layout 提供了van-row和van-col两个组件来进行行列布局
引入
import Vue from 'vue';
import { Col, Row } from 'vant';
Vue.use(Col);
Vue.us...
AI君
2年前 (2020-03-06) 60℃
0喜欢
介绍
增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示
引入
import Vue from 'vue';
import { Image } from 'vant';
Vue.use(Image);
...
AI君
2年前 (2020-03-06) 57℃
1喜欢
