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): fix demo

Browse Source
This commit is contained in:
chenjiahan 2022-02-15 16:08:31 +08:00
parent 980f976011
commit 7deba88b91
6 changed files with 29 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/vant/src/form/README.md
View File

@ -359,24 +359,20 @@ export default {
};
```
### Field Type - DatetimePicker
### Field Type - DatePicker
```html
<van-field
v-model="result"
is-link
readonly
name="datetimePicker"
label="Datetime Picker"
placeholder="Select time"
name="datePicker"
label="Date Picker"
placeholder="Select date"
@click="showPicker = true"
/>
<van-popup v-model:show="showPicker" position="bottom">
<van-datetime-picker
type="time"
@confirm="onConfirm"
@cancel="showPicker = false"
/>
<van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>
```
@ -387,9 +383,8 @@ export default {
setup() {
const result = ref('');
const showPicker = ref(false);
const onConfirm = (value) => {
result.value = value;
const onConfirm = ({ selectedValues }) => {
result.value = selectedValues.join('/');
showPicker.value = false;
};
@ -431,12 +426,9 @@ export default {
setup() {
const result = ref('');
const showArea = ref(false);
const onConfirm = (areaValues) => {
const onConfirm = ({ selectedOptions }) => {
showArea.value = false;
result.value = areaValues
.filter((item) => !!item)
.map((item) => item.name)
.join('/');
areaCode.value = selectedOptions.map((item) => item.text).join('/');
};
return {

22
packages/vant/src/form/README.zh-CN.md
View File

@ -385,26 +385,22 @@ export default {
};
```
### 表单项类型 - 时间选择器
### 表单项类型 - 日期选择器
在表单中使用 [DatetimePicker 组件](#/zh-CN/datetime-picker)。
在表单中使用 [DatePicker 组件](#/zh-CN/date-picker)。
```html
<van-field
v-model="result"
is-link
readonly
name="datetimePicker"
name="datePicker"
label="时间选择"
placeholder="点击选择时间"
@click="showPicker = true"
/>
<van-popup v-model:show="showPicker" position="bottom">
<van-datetime-picker
type="time"
@confirm="onConfirm"
@cancel="showPicker = false"
/>
<van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>
```
@ -415,9 +411,8 @@ export default {
setup() {
const result = ref('');
const showPicker = ref(false);
const onConfirm = (value) => {
result.value = value;
result.value = selectedValues.join('/');
showPicker.value = false;
};
@ -461,12 +456,9 @@ export default {
setup() {
const result = ref('');
const showArea = ref(false);
const onConfirm = (areaValues) => {
const onConfirm = ({ selectedOptions }) => {
showArea.value = false;
result.value = areaValues
.filter((item) => !!item)
.map((item) => item.name)
.join('/');
areaCode.value = selectedOptions.map((item) => item.text).join('/');
};
return {

4
packages/vant/src/form/demo/FieldType.vue
View File

@ -17,7 +17,7 @@ import VanCheckboxGroup from '../../checkbox-group';
import FieldTypeArea from './FieldTypeArea.vue';
import FieldTypePicker from './FieldTypePicker.vue';
import FieldTypeCalendar from './FieldTypeCalendar.vue';
import FieldTypeDatetimePicker from './FieldTypeDatetimePicker.vue';
import FieldTypeDatePicker from './FieldTypeDatePicker.vue';
const t = useTranslate({
'zh-CN': {
@ -127,7 +127,7 @@ const onSubmit = (values: Record<string, string>) => {
</van-field>
<field-type-picker />
<field-type-datetime-picker />
<field-type-date-picker />
<field-type-area />
<field-type-calendar />
</van-cell-group>

10
packages/vant/src/form/demo/FieldTypeArea.vue
View File

@ -1,11 +1,12 @@
<script setup lang="ts">
import VanArea, { AreaColumnOption } from '../../area';
import VanArea from '../../area';
import VanField from '../../field';
import VanPopup from '../../popup';
import { ref } from 'vue';
import { areaList } from '@vant/area-data';
import { useTranslate } from '../../../docs/site/use-translate';
import { areaListEn } from '../../area/demo/area-en';
import type { PickerConfirmEventParams } from '../../picker';
const t = useTranslate({
'zh-CN': {
@ -23,11 +24,8 @@ const t = useTranslate({
const areaCode = ref('');
const showArea = ref(false);
const onConfirm = (areaValues: AreaColumnOption[]) => {
areaCode.value = areaValues
.filter((item) => !!item)
.map((item) => item.name)
.join('/');
const onConfirm = ({ selectedOptions }: PickerConfirmEventParams) => {
areaCode.value = selectedOptions.map((item) => item.text).join('/');
showArea.value = false;
};

11
packages/vant/src/form/demo/FieldTypeDatetimePicker.vue → packages/vant/src/form/demo/FieldTypeDatePicker.vue
View File

@ -1,9 +1,10 @@
<script setup lang="ts">
import VanField from '../../field';
import VanPopup from '../../popup';
import VanDatetimePicker from '../../datetime-picker';
import VanDatePicker from '../../date-picker';
import { ref } from 'vue';
import { useTranslate } from '../../../docs/site/use-translate';
import type { PickerConfirmEventParams } from '../../picker';
const t = useTranslate({
'zh-CN': {
@ -19,8 +20,8 @@ const t = useTranslate({
const result = ref('');
const showPicker = ref(false);
const onConfirm = (time: string) => {
result.value = time;
const onConfirm = ({ selectedValues }: PickerConfirmEventParams) => {
result.value = selectedValues.join('/');
showPicker.value = false;
};
@ -34,12 +35,12 @@ const onCancel = () => {
v-model="result"
is-link
readonly
name="datetimePicker"
name="datePicker"
: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-date-picker @confirm="onConfirm" @cancel="onCancel" />
</van-popup>
</template>

2
packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
View File

@ -523,7 +523,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-field__body">
<input type="text"
id="van-field-input"
name="datetimePicker"
name="datePicker"
class="van-field__control"
readonly
placeholder="Select time"