Vant移动端组件库 v3.0.0

# Form ### Install ```js import { createApp } from 'vue'; import { Form } from 'vant'; const app = createApp(); app.use(Form); ``` ## Usage ### Basic Usage ```html <van-form @submit="onSubmit"> <van-field v-model="state.username" name="Username" label="Username" placeholder="Username" :rules="[{ required: true, message: 'Username is required' }]" /> <van-field v-model="state.password" type="password" name="Password" label="Password" placeholder="Password" :rules="[{ required: true, message: 'Password is required' }]" /> <div style="margin: 16px;"> <van-button round block type="primary" native-type="submit"> Submit </van-button> </div> </van-form> ``` ```js import { reactive } from 'vue'; export default { setup() { const state = reactive({ username: '', password: '', }); const onSubmit = (values) => { console.log('submit', values); }; return { state, onSubmit, }; }, }; ``` ### Validate Rules ```html <van-form validate-first @failed="onFailed"> <van-field v-model="state.value1" name="pattern" placeholder="USe pattern" :rules="[{ pattern, message: 'Error message' }]" /> <van-field v-model="state.value2" name="validator" placeholder="Use validator" :rules="[{ validator, message: 'Error message' }]" /> <van-field v-model="state.value3" name="asyncValidator" placeholder="Use async validator" :rules="[{ validator: asyncValidator, message: 'Error message' }]" /> <div style="margin: 16px;"> <van-button round block type="primary" native-type="submit"> Submit </van-button> </div> </van-form> ``` ```js import { reactive } from 'vue'; import { Toast } from 'vant'; export default { setup() { const state = reactive({ value1: '', value2: '', value3: '', }); const pattern = /\d{6}/; const validator = (val) => /1\d{10}/.test(val); const asyncValidator = (val) => new Promise((resolve) => { Toast.loading('Validating...'); setTimeout(() => { Toast.clear(); resolve(/\d{6}/.test(val)); }, 1000); }); const onFailed = (errorInfo) => { console.log('failed', errorInfo); }; return { state, pattern, onFailed, validator, asyncValidator, }; }, }; ``` ### Field Type - Switch ```html <van-field name="switch" label="Switch"> <template #input> <van-switch v-model="checked" size="20" /> </template> </van-field> ``` ```js import { ref } from 'vue'; export default { setup() { const checked = ref(false); return { checked }; }, }; ``` ### Field Type - Checkbox ```html <van-field name="checkbox" label="Checkbox"> <template #input> <van-checkbox v-model="checked" shape="square" /> </template> </van-field> <van-field name="checkboxGroup" label="CheckboxGroup"> <template #input> <van-checkbox-group v-model="groupChecked" direction="horizontal"> <van-checkbox name="1" shape="square">Checkbox 1</van-checkbox> <van-checkbox name="2" shape="square">Checkbox 2</van-checkbox> </van-checkbox-group> </template> </van-field> ``` ```js import { ref } from 'vue'; export default { setup() { const checked = ref(false); const groupChecked = ref([]); return { checked, groupChecked, }; }, }; ``` ### Field Type - Radio ```html <van-field name="radio" label="Radio"> <template #input> <van-radio-group v-model="checked" direction="horizontal"> <van-radio name="1">Radio 1</van-radio> <van-radio name="2">Radio 2</van-radio> </van-radio-group> </template> </van-field> ``` ```js import { ref } from 'vue'; export default { setup() { const checked = ref('1'); return { checked }; }, }; ``` ### Field Type - Stepper ```html <van-field name="stepper" label="Stepper"> <template #input> <van-stepper v-model="value" /> </template> </van-field> ``` ```js import { ref } from 'vue'; export default { setup() { const value = ref(1); return { value }; }, }; ``` ### Field Type - Rate ```html <van-field name="rate" label="Rate"> <template #input> <van-rate v-model="value" /> </template> </van-field> ``` ```js import { ref } from 'vue'; export default { setup() { const value = ref(3); return { value }; }, }; ``` ### Field Type - Slider ```html <van-field name="slider" label="Slider"> <template #input> <van-slider v-model="value" /> </template> </van-field> ``` ```js import { ref } from 'vue'; export default { setup() { const value = ref(50); return { value }; }, }; ``` ### Field Type - Uploader ```html <van-field name="uploader" label="Uploader"> <template #input> <van-uploader v-model="value" /> </template> </van-field> ``` ```js import { ref } from 'vue'; export default { setup() { const value = ref([{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }]); return { value }; }, }; ``` ### Field Type - Picker ```html <van-field readonly clickable name="picker" :value="state.value" label="Picker" placeholder="Select city" @click="state.showPicker = true" /> <van-popup v-model:show="state.showPicker" position="bottom"> <van-picker :columns="columns" @confirm="onConfirm" @cancel="state.showPicker = false" /> </van-popup> ``` ```js import { reactive } from 'vue'; export default { setup() { const state = reactive({ value: '', showPicker: false, }); const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']; const onConfirm = (value) => { state.value = value; state.showPicker = false; }; return { state, columns, onConfirm, }; }, }; ``` ### Field Type - DatetimePicker ```html <van-field readonly clickable name="datetimePicker" :value="state.value" label="Datetime Picker" placeholder="Select time" @click="state.showPicker = true" /> <van-popup v-model:show="state.showPicker" position="bottom"> <van-datetime-picker type="time" @confirm="onConfirm" @cancel="state.showPicker = false" /> </van-popup> ``` ```js import { reactive } from 'vue'; export default { setup() { const state = reactive({ value: '', showPicker: false, }); const onConfirm = (value) => { state.value = value; state.showPicker = false; }; return { state, onConfirm, }; }, }; ``` ### Field Type - Area ```html <van-field readonly clickable name="area" :value="state.value" label="Area Picker" placeholder="Select area" @click="state.showArea = true" /> <van-popup v-model:show="state.showArea" position="bottom"> <van-area :area-list="areaList" @confirm="onConfirm" @cancel="state.showArea = false" /> </van-popup> ``` ```js import { reactive } from 'vue'; export default { setup() { const state = reactive({ value: '', showArea: false, }); const onConfirm = (value) => { state.showArea = false; state.value = values .filter((item) => !!item) .map((item) => item.name) .join('/'); }; return { state, areaList: {}, onConfirm, }; }, }; ``` ### Field Type - Calendar ```html <van-field readonly clickable name="calendar" :value="state.value" label="Calendar" placeholder="Select date" @click="state.showCalendar = true" /> <van-calendar v-model="state.showCalendar" @confirm="onConfirm" /> ``` ```js import { reactive } from 'vue'; export default { setup() { const state = reactive({ value: '', showCalendar: false, }); const onConfirm = (date) => { state.value = `${date.getMonth() + 1}/${date.getDate()}`; state.showCalendar = false; }; return { state, onConfirm, }; }, }; ``` ## API ### Props |