blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

chore: prefer using ref in script setup (#9276)

Browse Source
This commit is contained in:
neverland 2021-08-17 20:56:33 +08:00 committed by GitHub
parent c9fecc14ef
commit cb25a8c4ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 199 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/action-sheet/demo/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { ref, computed } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { ActionSheetAction } from '..';
import { Toast } from '../../toast';
@ -36,13 +36,11 @@ const i18n = {
};
const t = useTranslate(i18n);
const show = reactive({
basic: false,
cancel: false,
title: false,
status: false,
description: false,
});
const showBasic = ref(false);
const showCancel = ref(false);
const showTitle = ref(false);
const showStatus = ref(false);
const showDescription = ref(false);
const simpleActions = computed<ActionSheetAction[]>(() => [
{ name: t('option1') },
@ -63,7 +61,7 @@ const actionsWithDescription = computed<ActionSheetAction[]>(() => [
]);
const onSelect = (item: ActionSheetAction) => {
show.basic = false;
showBasic.value = false;
Toast(item.name);
};
@ -72,31 +70,31 @@ const onCancel = () => Toast(t('cancel'));
<template>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
<van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
<van-cell is-link :title="t('basicUsage')" @click="showBasic = true" />
<van-cell is-link :title="t('showCancel')" @click="showCancel = true" />
<van-cell
is-link
:title="t('showDescription')"
@click="show.description = true"
@click="showDescription = true"
/>
</demo-block>
<demo-block card :title="t('optionStatus')">
<van-cell is-link :title="t('optionStatus')" @click="show.status = true" />
<van-cell is-link :title="t('optionStatus')" @click="showStatus = true" />
</demo-block>
<demo-block card :title="t('customPanel')">
<van-cell is-link :title="t('customPanel')" @click="show.title = true" />
<van-cell is-link :title="t('customPanel')" @click="showTitle = true" />
</demo-block>
<van-action-sheet
v-model:show="show.basic"
v-model:show="showBasic"
:actions="simpleActions"
@select="onSelect"
/>
<van-action-sheet
v-model:show="show.cancel"
v-model:show="showCancel"
:actions="simpleActions"
close-on-click-action
:cancel-text="t('cancel')"
@ -104,7 +102,7 @@ const onCancel = () => Toast(t('cancel'));
/>
<van-action-sheet
v-model:show="show.description"
v-model:show="showDescription"
:actions="actionsWithDescription"
close-on-click-action
:cancel-text="t('cancel')"
@ -112,13 +110,13 @@ const onCancel = () => Toast(t('cancel'));
/>
<van-action-sheet
v-model:show="show.status"
v-model:show="showStatus"
close-on-click-action
:actions="statusActions"
:cancel-text="t('cancel')"
/>
<van-action-sheet v-model:show="show.title" :title="t('title')">
<van-action-sheet v-model:show="showTitle" :title="t('title')">
<div class="demo-action-sheet-content">{{ t('content') }}</div>
</van-action-sheet>
</template>

44
src/circle/demo/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const format = (rate: number) => Math.min(Math.max(rate, 0), 100);
@ -24,13 +24,11 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
rate: 70,
currentRate1: 70,
currentRate2: 70,
currentRate3: 70,
currentRate4: 70,
});
const rate = ref(70);
const currentRate1 = ref(70);
const currentRate2 = ref(70);
const currentRate3 = ref(70);
const currentRate4 = ref(70);
const gradientColor = {
'0%': '#3fecff',
@ -38,54 +36,54 @@ const gradientColor = {
};
const add = () => {
state.rate = format(state.rate + 20);
rate.value = format(rate.value + 20);
};
const reduce = () => {
state.rate = format(state.rate - 20);
rate.value = format(rate.value - 20);
};
</script>
<template>
<demo-block :title="t('basicUsage')">
<van-circle
v-model:current-rate="state.currentRate1"
:rate="state.rate"
v-model:current-rate="currentRate1"
:rate="rate"
:speed="100"
:text="state.currentRate1.toFixed(0) + '%'"
:text="currentRate1.toFixed(0) + '%'"
/>
</demo-block>
<demo-block :title="t('customStyle')">
<van-circle
v-model:current-rate="state.currentRate3"
:rate="state.rate"
v-model:current-rate="currentRate3"
:rate="rate"
:speed="100"
:stroke-width="60"
:text="t('customWidth')"
/>
<van-circle
v-model:current-rate="state.currentRate3"
v-model:current-rate="currentRate3"
color="#ee0a24"
:rate="state.rate"
:rate="rate"
layer-color="#ebedf0"
:speed="100"
:text="t('customColor')"
/>
<van-circle
v-model:current-rate="state.currentRate2"
:rate="state.rate"
v-model:current-rate="currentRate2"
:rate="rate"
:speed="100"
:color="gradientColor"
:text="t('gradient')"
/>
<van-circle
v-model:current-rate="state.currentRate4"
v-model:current-rate="currentRate4"
color="#07c160"
:rate="state.rate"
:rate="rate"
:speed="100"
:clockwise="false"
:text="t('counterClockwise')"
@ -93,9 +91,9 @@ const reduce = () => {
/>
<van-circle
v-model:current-rate="state.currentRate4"
v-model:current-rate="currentRate4"
color="#7232dd"
:rate="state.rate"
:rate="rate"
:speed="100"
size="120px"
:clockwise="false"

20
src/collapse/demo/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
@ -16,17 +16,15 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
active1: [0],
active2: 0,
active3: [],
active4: [],
});
const active1 = ref([0]);
const active2 = ref(0);
const active3 = ref([]);
const active4 = ref([]);
</script>
<template>
<demo-block :title="t('basicUsage')">
<van-collapse v-model="state.active1">
<van-collapse v-model="active1">
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
@ -40,7 +38,7 @@ const state = reactive({
</demo-block>
<demo-block :title="t('accordion')">
<van-collapse v-model="state.active2" accordion>
<van-collapse v-model="active2" accordion>
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
@ -54,7 +52,7 @@ const state = reactive({
</demo-block>
<demo-block :title="t('disabled')">
<van-collapse v-model="state.active3">
<van-collapse v-model="active3">
<van-collapse-item :title="t('title') + 1">
{{ t('text') }}
</van-collapse-item>
@ -68,7 +66,7 @@ const state = reactive({
</demo-block>
<demo-block :title="t('titleSlot')">
<van-collapse v-model="state.active4">
<van-collapse v-model="active4">
<van-collapse-item>
<template #title>
{{ t('title') + 1 }}<van-icon name="question-o" />

18
src/config-provider/demo/index.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { reactive } from '@vue/reactivity';
const i18n = {
'zh-CN': {
@ -22,12 +22,8 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
rate: 4,
slider: 50,
switchChecked: true,
});
const rate = ref(4);
const slider = ref(50);
const themeVars = {
rateIconFullColor: '#07c160',
sliderBarHeight: '4px',
@ -44,13 +40,13 @@ const themeVars = {
<van-form>
<van-field name="rate" :label="t('rate')">
<template #input>
<van-rate v-model="state.rate" />
<van-rate v-model="rate" />
</template>
</van-field>
<van-field name="slider" :label="t('slider')">
<template #input>
<van-slider v-model="state.slider" />
<van-slider v-model="slider" />
</template>
</van-field>
@ -67,13 +63,13 @@ const themeVars = {
<van-form>
<van-field name="rate" :label="t('rate')">
<template #input>
<van-rate v-model="state.rate" />
<van-rate v-model="rate" />
</template>
</van-field>
<van-field name="slider" :label="t('slider')">
<template #input>
<van-slider v-model="state.slider" />
<van-slider v-model="slider" />
</template>
</van-field>

26
src/coupon-list/demo/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { ref, computed } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { CouponInfo } from '../../coupon';
import { Toast } from '../../toast';
@ -27,11 +27,9 @@ const getRandomId = (max = 999999) =>
String(Math.floor(Math.random() * max) + 1);
const t = useTranslate(i18n);
const state = reactive({
showList: false,
chosenCoupon: -1,
exchangedCoupons: [] as CouponInfo[],
});
const showList = ref(false);
const chosenCoupon = ref(-1);
const exchangedCoupons = ref<CouponInfo[]>([]);
const coupon = computed(() => ({
id: 1,
@ -71,7 +69,7 @@ const disabledDiscountCoupon = computed(() => ({
const coupons = computed(() => [
coupon.value,
discountCoupon.value,
...state.exchangedCoupons,
...exchangedCoupons.value,
]);
const disabledCoupons = computed(() => [
@ -80,13 +78,13 @@ const disabledCoupons = computed(() => [
]);
const onChange = (index: number) => {
state.showList = false;
state.chosenCoupon = index;
showList.value = false;
chosenCoupon.value = index;
};
const onExchange = () => {
Toast(t('exchange'));
state.exchangedCoupons.push({
exchangedCoupons.value.push({
...coupon.value,
id: getRandomId(),
});
@ -97,18 +95,18 @@ const onExchange = () => {
<demo-block :title="t('basicUsage')">
<van-coupon-cell
:coupons="coupons"
:chosen-coupon="state.chosenCoupon"
@click="state.showList = true"
:chosen-coupon="chosenCoupon"
@click="showList = true"
/>
<van-popup
v-model:show="state.showList"
v-model:show="showList"
round
position="bottom"
style="height: 90%; padding-top: 4px"
>
<van-coupon-list
:coupons="coupons"
:chosen-coupon="state.chosenCoupon"
:chosen-coupon="chosenCoupon"
:disabled-coupons="disabledCoupons"
:show-count="false"
@change="onChange"

42
src/dropdown-menu/demo/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { computed, ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import type { DropdownItemInstance } from '../../dropdown-item';
@ -47,12 +47,10 @@ const i18n = {
const item = ref<DropdownItemInstance>();
const t = useTranslate(i18n);
const state = reactive({
switch1: true,
switch2: false,
value1: 0,
value2: 'a',
});
const switch1 = ref(true);
const switch2 = ref(false);
const value1 = ref(0);
const value2 = ref('a');
const option1 = computed(() => t('option1'));
const option2 = computed(() => t('option2'));
@ -65,31 +63,23 @@ const onConfirm = () => {
<template>
<demo-block :title="t('basicUsage')">
<van-dropdown-menu>
<van-dropdown-item v-model="state.value1" :options="option1" />
<van-dropdown-item v-model="state.value2" :options="option2" />
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('customContent')">
<van-dropdown-menu>
<van-dropdown-item v-model="state.value1" :options="option1" />
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item :title="t('itemTitle')" ref="item">
<van-cell center :title="t('switchTitle1')">
<template #right-icon>
<van-switch
v-model="state.switch1"
size="24"
active-color="#ee0a24"
/>
<van-switch v-model="switch1" size="24" active-color="#ee0a24" />
</template>
</van-cell>
<van-cell center :title="t('switchTitle2')">
<template #right-icon>
<van-switch
v-model="state.switch2"
size="24"
active-color="#ee0a24"
/>
<van-switch v-model="switch2" size="24" active-color="#ee0a24" />
</template>
</van-cell>
<div style="padding: 5px 16px">
@ -109,22 +99,22 @@ const onConfirm = () => {
<demo-block :title="t('customActiveColor')">
<van-dropdown-menu active-color="#1989fa">
<van-dropdown-item v-model="state.value1" :options="option1" />
<van-dropdown-item v-model="state.value2" :options="option2" />
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('expandDirection')">
<van-dropdown-menu direction="up">
<van-dropdown-item v-model="state.value1" :options="option1" />
<van-dropdown-item v-model="state.value2" :options="option2" />
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
</demo-block>
<demo-block :title="t('disableMenu')">
<van-dropdown-menu>
<van-dropdown-item v-model="state.value1" disabled :options="option1" />
<van-dropdown-item v-model="state.value2" disabled :options="option2" />
<van-dropdown-item v-model="value1" disabled :options="option1" />
<van-dropdown-item v-model="value2" disabled :options="option2" />
</van-dropdown-menu>
</demo-block>
</template>

24
src/field/demo/CustomType.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
@ -30,43 +30,41 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
text: '',
phone: '',
digit: '',
number: '',
password: '',
});
const text = ref('');
const phone = ref('');
const digit = ref('');
const number = ref('');
const password = ref('');
</script>
<template>
<demo-block :title="t('customType')">
<van-cell-group inset>
<van-field
v-model="state.text"
v-model="text"
:label="t('text')"
:placeholder="t('textPlaceholder')"
/>
<van-field
v-model="state.phone"
v-model="phone"
type="tel"
:label="t('phone')"
:placeholder="t('phonePlaceholder')"
/>
<van-field
v-model="state.digit"
v-model="digit"
type="digit"
:label="t('digit')"
:placeholder="t('digitPlaceholder')"
/>
<van-field
v-model="state.number"
v-model="number"
type="number"
:label="t('number')"
:placeholder="t('numberPlaceholder')"
/>
<van-field
v-model="state.password"
v-model="password"
type="password"
:label="t('password')"
:placeholder="t('passwordPlaceholder')"

12
src/field/demo/ErrorInfo.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
@ -18,24 +18,22 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
phone: '123',
username: '',
});
const phone = ref('123');
const username = ref('');
</script>
<template>
<demo-block :title="t('errorInfo')">
<van-cell-group inset>
<van-field
v-model="state.username"
v-model="username"
error
required
:label="t('username')"
:placeholder="t('usernamePlaceholder')"
/>
<van-field
v-model="state.phone"
v-model="phone"
required
:label="t('phone')"
:placeholder="t('phonePlaceholder')"

12
src/field/demo/FormatValue.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
@ -18,10 +18,8 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
value1: '',
value2: '',
});
const value1 = ref('');
const value2 = ref('');
const formatter = (value: string) => value.replace(/\d/g, '');
</script>
@ -29,13 +27,13 @@ const formatter = (value: string) => value.replace(/\d/g, '');
<demo-block :title="t('formatValue')">
<van-cell-group inset>
<van-field
v-model="state.value1"
v-model="value1"
:label="t('text')"
:formatter="formatter"
:placeholder="t('formatOnChange')"
/>
<van-field
v-model="state.value2"
v-model="value2"
:label="t('text')"
:formatter="formatter"
format-trigger="onBlur"

12
src/field/demo/ShowIcon.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
@ -16,24 +16,22 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
icon1: '',
icon2: '123',
});
const icon1 = ref('');
const icon2 = ref('123');
</script>
<template>
<demo-block :title="t('showIcon')">
<van-cell-group inset>
<van-field
v-model="state.icon1"
v-model="icon1"
:label="t('text')"
left-icon="smile-o"
right-icon="warning-o"
:placeholder="t('showIcon')"
/>
<van-field
v-model="state.icon2"
v-model="icon2"
clearable
:label="t('text')"
left-icon="music-o"

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { FieldValidateError } from '../../field/types';
@ -21,10 +21,8 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
username: '',
password: '',
});
const username = ref('');
const password = ref('');
const onSubmit = (values: Record<string, string>) => {
console.log('submit', values);
@ -43,14 +41,14 @@ const onFailed = (errorInfo: {
<van-form @submit="onSubmit" @failed="onFailed">
<van-cell-group inset>
<van-field
v-model="state.username"
v-model="username"
name="username"
:label="t('username')"
:rules="[{ required: true, message: t('requireUsername') }]"
:placeholder="t('username')"
/>
<van-field
v-model="state.password"
v-model="password"
type="password"
name="password"
:label="t('password')"

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import FieldTypeArea from './FieldTypeArea.vue';
import FieldTypePicker from './FieldTypePicker.vue';
@ -38,16 +38,14 @@ const i18n = {
};
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 rate = ref(3);
const radio = ref('1');
const slider = ref(50);
const stepper = ref(1);
const uploader = ref([{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }]);
const checkbox = ref(false);
const checkboxGroup = ref([]);
const switchChecked = ref(false);
const onSubmit = (values: Record<string, string>) => {
console.log(values);
@ -60,22 +58,19 @@ const onSubmit = (values: Record<string, string>) => {
<van-cell-group inset>
<van-field name="switch" :label="t('switch')">
<template #input>
<van-switch v-model="state.switchChecked" size="20" />
<van-switch v-model="switchChecked" size="20" />
</template>
</van-field>
<van-field name="checkbox" :label="t('checkbox')">
<template #input>
<van-checkbox v-model="state.checkbox" shape="square" />
<van-checkbox v-model="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-group v-model="checkboxGroup" direction="horizontal">
<van-checkbox name="1" shape="square">
{{ t('checkbox') }} 1
</van-checkbox>
@ -88,7 +83,7 @@ const onSubmit = (values: Record<string, string>) => {
<van-field name="radio" :label="t('radio')">
<template #input>
<van-radio-group v-model="state.radio" direction="horizontal">
<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>
@ -97,25 +92,25 @@ const onSubmit = (values: Record<string, string>) => {
<van-field name="stepper" :label="t('stepper')">
<template #input>
<van-stepper v-model="state.stepper" />
<van-stepper v-model="stepper" />
</template>
</van-field>
<van-field name="rate" :label="t('rate')">
<template #input>
<van-rate v-model="state.rate" />
<van-rate v-model="rate" />
</template>
</van-field>
<van-field name="slider" :label="t('slider')">
<template #input>
<van-slider v-model="state.slider" />
<van-slider v-model="slider" />
</template>
</van-field>
<van-field name="uploader" :label="t('uploader')">
<template #input>
<van-uploader v-model="state.uploader" max-count="2" />
<van-uploader v-model="uploader" max-count="2" />
</template>
</van-field>

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { areaList } from '@vant/area-data';
import { useTranslate } from '@demo/use-translate';
import { AreaColumnOption } from '../../area';
@ -19,40 +19,33 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
value: '',
showArea: false,
});
const areaCode = ref('');
const showArea = ref(false);
const onConfirm = (values: AreaColumnOption[]) => {
state.value = values
areaCode.value = values
.filter((item) => !!item)
.map((item) => item.name)
.join('/');
state.showArea = false;
showArea.value = false;
};
const onCancel = () => {
state.showArea = false;
showArea.value = false;
};
</script>
<template>
<van-field
v-model="state.value"
v-model="areaCode"
is-link
readonly
name="area"
:label="t('picker')"
:placeholder="t('placeholder')"
@click="state.showArea = true"
@click="showArea = true"
/>
<van-popup
v-model:show="state.showArea"
round
position="bottom"
teleport="body"
>
<van-popup v-model:show="showArea" round position="bottom" teleport="body">
<van-area
:area-list="t('areaList')"
@confirm="onConfirm"

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
@ -14,31 +14,29 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
value: '',
showCalendar: false,
});
const result = ref('');
const showCalendar = ref(false);
const formatDate = (date: Date) => `${date.getMonth() + 1}/${date.getDate()}`;
const onConfirm = (date: Date) => {
state.value = formatDate(date);
state.showCalendar = false;
result.value = formatDate(date);
showCalendar.value = false;
};
</script>
<template>
<van-field
v-model="state.value"
v-model="result"
is-link
readonly
name="calendar"
:label="t('calendar')"
:placeholder="t('placeholder')"
@click="state.showCalendar = true"
@click="showCalendar = true"
/>
<van-calendar
v-model:show="state.showCalendar"
v-model:show="showCalendar"
round
teleport="body"
@confirm="onConfirm"

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
@ -14,37 +14,30 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
value: '',
showPicker: false,
});
const result = ref('');
const showPicker = ref(false);
const onConfirm = (time: string) => {
state.value = time;
state.showPicker = false;
result.value = time;
showPicker.value = false;
};
const onCancel = () => {
state.showPicker = false;
showPicker.value = false;
};
</script>
<template>
<van-field
v-model="state.value"
v-model="result"
is-link
readonly
name="datetimePicker"
:label="t('label')"
:placeholder="t('placeholder')"
@click="state.showPicker = true"
@click="showPicker = true"
/>
<van-popup
v-model:show="state.showPicker"
round
position="bottom"
teleport="body"
>
<van-popup v-model:show="showPicker" round position="bottom" teleport="body">
<van-datetime-picker type="time" @confirm="onConfirm" @cancel="onCancel" />
</van-popup>
</template>

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
const i18n = {
@ -16,37 +16,30 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
value: '',
showPicker: false,
});
const result = ref('');
const showPicker = ref(false);
const onConfirm = (value: string) => {
state.value = value;
state.showPicker = false;
result.value = value;
showPicker.value = false;
};
const onCancel = () => {
state.showPicker = false;
showPicker.value = false;
};
</script>
<template>
<van-field
v-model="state.value"
v-model="result"
is-link
readonly
name="picker"
:label="t('picker')"
:placeholder="t('placeholder')"
@click="state.showPicker = true"
@click="showPicker = true"
/>
<van-popup
v-model:show="state.showPicker"
round
position="bottom"
teleport="body"
>
<van-popup v-model:show="showPicker" round position="bottom" teleport="body">
<van-picker
:columns="t('textColumns')"
@confirm="onConfirm"

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { FieldValidateError } from '../../field/types';
import { Toast } from '../../toast';
@ -32,12 +32,10 @@ const i18n = {
};
const t = useTranslate(i18n);
const state = reactive({
value1: '',
value2: '',
value3: 'abc',
value4: '',
});
const value1 = ref('');
const value2 = ref('');
const value3 = ref('abc');
const value4 = ref('');
const pattern = /\d{6}/;
const validator = (val: string) => /1\d{10}/.test(val);
@ -71,28 +69,28 @@ const onFailed = (errorInfo: {
<van-form @sumbit="onSubmit" @failed="onFailed">
<van-cell-group inset>
<van-field
v-model="state.value1"
v-model="value1"
name="pattern"
:label="t('label')"
:rules="[{ pattern, message: t('message') }]"
:placeholder="t('pattern')"
/>
<van-field
v-model="state.value2"
v-model="value2"
name="validator"
:label="t('label')"
:rules="[{ validator, message: t('message') }]"
:placeholder="t('validator')"
/>
<van-field
v-model="state.value3"
v-model="value3"
name="validatorMessage"
:label="t('label')"
:rules="[{ validator: validatorMessage }]"
:placeholder="t('validatorMessage')"
/>
<van-field
v-model="state.value4"
v-model="value4"
name="asyncValidator"
:label="t('label')"
:rules="[{ validator: asyncValidator, message: t('message') }]"

22
src/image-preview/demo/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { ref } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { ImagePreview, ImagePreviewOptions } from '..';
import { Toast } from '../../toast';
@ -37,10 +37,8 @@ const images = [
];
const t = useTranslate(i18n);
const state = reactive({
show: false,
index: 0,
});
const show = ref(false);
const index = ref(0);
const onClose = () => Toast(t('closed'));
@ -52,11 +50,11 @@ const beforeClose = () =>
});
const showComponentCall = () => {
state.show = true;
show.value = true;
};
const onChange = (index: number) => {
state.index = index;
const onChange = (newIndex: number) => {
index.value = newIndex;
};
const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
@ -102,12 +100,8 @@ const showImagePreview = (options: Partial<ImagePreviewOptions> = {}) => {
<van-cell is-link @click="showComponentCall">
{{ t('componentCall') }}
</van-cell>
<van-image-preview
v-model:show="state.show"
:images="images"
@change="onChange"
>
<template #index>{{ t('index', state.index) }}</template>
<van-image-preview v-model:show="show" :images="images" @change="onChange">
<template #index>{{ t('index', index) }}</template>
</van-image-preview>
</demo-block>
</template>

36
src/share-sheet/demo/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { ref, computed } from 'vue';
import { useTranslate } from '@demo/use-translate';
import { ShareSheetOption, ShareSheetOptions } from '..';
import { Toast } from '../../toast';
@ -42,12 +42,10 @@ const i18n = {
};
const t = useTranslate(i18n);
const show = reactive({
basic: false,
withDesc: false,
multiLine: false,
customIcon: false,
});
const showBasic = ref(false);
const showWithDesc = ref(false);
const showMultiLine = ref(false);
const showCustomIcon = ref(false);
const options = computed(() => [
{ name: t('wechat'), icon: 'wechat' },
@ -101,18 +99,18 @@ const optionsWithDesc = computed<ShareSheetOptions>(() => [
const onSelect = (option: ShareSheetOption) => {
Toast(option.name);
show.basic = false;
show.withDesc = false;
show.multiLine = false;
show.customIcon = false;
showBasic.value = false;
showWithDesc.value = false;
showMultiLine.value = false;
showCustomIcon.value = false;
};
</script>
<template>
<demo-block card :title="t('basicUsage')">
<van-cell is-link :title="t('showSheet')" @click="show.basic = true" />
<van-cell is-link :title="t('showSheet')" @click="showBasic = true" />
<van-share-sheet
v-model:show="show.basic"
v-model:show="showBasic"
:title="t('title')"
:options="options"
@select="onSelect"
@ -120,9 +118,9 @@ const onSelect = (option: ShareSheetOption) => {
</demo-block>
<demo-block card :title="t('multiLine')">
<van-cell is-link :title="t('showSheet')" @click="show.multiLine = true" />
<van-cell is-link :title="t('showSheet')" @click="showMultiLine = true" />
<van-share-sheet
v-model:show="show.multiLine"
v-model:show="showMultiLine"
:title="t('title')"
:options="multiLineOptions"
@select="onSelect"
@ -130,18 +128,18 @@ const onSelect = (option: ShareSheetOption) => {
</demo-block>
<demo-block card :title="t('customIcon')">
<van-cell is-link :title="t('showSheet')" @click="show.customIcon = true" />
<van-cell is-link :title="t('showSheet')" @click="showCustomIcon = true" />
<van-share-sheet
v-model:show="show.customIcon"
v-model:show="showCustomIcon"
:options="customIconOptions"
@select="onSelect"
/>
</demo-block>
<demo-block card :title="t('withDesc')">
<van-cell is-link :title="t('showSheet')" @click="show.withDesc = true" />
<van-cell is-link :title="t('showSheet')" @click="showWithDesc = true" />
<van-share-sheet
v-model:show="show.withDesc"
v-model:show="showWithDesc"
:title="t('title')"
:options="optionsWithDesc"
:description="t('description')"