vant-components

说明

vant-components 是 Vant 的扩展和封装,方便使用.使用必须基于Vue.js 和 Vant.

Demo

https://vant-components.vercel.app/

使用

安装

yarn add vant-components  # or npm install vant-components --save

全部引入

// main.js
import Vue from 'vue'
import VantComponents from 'vant-components'

Vue.use(VantComponents)

按需引入组件

// main.js
import Vue from 'vue'
import { Select } from 'vant-components'

Vue.use(Select)

组件

Select

<VantSelect
    label="Select"
    v-model="select"
    :options="options"
    @select="onSelect"
/>

Select 组件为 vant field 和 action-sheet 组合.

• Props

| 参数 | 说明 | 类型 | 默认值 | | -------------- | ----------------------------------------------------------- | ------------- | ------ | | v-model | 绑定值 | string/number | - | | options | 选项 | any[] | - | | disabled | 是否禁用 | boolean | false | | clearable | 是否可清除 | boolean | false | | name-props | 显示字段的 key | string | name | | 其他(label...) | 同Field | - | - |

• Events

| 事件名称 | 说明 | 回调参数 | | -------- | -------------- | ------------------------- | | select | 点击选项时触发 | (option:any,index:number) |

DatePicker

<VantDatePicker label="DatePicker" v-model="date" />

DatePicker 组件为 vant field 和 datetime-picker 组合.

• Props

| 参数 | 说明 | 类型 | 默认值 | | -------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------- | ---------- | | v-model | 绑定值 | string/timestamp | - | | disabled | 是否禁用 | boolean | false | | clearable | 是否可清除 | boolean | false | | value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象(常用 YYYY-MM-DD) | dayjs Format/timestamp | - | | type | 时间类型 | 'date', 'time', 'year-month', 'month-day', 'datehour', 'datetime' | date | | format | 显示格式化(默认与 type 匹配) | dayjs Format | YYYY-MM-DD | | 其他(label...) | 同Field | - | - |

VantDateRange

<VantDateRange label-width="120px" label="VantDateRange" v-model="dateRange" />

VantDateRange 组件为 vant field 和 datetime-picker 组合.

• Props

| 参数 | 说明 | 类型 | 默认值 | | -------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------- | ---------- | | v-model | 绑定值 | Date[],timestamp[],String[] | - | | disabled | 是否禁用 | boolean | false | | clearable | 是否可清除 | boolean | false | | value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象(常用 YYYY-MM-DD) | dayjs Format/timestamp | - | | type | 时间类型 | 'date', 'time', 'year-month', 'month-day', 'datehour', 'datetime' | date | | format | 显示格式化(默认与 type 匹配) | dayjs Format | YYYY-MM-DD | | 其他(label...) | 同Field | - |