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	-