mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Form): use composition api
This commit is contained in:
chenjiahan
parent
9e86d01e83
commit
23a6f63c4f
@ -32,7 +32,7 @@ app.use(DatetimePicker);
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
@ -60,7 +60,7 @@ export default {
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
|
||||
const formatter = (type, val) => {
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
|
||||
const formatter = (type, val) => {
|
||||
@ -137,7 +137,7 @@ export default {
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentTime = ref('12:00');
|
||||
return { currentTime };
|
||||
},
|
||||
@ -160,7 +160,7 @@ export default {
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
@ -187,7 +187,7 @@ export default {
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
@ -213,7 +213,7 @@ export default {
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentTime = ref('12:00');
|
||||
|
||||
const filter = (type, options) => {
|
||||
|
||||
@ -34,7 +34,7 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型，type 为
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
@ -64,7 +64,7 @@ export default {
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
|
||||
const formatter = (type, val) => {
|
||||
@ -105,7 +105,7 @@ export default {
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
|
||||
const formatter = (type, val) => {
|
||||
@ -145,7 +145,7 @@ export default {
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentTime = ref('12:00');
|
||||
return { currentTime };
|
||||
},
|
||||
@ -170,7 +170,7 @@ export default {
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
@ -199,7 +199,7 @@ export default {
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentDate = ref(new Date());
|
||||
return {
|
||||
minDate: new Date(2020, 0, 1),
|
||||
@ -222,7 +222,7 @@ export default {
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
setup() {
|
||||
const currentTime = ref('12:00');
|
||||
|
||||
const filter = (type, options) => {
|
||||
|
||||
@ -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;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -23,14 +23,14 @@ app.use(Form);
|
||||
```html
|
||||
<van-form @submit="onSubmit">
|
||||
<van-field
|
||||
v-model="username"
|
||||
v-model="state.username"
|
||||
name="用户名"
|
||||
label="用户名"
|
||||
placeholder="用户名"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
v-model="state.password"
|
||||
type="password"
|
||||
name="密码"
|
||||
label="密码"
|
||||
@ -44,17 +44,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,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -67,21 +72,21 @@ export default {
|
||||
<van-form validate-first @failed="onFailed">
|
||||
<!-- 通过 pattern 进行正则校验 -->
|
||||
<van-field
|
||||
v-model="value1"
|
||||
v-model="state.value1"
|
||||
name="pattern"
|
||||
placeholder="正则校验"
|
||||
:rules="[{ pattern, message: '请输入正确内容' }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行函数校验 -->
|
||||
<van-field
|
||||
v-model="value2"
|
||||
v-model="state.value2"
|
||||
name="validator"
|
||||
placeholder="函数校验"
|
||||
:rules="[{ validator, message: '请输入正确内容' }]"
|
||||
/>
|
||||
<!-- 通过 validator 进行异步函数校验 -->
|
||||
<van-field
|
||||
v-model="value3"
|
||||
v-model="state.value3"
|
||||
name="asyncValidator"
|
||||
placeholder="异步函数校验"
|
||||
:rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
|
||||
@ -95,25 +100,24 @@ 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: {
|
||||
});
|
||||
const pattern = /\d{6}/;
|
||||
|
||||
// 校验函数返回 true 表示校验通过，false 表示不通过
|
||||
validator(val) {
|
||||
return /1\d{10}/.test(val);
|
||||
},
|
||||
const validator = (val) => /1\d{10}/.test(val);
|
||||
|
||||
// 异步校验函数返回 Promise
|
||||
asyncValidator(val) {
|
||||
return new Promise((resolve) => {
|
||||
const asyncValidator = (val) =>
|
||||
new Promise((resolve) => {
|
||||
Toast.loading('验证中...');
|
||||
|
||||
setTimeout(() => {
|
||||
@ -121,10 +125,18 @@ export default {
|
||||
resolve(/\d{6}/.test(val));
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
onFailed(errorInfo) {
|
||||
|
||||
const onFailed = (errorInfo) => {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
state,
|
||||
pattern,
|
||||
onFailed,
|
||||
validator,
|
||||
asyncValidator,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -136,17 +148,18 @@ export default {
|
||||
```html
|
||||
<van-field name="switch" label="开关">
|
||||
<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 };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -158,12 +171,12 @@ export default {
|
||||
```html
|
||||
<van-field name="checkbox" label="复选框">
|
||||
<template #input>
|
||||
<van-checkbox v-model="checkbox" shape="square" />
|
||||
<van-checkbox v-model="checked" shape="square" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field name="checkboxGroup" label="复选框组">
|
||||
<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="2" shape="square">复选框 2</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
@ -172,11 +185,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,
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -189,7 +206,7 @@ export default {
|
||||
```html
|
||||
<van-field name="radio" label="单选框">
|
||||
<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="2">单选框 2</van-radio>
|
||||
</van-radio-group>
|
||||
@ -198,11 +215,12 @@ export default {
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1',
|
||||
};
|
||||
setup() {
|
||||
const checked = ref('1');
|
||||
return { checked };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -214,17 +232,18 @@ export default {
|
||||
```html
|
||||
<van-field name="stepper" label="步进器">
|
||||
<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 };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -236,17 +255,18 @@ export default {
|
||||
```html
|
||||
<van-field name="rate" label="评分">
|
||||
<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 };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -258,17 +278,18 @@ export default {
|
||||
```html
|
||||
<van-field name="slider" label="滑块">
|
||||
<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 };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -280,17 +301,18 @@ export default {
|
||||
```html
|
||||
<van-field name="uploader" label="文件上传">
|
||||
<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 };
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -304,34 +326,41 @@ export default {
|
||||
readonly
|
||||
clickable
|
||||
name="picker"
|
||||
:value="value"
|
||||
:value="state.value"
|
||||
label="选择器"
|
||||
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
|
||||
: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: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
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
|
||||
clickable
|
||||
name="datetimePicker"
|
||||
:value="value"
|
||||
:value="state.value"
|
||||
label="时间选择"
|
||||
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
|
||||
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;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -385,37 +419,42 @@ export default {
|
||||
readonly
|
||||
clickable
|
||||
name="area"
|
||||
:value="value"
|
||||
:value="state.value"
|
||||
label="地区选择"
|
||||
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
|
||||
: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: {}, // 数据格式见 Area 组件文档
|
||||
};
|
||||
},
|
||||
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: {}, // 数据格式见 Area 组件文档
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -429,27 +468,32 @@ export default {
|
||||
readonly
|
||||
clickable
|
||||
name="calendar"
|
||||
:value="value"
|
||||
:value="state.value"
|
||||
label="日历"
|
||||
placeholder="点击选择日期"
|
||||
@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;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
:rules="[{ required: true, message: t('requirePassword') }]"
|
||||
:placeholder="t('password')"
|
||||
/>
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<div style="margin: 16px 16px 0">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
@ -26,38 +26,47 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
submit: '提交',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
requireUsername: '请填写用户名',
|
||||
requirePassword: '请填写密码',
|
||||
},
|
||||
'en-US': {
|
||||
submit: 'Submit',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
requireUsername: 'Username is required',
|
||||
requirePassword: 'Password is required',
|
||||
},
|
||||
},
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
data() {
|
||||
return {
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
submit: '提交',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
requireUsername: '请填写用户名',
|
||||
requirePassword: '请填写密码',
|
||||
},
|
||||
'en-US': {
|
||||
submit: 'Submit',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
requireUsername: 'Username is required',
|
||||
requirePassword: 'Password is required',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
const onSubmit = (values) => {
|
||||
console.log('submit', values);
|
||||
},
|
||||
onFailed(errorInfo) {
|
||||
};
|
||||
const onFailed = (errorInfo) => {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onSubmit,
|
||||
onFailed,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
<field-type-area />
|
||||
<field-type-calendar />
|
||||
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<div style="margin: 16px 16px 0">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
@ -74,43 +74,45 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import FieldTypeArea from './FieldTypeArea';
|
||||
import FieldTypePicker from './FieldTypePicker';
|
||||
import FieldTypeCalendar from './FieldTypeCalendar';
|
||||
import FieldTypeDatetimePicker from './FieldTypeDatetimePicker';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
rate: '评分',
|
||||
radio: '单选框',
|
||||
submit: '提交',
|
||||
switch: '开关',
|
||||
slider: '滑块',
|
||||
picker: '选择器',
|
||||
stepper: '步进器',
|
||||
checkbox: '复选框',
|
||||
uploader: '文件上传',
|
||||
fieldType: '表单项类型',
|
||||
checkboxGroup: '复选框组',
|
||||
requireCheckbox: '请勾选复选框',
|
||||
},
|
||||
'en-US': {
|
||||
rate: 'Rate',
|
||||
radio: 'Radio',
|
||||
submit: 'Submit',
|
||||
switch: 'Switch',
|
||||
slider: 'Slider',
|
||||
picker: 'Picker',
|
||||
stepper: 'Stepper',
|
||||
checkbox: 'Checkbox',
|
||||
uploader: 'Uploader',
|
||||
fieldType: 'Field Type',
|
||||
checkboxGroup: 'Checkbox Group',
|
||||
requireCheckbox: 'Checkbox is required',
|
||||
},
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
rate: '评分',
|
||||
radio: '单选框',
|
||||
submit: '提交',
|
||||
switch: '开关',
|
||||
slider: '滑块',
|
||||
picker: '选择器',
|
||||
stepper: '步进器',
|
||||
checkbox: '复选框',
|
||||
uploader: '文件上传',
|
||||
fieldType: '表单项类型',
|
||||
checkboxGroup: '复选框组',
|
||||
requireCheckbox: '请勾选复选框',
|
||||
},
|
||||
'en-US': {
|
||||
rate: 'Rate',
|
||||
radio: 'Radio',
|
||||
submit: 'Submit',
|
||||
switch: 'Switch',
|
||||
slider: 'Slider',
|
||||
picker: 'Picker',
|
||||
stepper: 'Stepper',
|
||||
checkbox: 'Checkbox',
|
||||
uploader: 'Uploader',
|
||||
fieldType: 'Field Type',
|
||||
checkboxGroup: 'Checkbox Group',
|
||||
requireCheckbox: 'Checkbox is required',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FieldTypeArea,
|
||||
FieldTypePicker,
|
||||
@ -118,8 +120,9 @@ export default {
|
||||
FieldTypeDatetimePicker,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
rate: 3,
|
||||
radio: '1',
|
||||
slider: 50,
|
||||
@ -128,13 +131,17 @@ export default {
|
||||
checkbox: false,
|
||||
checkboxGroup: [],
|
||||
switchChecked: false,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
methods: {
|
||||
onSubmit(values) {
|
||||
const onSubmit = (values) => {
|
||||
console.log(values);
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onSubmit,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -18,42 +18,50 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import AreaList from '../../area/demo/area';
|
||||
import AreaListEn from '../../area/demo/area-en';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
picker: '地区选择',
|
||||
areaList: AreaList,
|
||||
placeholder: '点击选择省市区',
|
||||
},
|
||||
'en-US': {
|
||||
picker: 'Area Picker',
|
||||
areaList: AreaListEn,
|
||||
placeholder: 'Select area',
|
||||
},
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
picker: '地区选择',
|
||||
areaList: AreaList,
|
||||
placeholder: '点击选择省市区',
|
||||
},
|
||||
'en-US': {
|
||||
picker: 'Area Picker',
|
||||
areaList: AreaListEn,
|
||||
placeholder: 'Select area',
|
||||
},
|
||||
};
|
||||
|
||||
data() {
|
||||
return {
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showArea: false,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
methods: {
|
||||
onConfirm(values) {
|
||||
this.value = values
|
||||
const onConfirm = (values) => {
|
||||
state.value = values
|
||||
.filter((item) => !!item)
|
||||
.map((item) => item.name)
|
||||
.join('/');
|
||||
this.showArea = false;
|
||||
},
|
||||
state.showArea = false;
|
||||
};
|
||||
|
||||
onCancel() {
|
||||
this.showArea = false;
|
||||
},
|
||||
const onCancel = () => {
|
||||
state.showArea = false;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -17,34 +17,40 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
calendar: '日历',
|
||||
placeholder: '点击选择日期',
|
||||
},
|
||||
'en-US': {
|
||||
calendar: 'Calendar',
|
||||
placeholder: 'Select date',
|
||||
},
|
||||
},
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
data() {
|
||||
return {
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
calendar: '日历',
|
||||
placeholder: '点击选择日期',
|
||||
},
|
||||
'en-US': {
|
||||
calendar: 'Calendar',
|
||||
placeholder: 'Select date',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
});
|
||||
|
||||
const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
|
||||
const onConfirm = (date) => {
|
||||
state.value = formatDate(date);
|
||||
state.showCalendar = false;
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatDate(date) {
|
||||
return `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
},
|
||||
|
||||
onConfirm(date) {
|
||||
this.value = this.formatDate(date);
|
||||
this.showCalendar = false;
|
||||
},
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -14,34 +14,42 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
label: '时间选择',
|
||||
placeholder: '点击选择时间',
|
||||
},
|
||||
'en-US': {
|
||||
label: 'Datetime Picker',
|
||||
placeholder: 'Select time',
|
||||
},
|
||||
},
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
data() {
|
||||
return {
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
label: '时间选择',
|
||||
placeholder: '点击选择时间',
|
||||
},
|
||||
'en-US': {
|
||||
label: 'Datetime Picker',
|
||||
placeholder: 'Select time',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
methods: {
|
||||
onConfirm(time) {
|
||||
console.log('time', time);
|
||||
this.value = time;
|
||||
this.showPicker = false;
|
||||
},
|
||||
onCancel() {
|
||||
this.showPicker = false;
|
||||
},
|
||||
const onConfirm = (time) => {
|
||||
state.value = time;
|
||||
state.showPicker = false;
|
||||
};
|
||||
const onCancel = () => {
|
||||
state.showPicker = false;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -18,36 +18,45 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
picker: '选择器',
|
||||
placeholder: '点击选择城市',
|
||||
textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
},
|
||||
'en-US': {
|
||||
picker: 'Picker',
|
||||
placeholder: 'Select city',
|
||||
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
},
|
||||
},
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
data() {
|
||||
return {
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
picker: '选择器',
|
||||
placeholder: '点击选择城市',
|
||||
textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
},
|
||||
'en-US': {
|
||||
picker: 'Picker',
|
||||
placeholder: 'Select city',
|
||||
textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
|
||||
const onConfirm = (value) => {
|
||||
state.value = value;
|
||||
state.showPicker = false;
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onConfirm(value) {
|
||||
this.value = value;
|
||||
this.showPicker = false;
|
||||
},
|
||||
const onCancel = () => {
|
||||
state.showPicker = false;
|
||||
};
|
||||
|
||||
onCancel() {
|
||||
this.showPicker = false;
|
||||
},
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
:rules="[{ validator: asyncValidator, message: t('message') }]"
|
||||
:placeholder="t('asyncValidator')"
|
||||
/>
|
||||
<div style="margin: 16px 16px 0;">
|
||||
<div style="margin: 16px 16px 0">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
@ -32,62 +32,71 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
label: '文本',
|
||||
title: '校验规则',
|
||||
submit: '提交',
|
||||
message: '请输入正确内容',
|
||||
pattern: '正则校验',
|
||||
validator: '函数校验',
|
||||
validating: '验证中...',
|
||||
asyncValidator: '异步函数校验',
|
||||
},
|
||||
'en-US': {
|
||||
label: 'Label',
|
||||
title: 'Validate Rules',
|
||||
submit: 'Submit',
|
||||
message: 'Error message',
|
||||
pattern: 'Use pattern',
|
||||
validator: 'Use validator',
|
||||
validating: 'Validating...',
|
||||
asyncValidator: 'Use async validator',
|
||||
},
|
||||
},
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import Toast from '../../toast';
|
||||
|
||||
data() {
|
||||
return {
|
||||
const i18n = {
|
||||
'zh-CN': {
|
||||
label: '文本',
|
||||
title: '校验规则',
|
||||
submit: '提交',
|
||||
message: '请输入正确内容',
|
||||
pattern: '正则校验',
|
||||
validator: '函数校验',
|
||||
validating: '验证中...',
|
||||
asyncValidator: '异步函数校验',
|
||||
},
|
||||
'en-US': {
|
||||
label: 'Label',
|
||||
title: 'Validate Rules',
|
||||
submit: 'Submit',
|
||||
message: 'Error message',
|
||||
pattern: 'Use pattern',
|
||||
validator: 'Use validator',
|
||||
validating: 'Validating...',
|
||||
asyncValidator: 'Use async validator',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: '',
|
||||
pattern: /\d{6}/,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
methods: {
|
||||
validator(val) {
|
||||
return /1\d{10}/.test(val);
|
||||
},
|
||||
const validator = (val) => /1\d{10}/.test(val);
|
||||
|
||||
asyncValidator(val) {
|
||||
return new Promise((resolve) => {
|
||||
this.$toast.loading(this.t('validating'));
|
||||
const asyncValidator = (val) =>
|
||||
new Promise((resolve) => {
|
||||
Toast.loading(t('validating'));
|
||||
|
||||
setTimeout(() => {
|
||||
this.$toast.clear();
|
||||
Toast.clear();
|
||||
resolve(val === '1234');
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
|
||||
onSubmit(values) {
|
||||
const onSubmit = (values) => {
|
||||
console.log('submit', values);
|
||||
},
|
||||
};
|
||||
|
||||
onFailed(errorInfo) {
|
||||
const onFailed = (errorInfo) => {
|
||||
console.log('failed', errorInfo);
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
pattern: /\d{6}/,
|
||||
onSubmit,
|
||||
onFailed,
|
||||
validator,
|
||||
asyncValidator,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user