vant-components

1.2.0 • Public • Published

vant-components

说明

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

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 -

Readme

Keywords

Package Sidebar

Install

npm i vant-components

Weekly Downloads

4

Version

1.2.0

License

MIT

Unpacked Size

901 kB

Total Files

29

Last publish

Collaborators

  • joey2018