refactor: demo using script setup (#9235)
This commit is contained in:
neverland
@@ -1,35 +1,5 @@
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-form @submit="onSubmit" @failed="onFailed">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="username"
|
||||
name="username"
|
||||
:label="t('username')"
|
||||
:rules="[{ required: true, message: t('requireUsername') }]"
|
||||
:placeholder="t('username')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
name="password"
|
||||
:label="t('password')"
|
||||
:rules="[{ required: true, message: t('requirePassword') }]"
|
||||
:placeholder="t('password')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
<div style="margin: 16px 16px 0">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { FieldValidateError } from '../../field/types';
|
||||
|
||||
@@ -50,31 +20,50 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
});
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
const onSubmit = (values: Record<string, string>) => {
|
||||
console.log('submit', values);
|
||||
};
|
||||
const onSubmit = (values: Record<string, string>) => {
|
||||
console.log('submit', values);
|
||||
};
|
||||
|
||||
const onFailed = (errorInfo: {
|
||||
values: Record<string, string>;
|
||||
errors: FieldValidateError[];
|
||||
}) => {
|
||||
console.log('failed', errorInfo);
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onSubmit,
|
||||
onFailed,
|
||||
};
|
||||
},
|
||||
const onFailed = (errorInfo: {
|
||||
values: Record<string, string>;
|
||||
errors: FieldValidateError[];
|
||||
}) => {
|
||||
console.log('failed', errorInfo);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-form @submit="onSubmit" @failed="onFailed">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.username"
|
||||
name="username"
|
||||
:label="t('username')"
|
||||
:rules="[{ required: true, message: t('requireUsername') }]"
|
||||
:placeholder="t('username')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.password"
|
||||
type="password"
|
||||
name="password"
|
||||
:label="t('password')"
|
||||
:rules="[{ required: true, message: t('requirePassword') }]"
|
||||
:placeholder="t('password')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
<div style="margin: 16px 16px 0">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
+95
-109
@@ -1,82 +1,5 @@
|
||||
<template>
|
||||
<demo-block :title="t('fieldType')">
|
||||
<van-form @submit="onSubmit">
|
||||
<van-cell-group inset>
|
||||
<van-field name="switch" :label="t('switch')">
|
||||
<template #input>
|
||||
<van-switch v-model="switchChecked" size="20" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="checkbox" :label="t('checkbox')">
|
||||
<template #input>
|
||||
<van-checkbox v-model="checkbox" shape="square" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="checkboxGroup" :label="t('checkboxGroup')">
|
||||
<template #input>
|
||||
<van-checkbox-group v-model="checkboxGroup" direction="horizontal">
|
||||
<van-checkbox name="1" shape="square">
|
||||
{{ t('checkbox') }} 1
|
||||
</van-checkbox>
|
||||
<van-checkbox name="2" shape="square">
|
||||
{{ t('checkbox') }} 2
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="radio" :label="t('radio')">
|
||||
<template #input>
|
||||
<van-radio-group v-model="radio" direction="horizontal">
|
||||
<van-radio name="1">{{ t('radio') }} 1</van-radio>
|
||||
<van-radio name="2">{{ t('radio') }} 2</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="stepper" :label="t('stepper')">
|
||||
<template #input>
|
||||
<van-stepper v-model="stepper" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="rate" :label="t('rate')">
|
||||
<template #input>
|
||||
<van-rate v-model="rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="slider" :label="t('slider')">
|
||||
<template #input>
|
||||
<van-slider v-model="slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="uploader" :label="t('uploader')">
|
||||
<template #input>
|
||||
<van-uploader v-model="uploader" max-count="2" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<field-type-picker />
|
||||
<field-type-datetime-picker />
|
||||
<field-type-area />
|
||||
<field-type-calendar />
|
||||
</van-cell-group>
|
||||
|
||||
<div style="margin: 16px 16px 0">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import FieldTypeArea from './FieldTypeArea.vue';
|
||||
import FieldTypePicker from './FieldTypePicker.vue';
|
||||
@@ -114,36 +37,99 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FieldTypeArea,
|
||||
FieldTypePicker,
|
||||
FieldTypeCalendar,
|
||||
FieldTypeDatetimePicker,
|
||||
},
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
rate: 3,
|
||||
radio: '1',
|
||||
slider: 50,
|
||||
stepper: 1,
|
||||
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
|
||||
checkbox: false,
|
||||
checkboxGroup: [],
|
||||
switchChecked: false,
|
||||
});
|
||||
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
rate: 3,
|
||||
radio: '1',
|
||||
slider: 50,
|
||||
stepper: 1,
|
||||
uploader: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
|
||||
checkbox: false,
|
||||
checkboxGroup: [],
|
||||
switchChecked: false,
|
||||
});
|
||||
|
||||
const onSubmit = (values: Record<string, string>) => {
|
||||
console.log(values);
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onSubmit,
|
||||
};
|
||||
},
|
||||
const onSubmit = (values: Record<string, string>) => {
|
||||
console.log(values);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<demo-block :title="t('fieldType')">
|
||||
<van-form @submit="onSubmit">
|
||||
<van-cell-group inset>
|
||||
<van-field name="switch" :label="t('switch')">
|
||||
<template #input>
|
||||
<van-switch v-model="state.switchChecked" size="20" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="checkbox" :label="t('checkbox')">
|
||||
<template #input>
|
||||
<van-checkbox v-model="state.checkbox" shape="square" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="checkboxGroup" :label="t('checkboxGroup')">
|
||||
<template #input>
|
||||
<van-checkbox-group
|
||||
v-model="state.checkboxGroup"
|
||||
direction="horizontal"
|
||||
>
|
||||
<van-checkbox name="1" shape="square">
|
||||
{{ t('checkbox') }} 1
|
||||
</van-checkbox>
|
||||
<van-checkbox name="2" shape="square">
|
||||
{{ t('checkbox') }} 2
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="radio" :label="t('radio')">
|
||||
<template #input>
|
||||
<van-radio-group v-model="state.radio" direction="horizontal">
|
||||
<van-radio name="1">{{ t('radio') }} 1</van-radio>
|
||||
<van-radio name="2">{{ t('radio') }} 2</van-radio>
|
||||
</van-radio-group>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="stepper" :label="t('stepper')">
|
||||
<template #input>
|
||||
<van-stepper v-model="state.stepper" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="rate" :label="t('rate')">
|
||||
<template #input>
|
||||
<van-rate v-model="state.rate" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="slider" :label="t('slider')">
|
||||
<template #input>
|
||||
<van-slider v-model="state.slider" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<van-field name="uploader" :label="t('uploader')">
|
||||
<template #input>
|
||||
<van-uploader v-model="state.uploader" max-count="2" />
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<field-type-picker />
|
||||
<field-type-datetime-picker />
|
||||
<field-type-area />
|
||||
<field-type-calendar />
|
||||
</van-cell-group>
|
||||
|
||||
<div style="margin: 16px 16px 0">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
@@ -1,24 +1,5 @@
|
||||
<template>
|
||||
<van-field
|
||||
v-model="value"
|
||||
is-link
|
||||
readonly
|
||||
name="area"
|
||||
:label="t('picker')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showArea = true"
|
||||
/>
|
||||
<van-popup v-model:show="showArea" round position="bottom" teleport="body">
|
||||
<van-area
|
||||
:area-list="t('areaList')"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { areaList } from '@vant/area-data';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { AreaColumnOption } from '../../area';
|
||||
@@ -37,32 +18,45 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showArea: false,
|
||||
});
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showArea: false,
|
||||
});
|
||||
|
||||
const onConfirm = (values: AreaColumnOption[]) => {
|
||||
state.value = values
|
||||
.filter((item) => !!item)
|
||||
.map((item) => item.name)
|
||||
.join('/');
|
||||
state.showArea = false;
|
||||
};
|
||||
const onConfirm = (values: AreaColumnOption[]) => {
|
||||
state.value = values
|
||||
.filter((item) => !!item)
|
||||
.map((item) => item.name)
|
||||
.join('/');
|
||||
state.showArea = false;
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
state.showArea = false;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
const onCancel = () => {
|
||||
state.showArea = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
is-link
|
||||
readonly
|
||||
name="area"
|
||||
:label="t('picker')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="state.showArea = true"
|
||||
/>
|
||||
<van-popup
|
||||
v-model:show="state.showArea"
|
||||
round
|
||||
position="bottom"
|
||||
teleport="body"
|
||||
>
|
||||
<van-area
|
||||
:area-list="t('areaList')"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
@@ -1,23 +1,5 @@
|
||||
<template>
|
||||
<van-field
|
||||
v-model="value"
|
||||
is-link
|
||||
readonly
|
||||
name="calendar"
|
||||
:label="t('calendar')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showCalendar = true"
|
||||
/>
|
||||
<van-calendar
|
||||
v-model:show="showCalendar"
|
||||
round
|
||||
teleport="body"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const i18n = {
|
||||
@@ -31,27 +13,34 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
});
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showCalendar: false,
|
||||
});
|
||||
|
||||
const formatDate = (date: Date) =>
|
||||
`${date.getMonth() + 1}/${date.getDate()}`;
|
||||
const formatDate = (date: Date) => `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
|
||||
const onConfirm = (date: Date) => {
|
||||
state.value = formatDate(date);
|
||||
state.showCalendar = false;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
const onConfirm = (date: Date) => {
|
||||
state.value = formatDate(date);
|
||||
state.showCalendar = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
is-link
|
||||
readonly
|
||||
name="calendar"
|
||||
:label="t('calendar')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="state.showCalendar = true"
|
||||
/>
|
||||
<van-calendar
|
||||
v-model:show="state.showCalendar"
|
||||
round
|
||||
teleport="body"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -1,20 +1,5 @@
|
||||
<template>
|
||||
<van-field
|
||||
v-model="value"
|
||||
is-link
|
||||
readonly
|
||||
name="datetimePicker"
|
||||
:label="t('label')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model:show="showPicker" round position="bottom" teleport="body">
|
||||
<van-datetime-picker type="time" @confirm="onConfirm" @cancel="onCancel" />
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const i18n = {
|
||||
@@ -28,29 +13,38 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
|
||||
const onConfirm = (time: string) => {
|
||||
state.value = time;
|
||||
state.showPicker = false;
|
||||
};
|
||||
const onConfirm = (time: string) => {
|
||||
state.value = time;
|
||||
state.showPicker = false;
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
state.showPicker = false;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
const onCancel = () => {
|
||||
state.showPicker = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
is-link
|
||||
readonly
|
||||
name="datetimePicker"
|
||||
:label="t('label')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="state.showPicker = true"
|
||||
/>
|
||||
<van-popup
|
||||
v-model:show="state.showPicker"
|
||||
round
|
||||
position="bottom"
|
||||
teleport="body"
|
||||
>
|
||||
<van-datetime-picker type="time" @confirm="onConfirm" @cancel="onCancel" />
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
@@ -1,24 +1,5 @@
|
||||
<template>
|
||||
<van-field
|
||||
v-model="value"
|
||||
is-link
|
||||
readonly
|
||||
name="picker"
|
||||
:label="t('picker')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model:show="showPicker" round position="bottom" teleport="body">
|
||||
<van-picker
|
||||
:columns="t('textColumns')"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
|
||||
const i18n = {
|
||||
@@ -34,29 +15,42 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value: '',
|
||||
showPicker: false,
|
||||
});
|
||||
|
||||
const onConfirm = (value: string) => {
|
||||
state.value = value;
|
||||
state.showPicker = false;
|
||||
};
|
||||
const onConfirm = (value: string) => {
|
||||
state.value = value;
|
||||
state.showPicker = false;
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
state.showPicker = false;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
};
|
||||
},
|
||||
const onCancel = () => {
|
||||
state.showPicker = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<van-field
|
||||
v-model="state.value"
|
||||
is-link
|
||||
readonly
|
||||
name="picker"
|
||||
:label="t('picker')"
|
||||
:placeholder="t('placeholder')"
|
||||
@click="state.showPicker = true"
|
||||
/>
|
||||
<van-popup
|
||||
v-model:show="state.showPicker"
|
||||
round
|
||||
position="bottom"
|
||||
teleport="body"
|
||||
>
|
||||
<van-picker
|
||||
:columns="t('textColumns')"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
@@ -1,47 +1,5 @@
|
||||
<template>
|
||||
<demo-block :title="t('title')">
|
||||
<van-form @sumbit="onSubmit" @failed="onFailed">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="value1"
|
||||
name="pattern"
|
||||
:label="t('label')"
|
||||
:rules="[{ pattern, message: t('message') }]"
|
||||
:placeholder="t('pattern')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value2"
|
||||
name="validator"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator, message: t('message') }]"
|
||||
:placeholder="t('validator')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value3"
|
||||
name="validatorMessage"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
:placeholder="t('validatorMessage')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value4"
|
||||
name="asyncValidator"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator: asyncValidator, message: t('message') }]"
|
||||
:placeholder="t('asyncValidator')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px 16px 0">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue';
|
||||
import { useTranslate } from '@demo/use-translate';
|
||||
import { FieldValidateError } from '../../field/types';
|
||||
import { Toast } from '../../toast';
|
||||
@@ -73,51 +31,79 @@ const i18n = {
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: 'abc',
|
||||
value4: '',
|
||||
});
|
||||
const t = useTranslate(i18n);
|
||||
const state = reactive({
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: 'abc',
|
||||
value4: '',
|
||||
});
|
||||
const pattern = /\d{6}/;
|
||||
|
||||
const validator = (val: string) => /1\d{10}/.test(val);
|
||||
const validator = (val: string) => /1\d{10}/.test(val);
|
||||
|
||||
const validatorMessage = (val: string) => t('invalid', val);
|
||||
const validatorMessage = (val: string) => t('invalid', val);
|
||||
|
||||
const asyncValidator = (val: string) =>
|
||||
new Promise((resolve) => {
|
||||
Toast.loading(t('validating'));
|
||||
const asyncValidator = (val: string) =>
|
||||
new Promise((resolve) => {
|
||||
Toast.loading(t('validating'));
|
||||
|
||||
setTimeout(() => {
|
||||
Toast.clear();
|
||||
resolve(val === '1234');
|
||||
}, 1000);
|
||||
});
|
||||
setTimeout(() => {
|
||||
Toast.clear();
|
||||
resolve(val === '1234');
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
const onSubmit = (values: Record<string, string>) => {
|
||||
console.log('submit', values);
|
||||
};
|
||||
const onSubmit = (values: Record<string, string>) => {
|
||||
console.log('submit', values);
|
||||
};
|
||||
|
||||
const onFailed = (errorInfo: {
|
||||
values: Record<string, string>;
|
||||
errors: FieldValidateError[];
|
||||
}) => {
|
||||
console.log('failed', errorInfo);
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
t,
|
||||
pattern: /\d{6}/,
|
||||
onSubmit,
|
||||
onFailed,
|
||||
validator,
|
||||
asyncValidator,
|
||||
validatorMessage,
|
||||
};
|
||||
},
|
||||
const onFailed = (errorInfo: {
|
||||
values: Record<string, string>;
|
||||
errors: FieldValidateError[];
|
||||
}) => {
|
||||
console.log('failed', errorInfo);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<demo-block :title="t('title')">
|
||||
<van-form @sumbit="onSubmit" @failed="onFailed">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="state.value1"
|
||||
name="pattern"
|
||||
:label="t('label')"
|
||||
:rules="[{ pattern, message: t('message') }]"
|
||||
:placeholder="t('pattern')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value2"
|
||||
name="validator"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator, message: t('message') }]"
|
||||
:placeholder="t('validator')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value3"
|
||||
name="validatorMessage"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator: validatorMessage }]"
|
||||
:placeholder="t('validatorMessage')"
|
||||
/>
|
||||
<van-field
|
||||
v-model="state.value4"
|
||||
name="asyncValidator"
|
||||
:label="t('label')"
|
||||
:rules="[{ validator: asyncValidator, message: t('message') }]"
|
||||
:placeholder="t('asyncValidator')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px 16px 0">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
{{ t('submit') }}
|
||||
</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
+6
-14
@@ -1,19 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import BasicUsage from './BasicUsage.vue';
|
||||
import ValidateRules from './ValidateRules.vue';
|
||||
import FieldType from './FieldType.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<basic-usage />
|
||||
<validate-rules />
|
||||
<field-type />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import BasicUsage from './BasicUsage.vue';
|
||||
import ValidateRules from './ValidateRules.vue';
|
||||
import FieldType from './FieldType.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BasicUsage,
|
||||
FieldType,
|
||||
ValidateRules,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user