blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Form): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-15 16:52:29 +08:00
parent 9e86d01e83
commit 23a6f63c4f
11 changed files with 582 additions and 438 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/datetime-picker/README.md
View File

@ -32,7 +32,7 @@ app.use(DatetimePicker);
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentDate = ref(new Date()); const currentDate = ref(new Date());
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
@ -60,7 +60,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentDate = ref(new Date()); const currentDate = ref(new Date());
const formatter = (type, val) => { const formatter = (type, val) => {
@ -99,7 +99,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentDate = ref(new Date()); const currentDate = ref(new Date());
const formatter = (type, val) => { const formatter = (type, val) => {
@ -137,7 +137,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentTime = ref('12:00'); const currentTime = ref('12:00');
return { currentTime }; return { currentTime };
}, },
@ -160,7 +160,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentDate = ref(new Date()); const currentDate = ref(new Date());
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
@ -187,7 +187,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentDate = ref(new Date()); const currentDate = ref(new Date());
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
@ -213,7 +213,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentTime = ref('12:00'); const currentTime = ref('12:00');
const filter = (type, options) => { const filter = (type, options) => {

14
src/datetime-picker/README.zh-CN.md
View File

@ -34,7 +34,7 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型，type 为
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentDate = ref(new Date()); const currentDate = ref(new Date());
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
@ -64,7 +64,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentDate = ref(new Date()); const currentDate = ref(new Date());
const formatter = (type, val) => { const formatter = (type, val) => {
@ -105,7 +105,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentDate = ref(new Date()); const currentDate = ref(new Date());
const formatter = (type, val) => { const formatter = (type, val) => {
@ -145,7 +145,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentTime = ref('12:00'); const currentTime = ref('12:00');
return { currentTime }; return { currentTime };
}, },
@ -170,7 +170,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentDate = ref(new Date()); const currentDate = ref(new Date());
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
@ -199,7 +199,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentDate = ref(new Date()); const currentDate = ref(new Date());
return { return {
minDate: new Date(2020, 0, 1), minDate: new Date(2020, 0, 1),
@ -222,7 +222,7 @@ export default {
import { ref } from 'vue'; import { ref } from 'vue';
export default { export default {
data() { setup() {
const currentTime = ref('12:00'); const currentTime = ref('12:00');
const filter = (type, options) => { const filter = (type, options) => {

266
src/form/README.md
View File

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

266
src/form/README.zh-CN.md
View File

@ -23,14 +23,14 @@ app.use(Form);
```html ```html
<van-form @submit="onSubmit"> <van-form @submit="onSubmit">
<van-field <van-field
v-model="username" v-model="state.username"
name="用户名" name="用户名"
label="用户名" label="用户名"
placeholder="用户名" placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]" :rules="[{ required: true, message: '请填写用户名' }]"
/> />
<van-field <van-field
v-model="password" v-model="state.password"
type="password" type="password"
name="密码" name="密码"
label="密码" label="密码"
@ -44,17 +44,22 @@ app.use(Form);
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
username: '', username: '',
password: '', password: '',
}; });
}, const onSubmit = (values) => {
methods: {
onSubmit(values) {
console.log('submit', values); console.log('submit', values);
}, };
return {
state,
onSubmit,
};
}, },
}; };
``` ```
@ -67,21 +72,21 @@ export default {
<van-form validate-first @failed="onFailed"> <van-form validate-first @failed="onFailed">
<!-- 通过 pattern 进行正则校验 --> <!-- 通过 pattern 进行正则校验 -->
<van-field <van-field
v-model="value1" v-model="state.value1"
name="pattern" name="pattern"
placeholder="正则校验" placeholder="正则校验"
:rules="[{ pattern, message: '请输入正确内容' }]" :rules="[{ pattern, message: '请输入正确内容' }]"
/> />
<!-- 通过 validator 进行函数校验 --> <!-- 通过 validator 进行函数校验 -->
<van-field <van-field
v-model="value2" v-model="state.value2"
name="validator" name="validator"
placeholder="函数校验" placeholder="函数校验"
:rules="[{ validator, message: '请输入正确内容' }]" :rules="[{ validator, message: '请输入正确内容' }]"
/> />
<!-- 通过 validator 进行异步函数校验 --> <!-- 通过 validator 进行异步函数校验 -->
<van-field <van-field
v-model="value3" v-model="state.value3"
name="asyncValidator" name="asyncValidator"
placeholder="异步函数校验" placeholder="异步函数校验"
:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]" :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
@ -95,25 +100,24 @@ export default {
``` ```
```js ```js
import { reactive } from 'vue';
import { Toast } from 'vant'; import { Toast } from 'vant';
export default { export default {
data() { setup() {
return { const state = reactive({
value1: '', value1: '',
value2: '', value2: '',
value3: '', value3: '',
pattern: /\d{6}/, });
}; const pattern = /\d{6}/;
},
methods: {
// 校验函数返回 true 表示校验通过，false 表示不通过 // 校验函数返回 true 表示校验通过，false 表示不通过
validator(val) { const validator = (val) => /1\d{10}/.test(val);
return /1\d{10}/.test(val);
},
// 异步校验函数返回 Promise // 异步校验函数返回 Promise
asyncValidator(val) { const asyncValidator = (val) =>
return new Promise((resolve) => { new Promise((resolve) => {
Toast.loading('验证中...'); Toast.loading('验证中...');
setTimeout(() => { setTimeout(() => {
@ -121,10 +125,18 @@ export default {
resolve(/\d{6}/.test(val)); resolve(/\d{6}/.test(val));
}, 1000); }, 1000);
}); });
},
onFailed(errorInfo) { const onFailed = (errorInfo) => {
console.log('failed', errorInfo); console.log('failed', errorInfo);
}, };
return {
state,
pattern,
onFailed,
validator,
asyncValidator,
};
}, },
}; };
``` ```
@ -136,17 +148,18 @@ export default {
```html ```html
<van-field name="switch" label="开关"> <van-field name="switch" label="开关">
<template #input> <template #input>
<van-switch v-model="switchChecked" size="20" /> <van-switch v-model="checked" size="20" />
</template> </template>
</van-field> </van-field>
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const checked = ref(false);
switchChecked: false, return { checked };
};
}, },
}; };
``` ```
@ -158,12 +171,12 @@ export default {
```html ```html
<van-field name="checkbox" label="复选框"> <van-field name="checkbox" label="复选框">
<template #input> <template #input>
<van-checkbox v-model="checkbox" shape="square" /> <van-checkbox v-model="checked" shape="square" />
</template> </template>
</van-field> </van-field>
<van-field name="checkboxGroup" label="复选框组"> <van-field name="checkboxGroup" label="复选框组">
<template #input> <template #input>
<van-checkbox-group v-model="checkboxGroup" direction="horizontal"> <van-checkbox-group v-model="groupChecked" direction="horizontal">
<van-checkbox name="1" shape="square">复选框 1</van-checkbox> <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
<van-checkbox name="2" shape="square">复选框 2</van-checkbox> <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
</van-checkbox-group> </van-checkbox-group>
@ -172,11 +185,15 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
const checked = ref(false);
const groupChecked = ref([]);
return { return {
checkbox: false, checked,
checkboxGroup: [], groupChecked,
}; };
}, },
}; };
@ -189,7 +206,7 @@ export default {
```html ```html
<van-field name="radio" label="单选框"> <van-field name="radio" label="单选框">
<template #input> <template #input>
<van-radio-group v-model="radio" direction="horizontal"> <van-radio-group v-model="checked" direction="horizontal">
<van-radio name="1">单选框 1</van-radio> <van-radio name="1">单选框 1</van-radio>
<van-radio name="2">单选框 2</van-radio> <van-radio name="2">单选框 2</van-radio>
</van-radio-group> </van-radio-group>
@ -198,11 +215,12 @@ export default {
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const checked = ref('1');
radio: '1', return { checked };
};
}, },
}; };
``` ```
@ -214,17 +232,18 @@ export default {
```html ```html
<van-field name="stepper" label="步进器"> <van-field name="stepper" label="步进器">
<template #input> <template #input>
<van-stepper v-model="stepper" /> <van-stepper v-model="value" />
</template> </template>
</van-field> </van-field>
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const value = ref(1);
stepper: 1, return { value };
};
}, },
}; };
``` ```
@ -236,17 +255,18 @@ export default {
```html ```html
<van-field name="rate" label="评分"> <van-field name="rate" label="评分">
<template #input> <template #input>
<van-rate v-model="rate" /> <van-rate v-model="value" />
</template> </template>
</van-field> </van-field>
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const value = ref(3);
rate: 3, return { value };
};
}, },
}; };
``` ```
@ -258,17 +278,18 @@ export default {
```html ```html
<van-field name="slider" label="滑块"> <van-field name="slider" label="滑块">
<template #input> <template #input>
<van-slider v-model="slider" /> <van-slider v-model="value" />
</template> </template>
</van-field> </van-field>
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const value = ref(50);
slider: 50, return { value };
};
}, },
}; };
``` ```
@ -280,17 +301,18 @@ export default {
```html ```html
<van-field name="uploader" label="文件上传"> <van-field name="uploader" label="文件上传">
<template #input> <template #input>
<van-uploader v-model="uploader" /> <van-uploader v-model="value" />
</template> </template>
</van-field> </van-field>
``` ```
```js ```js
import { ref } from 'vue';
export default { export default {
data() { setup() {
return { const value = ref([{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }]);
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }], return { value };
};
}, },
}; };
``` ```
@ -304,34 +326,41 @@ export default {
readonly readonly
clickable clickable
name="picker" name="picker"
:value="value" :value="state.value"
label="选择器" label="选择器"
placeholder="点击选择城市" placeholder="点击选择城市"
@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 <van-picker
:columns="columns" :columns="columns"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="showPicker = false" @cancel="state.showPicker = false"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
value: '', value: '',
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
showPicker: false, showPicker: false,
});
const columns = ['杭州', '宁波', '温州', '嘉兴', '湖州'];
const onConfirm = (value) => {
state.value = value;
state.showPicker = false;
};
return {
state,
columns,
onConfirm,
}; };
},
methods: {
onConfirm(value) {
this.value = value;
this.showPicker = false;
},
}, },
}; };
``` ```
@ -345,33 +374,38 @@ export default {
readonly readonly
clickable clickable
name="datetimePicker" name="datetimePicker"
:value="value" :value="state.value"
label="时间选择" label="时间选择"
placeholder="点击选择时间" placeholder="点击选择时间"
@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 <van-datetime-picker
type="time" type="time"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="showPicker = false" @cancel="state.showPicker = false"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
value: '', value: '',
showPicker: false, showPicker: false,
});
const onConfirm = (value) => {
state.value = value;
state.showPicker = false;
};
return {
state,
onConfirm,
}; };
},
methods: {
onConfirm(time) {
this.value = time;
this.showPicker = false;
},
}, },
}; };
``` ```
@ -385,37 +419,42 @@ export default {
readonly readonly
clickable clickable
name="area" name="area"
:value="value" :value="state.value"
label="地区选择" label="地区选择"
placeholder="点击选择省市区" placeholder="点击选择省市区"
@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 <van-area
:area-list="areaList" :area-list="areaList"
@confirm="onConfirm" @confirm="onConfirm"
@cancel="showArea = false" @cancel="state.showArea = false"
/> />
</van-popup> </van-popup>
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
value: '', value: '',
showArea: false, showArea: false,
areaList: {}, // 数据格式见 Area 组件文档 });
}; const onConfirm = (value) => {
}, state.showArea = false;
methods: { state.value = values
onConfirm(values) {
this.value = values
.filter((item) => !!item) .filter((item) => !!item)
.map((item) => item.name) .map((item) => item.name)
.join('/'); .join('/');
this.showArea = false; };
},
return {
state,
areaList: {}, // 数据格式见 Area 组件文档
onConfirm,
};
}, },
}; };
``` ```
@ -429,27 +468,32 @@ export default {
readonly readonly
clickable clickable
name="calendar" name="calendar"
:value="value" :value="state.value"
label="日历" label="日历"
placeholder="点击选择日期" placeholder="点击选择日期"
@click="showCalendar = true" @click="state.showCalendar = true"
/> />
<van-calendar v-model="showCalendar" @confirm="onConfirm" /> <van-calendar v-model="state.showCalendar" @confirm="onConfirm" />
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
value: '', value: '',
showCalendar: false, 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;
},
}, },
}; };
``` ```

35
src/form/demo/BasicUsage.vue
View File

@ -16,7 +16,7 @@
:rules="[{ required: true, message: t('requirePassword') }]" :rules="[{ required: true, message: t('requirePassword') }]"
:placeholder="t('password')" :placeholder="t('password')"
/> />
<div style="margin: 16px 16px 0;"> <div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit"> <van-button round block type="primary" native-type="submit">
{{ t('submit') }} {{ t('submit') }}
</van-button> </van-button>
@ -26,8 +26,10 @@
</template> </template>
<script> <script>
export default { import { reactive, toRefs } from 'vue';
i18n: { import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': { 'zh-CN': {
submit: '提交', submit: '提交',
username: '用户名', username: '用户名',
@ -42,22 +44,29 @@ export default {
requireUsername: 'Username is required', requireUsername: 'Username is required',
requirePassword: 'Password is required', requirePassword: 'Password is required',
}, },
}, };
data() { export default {
return { setup() {
const t = useTranslate(i18n);
const state = reactive({
username: '', username: '',
password: '', password: '',
}; });
},
methods: { const onSubmit = (values) => {
onSubmit(values) {
console.log('submit', values); console.log('submit', values);
}, };
onFailed(errorInfo) { const onFailed = (errorInfo) => {
console.log('failed', errorInfo); console.log('failed', errorInfo);
}, };
return {
...toRefs(state),
t,
onSubmit,
onFailed,
};
}, },
}; };
</script> </script>

29
src/form/demo/FieldType.vue
View File

@ -64,7 +64,7 @@
<field-type-area /> <field-type-area />
<field-type-calendar /> <field-type-calendar />
<div style="margin: 16px 16px 0;"> <div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit"> <van-button round block type="primary" native-type="submit">
{{ t('submit') }} {{ t('submit') }}
</van-button> </van-button>
@ -74,13 +74,14 @@
</template> </template>
<script> <script>
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import FieldTypeArea from './FieldTypeArea'; import FieldTypeArea from './FieldTypeArea';
import FieldTypePicker from './FieldTypePicker'; import FieldTypePicker from './FieldTypePicker';
import FieldTypeCalendar from './FieldTypeCalendar'; import FieldTypeCalendar from './FieldTypeCalendar';
import FieldTypeDatetimePicker from './FieldTypeDatetimePicker'; import FieldTypeDatetimePicker from './FieldTypeDatetimePicker';
export default { const i18n = {
i18n: {
'zh-CN': { 'zh-CN': {
rate: '评分', rate: '评分',
radio: '单选框', radio: '单选框',
@ -109,8 +110,9 @@ export default {
checkboxGroup: 'Checkbox Group', checkboxGroup: 'Checkbox Group',
requireCheckbox: 'Checkbox is required', requireCheckbox: 'Checkbox is required',
}, },
}, };
export default {
components: { components: {
FieldTypeArea, FieldTypeArea,
FieldTypePicker, FieldTypePicker,
@ -118,8 +120,9 @@ export default {
FieldTypeDatetimePicker, FieldTypeDatetimePicker,
}, },
data() { setup() {
return { const t = useTranslate(i18n);
const state = reactive({
rate: 3, rate: 3,
radio: '1', radio: '1',
slider: 50, slider: 50,
@ -128,13 +131,17 @@ export default {
checkbox: false, checkbox: false,
checkboxGroup: [], checkboxGroup: [],
switchChecked: false, switchChecked: false,
}; });
},
methods: { const onSubmit = (values) => {
onSubmit(values) {
console.log(values); console.log(values);
}, };
return {
...toRefs(state),
t,
onSubmit,
};
}, },
}; };
</script> </script>

38
src/form/demo/FieldTypeArea.vue
View File

@ -18,11 +18,12 @@
</template> </template>
<script> <script>
import { reactive, toRefs } from 'vue';
import { useTranslate } from '@demo/use-translate';
import AreaList from '../../area/demo/area'; import AreaList from '../../area/demo/area';
import AreaListEn from '../../area/demo/area-en'; import AreaListEn from '../../area/demo/area-en';
export default { const i18n = {
i18n: {
'zh-CN': { 'zh-CN': {
picker: '地区选择', picker: '地区选择',
areaList: AreaList, areaList: AreaList,
@ -33,27 +34,34 @@ export default {
areaList: AreaListEn, areaList: AreaListEn,
placeholder: 'Select area', placeholder: 'Select area',
}, },
}, };
data() { export default {
return { setup() {
const t = useTranslate(i18n);
const state = reactive({
value: '', value: '',
showArea: false, showArea: false,
}; });
},
methods: { const onConfirm = (values) => {
onConfirm(values) { state.value = values
this.value = values
.filter((item) => !!item) .filter((item) => !!item)
.map((item) => item.name) .map((item) => item.name)
.join('/'); .join('/');
this.showArea = false; state.showArea = false;
}, };
onCancel() { const onCancel = () => {
this.showArea = false; state.showArea = false;
}, };
return {
...toRefs(state),
t,
onCancel,
onConfirm,
};
}, },
}; };
</script> </script>

36
src/form/demo/FieldTypeCalendar.vue
View File

@ -17,8 +17,10 @@
</template> </template>
<script> <script>
export default { import { reactive, toRefs } from 'vue';
i18n: { import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': { 'zh-CN': {
calendar: '日历', calendar: '日历',
placeholder: '点击选择日期', placeholder: '点击选择日期',
@ -27,24 +29,28 @@ export default {
calendar: 'Calendar', calendar: 'Calendar',
placeholder: 'Select date', placeholder: 'Select date',
}, },
}, };
data() { export default {
return { setup() {
const t = useTranslate(i18n);
const state = reactive({
value: '', value: '',
showCalendar: false, showCalendar: false,
});
const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (date) => {
state.value = formatDate(date);
state.showCalendar = false;
}; };
},
methods: { return {
formatDate(date) { ...toRefs(state),
return `${date.getMonth() + 1}/${date.getDate()}`; t,
}, onConfirm,
};
onConfirm(date) {
this.value = this.formatDate(date);
this.showCalendar = false;
},
}, },
}; };
</script> </script>

40
src/form/demo/FieldTypeDatetimePicker.vue
View File

@ -14,8 +14,10 @@
</template> </template>
<script> <script>
export default { import { reactive, toRefs } from 'vue';
i18n: { import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': { 'zh-CN': {
label: '时间选择', label: '时间选择',
placeholder: '点击选择时间', placeholder: '点击选择时间',
@ -24,24 +26,30 @@ export default {
label: 'Datetime Picker', label: 'Datetime Picker',
placeholder: 'Select time', placeholder: 'Select time',
}, },
}, };
data() { export default {
return { setup() {
const t = useTranslate(i18n);
const state = reactive({
value: '', value: '',
showPicker: false, showPicker: false,
}; });
},
methods: { const onConfirm = (time) => {
onConfirm(time) { state.value = time;
console.log('time', time); state.showPicker = false;
this.value = time; };
this.showPicker = false; const onCancel = () => {
}, state.showPicker = false;
onCancel() { };
this.showPicker = false;
}, return {
...toRefs(state),
t,
onCancel,
onConfirm,
};
}, },
}; };
</script> </script>

37
src/form/demo/FieldTypePicker.vue
View File

@ -18,8 +18,10 @@
</template> </template>
<script> <script>
export default { import { reactive, toRefs } from 'vue';
i18n: { import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': { 'zh-CN': {
picker: '选择器', picker: '选择器',
placeholder: '点击选择城市', placeholder: '点击选择城市',
@ -30,24 +32,31 @@ export default {
placeholder: 'Select city', placeholder: 'Select city',
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'], textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
}, },
}, };
data() { export default {
return { setup() {
const t = useTranslate(i18n);
const state = reactive({
value: '', value: '',
showPicker: false, showPicker: false,
});
const onConfirm = (value) => {
state.value = value;
state.showPicker = false;
}; };
},
methods: { const onCancel = () => {
onConfirm(value) { state.showPicker = false;
this.value = value; };
this.showPicker = false;
},
onCancel() { return {
this.showPicker = false; ...toRefs(state),
}, t,
onCancel,
onConfirm,
};
}, },
}; };
</script> </script>

53
src/form/demo/ValidateRules.vue
View File

@ -22,7 +22,7 @@
:rules="[{ validator: asyncValidator, message: t('message') }]" :rules="[{ validator: asyncValidator, message: t('message') }]"
:placeholder="t('asyncValidator')" :placeholder="t('asyncValidator')"
/> />
<div style="margin: 16px 16px 0;"> <div style="margin: 16px 16px 0">
<van-button round block type="primary" native-type="submit"> <van-button round block type="primary" native-type="submit">
{{ t('submit') }} {{ t('submit') }}
</van-button> </van-button>
@ -32,8 +32,11 @@
</template> </template>
<script> <script>
export default { import { reactive, toRefs } from 'vue';
i18n: { import { useTranslate } from '@demo/use-translate';
import Toast from '../../toast';
const i18n = {
'zh-CN': { 'zh-CN': {
label: '文本', label: '文本',
title: '校验规则', title: '校验规则',
@ -54,40 +57,46 @@ export default {
validating: 'Validating...', validating: 'Validating...',
asyncValidator: 'Use async validator', asyncValidator: 'Use async validator',
}, },
}, };
data() { export default {
return { setup() {
const t = useTranslate(i18n);
const state = reactive({
value1: '', value1: '',
value2: '', value2: '',
value3: '', value3: '',
pattern: /\d{6}/, });
};
},
methods: { const validator = (val) => /1\d{10}/.test(val);
validator(val) {
return /1\d{10}/.test(val);
},
asyncValidator(val) { const asyncValidator = (val) =>
return new Promise((resolve) => { new Promise((resolve) => {
this.$toast.loading(this.t('validating')); Toast.loading(t('validating'));
setTimeout(() => { setTimeout(() => {
this.$toast.clear(); Toast.clear();
resolve(val === '1234'); resolve(val === '1234');
}, 1000); }, 1000);
}); });
},
onSubmit(values) { const onSubmit = (values) => {
console.log('submit', values); console.log('submit', values);
}, };
onFailed(errorInfo) { const onFailed = (errorInfo) => {
console.log('failed', errorInfo); console.log('failed', errorInfo);
}, };
return {
...toRefs(state),
t,
pattern: /\d{6}/,
onSubmit,
onFailed,
validator,
asyncValidator,
};
}, },
}; };
</script> </script>