Vant-components NPM

vant-components

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

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)

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

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

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

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

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

参数	说明	类型	默认值
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 label-width="120px" label="VantDateRange" v-model="dateRange" />

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

参数	说明	类型	默认值
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	-