docs(Form): use composition api
This commit is contained in:
chenjiahan
+155
-111
@@ -17,14 +17,14 @@ app.use(Form);
|
||||
```html
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field
|
||||
v-model="username"
|
||||
v-model="state.username"
|
||||
name="Username"
|
||||
label="Username"
|
||||
placeholder="Username"
|
||||
:rules="[{ required: true, message: 'Username is required' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
v-model="state.password"
|
||||
type="password"
|
||||
name="Password"
|
||||
label="Password"
|
||||
@@ -40,17 +40,22 @@ app.use(Form);
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
});
|
||||
const onSubmit = (values) => {
|
||||
console.log('submit', values);
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
onSubmit,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@@ -60,19 +65,19 @@ export default {
|
||||
```html
|
||||
<van-form validate-first @failed="onFailed">
|
||||
<van-field
|
||||
v-model="value1"
|
||||
v-model="state.value1"
|
||||
name="pattern"
|
||||
placeholder="USe pattern"
|
||||
:rules="[{ pattern, message: 'Error message' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
v-model="state.value2"
|
||||
name="validator"
|
||||
placeholder="Use validator"
|
||||
:rules="[{ validator, message: 'Error message' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value3"
|
||||
v-model="state.value3"
|
||||
name="asyncValidator"
|
||||
placeholder="Use async validator"
|
||||
:rules="[{ validator: asyncValidator, message: 'Error message' }]"
|
||||
@@ -86,23 +91,22 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
pattern: /\d{6}/,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
validator(val) {
|
||||
return /1\d{10}/.test(val);
|
||||
},
|
||||
asyncValidator(val) {
|
||||
return new Promise((resolve) => {
|
||||
});
|
||||
const pattern = /\d{6}/;
|
||||
|
||||
const validator = (val) => /1\d{10}/.test(val);
|
||||
|
||||
const asyncValidator = (val) =>
|
||||
new Promise((resolve) => {
|
||||
Toast.loading('Validating...');
|
||||
|
||||
setTimeout(() => {
|
||||
@@ -110,10 +114,18 @@ export default {
|
||||
resolve(/\d{6}/.test(val));
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
onFailed(errorInfo) {
|
||||
|
||||
const onFailed = (errorInfo) => {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
pattern,
|
||||
onFailed,
|
||||
validator,
|
||||
asyncValidator,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@@ -123,17 +135,18 @@ export default {
|
||||
```html
|
||||
<van-field name="switch" label="Switch">
|
||||
<template #input>
|
||||
<van-switch v-model="switchChecked" size="20" />
|
||||
<van-switch v-model="checked" size="20" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchChecked: false,
|
||||
};
|
||||
setup() {
|
||||
const checked = ref(false);
|
||||
return { checked };
|
||||
},
|
||||
};
|
||||
```
|
||||
@@ -143,12 +156,12 @@ export default {
|
||||
```html
|
||||
<van-field name="checkbox" label="Checkbox">
|
||||
<template #input>
|
||||
<van-checkbox v-model="checkbox" shape="square" />
|
||||
<van-checkbox v-model="checked" shape="square" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="checkboxGroup" label="CheckboxGroup">
|
||||
<template #input>
|
||||
<van-checkbox-group v-model="checkboxGroup" direction="horizontal">
|
||||
<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>
|
||||
@@ -157,11 +170,15 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const checked = ref(false);
|
||||
const groupChecked = ref([]);
|
||||
return {
|
||||
checkbox: false,
|
||||
checkboxGroup: [],
|
||||
checked,
|
||||
groupChecked,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -172,7 +189,7 @@ export default {
|
||||
```html
|
||||
<van-field name="radio" label="Radio">
|
||||
<template #input>
|
||||
<van-radio-group v-model="radio" direction="horizontal">
|
||||
<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>
|
||||
@@ -181,11 +198,12 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1',
|
||||
};
|
||||
setup() {
|
||||
const checked = ref('1');
|
||||
return { checked };
|
||||
},
|
||||
};
|
||||
```
|
||||
@@ -195,17 +213,18 @@ export default {
|
||||
```html
|
||||
<van-field name="stepper" label="Stepper">
|
||||
<template #input>
|
||||
<van-stepper v-model="stepper" />
|
||||
<van-stepper v-model="value" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
stepper: 1,
|
||||
};
|
||||
setup() {
|
||||
const value = ref(1);
|
||||
return { value };
|
||||
},
|
||||
};
|
||||
```
|
||||
@@ -215,17 +234,18 @@ export default {
|
||||
```html
|
||||
<van-field name="rate" label="Rate">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
<van-rate v-model="value" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
rate: 3,
|
||||
};
|
||||
setup() {
|
||||
const value = ref(3);
|
||||
return { value };
|
||||
},
|
||||
};
|
||||
```
|
||||
@@ -235,17 +255,18 @@ export default {
|
||||
```html
|
||||
<van-field name="slider" label="Slider">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
<van-slider v-model="value" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
slider: 50,
|
||||
};
|
||||
setup() {
|
||||
const value = ref(50);
|
||||
return { value };
|
||||
},
|
||||
};
|
||||
```
|
||||
@@ -255,17 +276,18 @@ export default {
|
||||
```html
|
||||
<van-field name="uploader" label="Uploader">
|
||||
<template #input>
|
||||
<van-uploader v-model="uploader" />
|
||||
<van-uploader v-model="value" />
|
||||
</template>
|
||||
</van-field>
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
|
||||
};
|
||||
setup() {
|
||||
const value = ref([{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }]);
|
||||
return { value };
|
||||
},
|
||||
};
|
||||
```
|
||||
@@ -277,34 +299,41 @@ export default {
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
:value="state.value"
|
||||
label="Picker"
|
||||
placeholder="Select city"
|
||||
@click="showPicker = true"
|
||||
@click="state.showPicker = true"
|
||||
/>
|
||||
<van-popup v-model:show="showPicker" position="bottom">
|
||||
<van-popup v-model:show="state.showPicker" position="bottom">
|
||||
<van-picker
|
||||
:columns="columns"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
@cancel="state.showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value: '',
|
||||
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
showPicker: false,
|
||||
});
|
||||
const columns = ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'];
|
||||
|
||||
const onConfirm = (value) => {
|
||||
state.value = value;
|
||||
state.showPicker = false;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
columns,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value) {
|
||||
this.value = value;
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
@@ -316,33 +345,38 @@ export default {
|
||||
readonly
|
||||
clickable
|
||||
name="datetimePicker"
|
||||
:value="value"
|
||||
:value="state.value"
|
||||
label="Datetime Picker"
|
||||
placeholder="Select time"
|
||||
@click="showPicker = true"
|
||||
@click="state.showPicker = true"
|
||||
/>
|
||||
<van-popup v-model:show="showPicker" position="bottom">
|
||||
<van-popup v-model:show="state.showPicker" position="bottom">
|
||||
<van-datetime-picker
|
||||
type="time"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showPicker = false"
|
||||
@cancel="state.showPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
const onConfirm = (value) => {
|
||||
state.value = value;
|
||||
state.showPicker = false;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(time) {
|
||||
this.value = time;
|
||||
this.showPicker = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
@@ -354,37 +388,42 @@ export default {
|
||||
readonly
|
||||
clickable
|
||||
name="area"
|
||||
:value="value"
|
||||
:value="state.value"
|
||||
label="Area Picker"
|
||||
placeholder="Select area"
|
||||
@click="showArea = true"
|
||||
@click="state.showArea = true"
|
||||
/>
|
||||
<van-popup v-model:show="showArea" position="bottom">
|
||||
<van-popup v-model:show="state.showArea" position="bottom">
|
||||
<van-area
|
||||
:area-list="areaList"
|
||||
@confirm="onConfirm"
|
||||
@cancel="showArea = false"
|
||||
@cancel="state.showArea = false"
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showArea: false,
|
||||
areaList: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(values) {
|
||||
this.value = values
|
||||
});
|
||||
const onConfirm = (value) => {
|
||||
state.showArea = false;
|
||||
state.value = values
|
||||
.filter((item) => !!item)
|
||||
.map((item) => item.name)
|
||||
.join('/');
|
||||
this.showArea = false;
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
areaList: {},
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@@ -396,27 +435,32 @@ export default {
|
||||
readonly
|
||||
clickable
|
||||
name="calendar"
|
||||
:value="value"
|
||||
:value="state.value"
|
||||
label="Calendar"
|
||||
placeholder="Select date"
|
||||
@click="showCalendar = true"
|
||||
@click="state.showCalendar = true"
|
||||
/>
|
||||
<van-calendar v-model="showCalendar" @confirm="onConfirm" />
|
||||
<van-calendar v-model="state.showCalendar" @confirm="onConfirm" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
});
|
||||
const onConfirm = (date) => {
|
||||
state.value = `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
state.showCalendar = false;
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onConfirm(date) {
|
||||
this.value = `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
this.showCalendar = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user