alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: demo using script setup (#9235)

Browse Source
This commit is contained in:
neverland
2021-08-11 10:55:10 +08:00
committed by GitHub
parent 010238b63c
commit 4c41908ac1
86 changed files with 4277 additions and 5151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/password-input/demo/index.vue
+126 -129
View File
@@ -1,59 +1,5 @@
<template>
<demo-block ref="basicUsage" :title="t('basicUsage')">
<van-password-input
:value="value.basicUsage"
:focused="current === 'basicUsage'"
@focus="current = 'basicUsage'"
/>
</demo-block>
<demo-block ref="customLength" :title="t('customLength')">
<van-password-input
:value="value.customLength"
:length="4"
:focused="current === 'customLength'"
@focus="current = 'customLength'"
/>
</demo-block>
<demo-block ref="addGutter" :title="t('addGutter')">
<van-password-input
:value="value.addGutter"
:gutter="10"
:focused="current === 'addGutter'"
@focus="current = 'addGutter'"
/>
</demo-block>
<demo-block ref="removeMask" :title="t('removeMask')">
<van-password-input
:mask="false"
:value="value.removeMask"
:focused="current === 'removeMask'"
@focus="current = 'removeMask'"
/>
</demo-block>
<demo-block ref="showInfo" :title="t('showInfo')">
<van-password-input
:info="t('info')"
:value="value.showInfo"
:error-info="errorInfo"
:focused="current === 'showInfo'"
@focus="current = 'showInfo'"
/>
</demo-block>
<van-number-keyboard
:show="!!current"
@blur="current = ''"
@input="onInput"
@delete="onDelete"
/>
</template>
<script lang="ts">
import { reactive, ref, toRefs, watch } from 'vue';
<script setup lang="ts">
import { ref, watch } from 'vue';
import { ComponentInstance } from '../../utils';
import { useTranslate } from '@demo/use-translate';
@@ -76,82 +22,133 @@ const i18n = {
},
};
export default {
setup() {
const t = useTranslate(i18n);
const initialValue = {
showInfo: '123',
addGutter: '123',
basicUsage: '123',
removeMask: '123',
customLength: '123',
};
const refMap = {
showInfo: ref<ComponentInstance>(),
addGutter: ref<ComponentInstance>(),
basicUsage: ref<ComponentInstance>(),
removeMask: ref<ComponentInstance>(),
customLength: ref<ComponentInstance>(),
};
type ValueKeys = keyof typeof initialValue;
const state = reactive({
value: initialValue,
current: 'basicUsage' as ValueKeys,
errorInfo: '',
});
const onInput = (key: ValueKeys) => {
const { value, current } = state;
const maxlegnth = current === 'customLength' ? 4 : 6;
const newValue = (value[current] + key).slice(0, maxlegnth);
value[current] = newValue;
if (
current === 'showInfo' &&
newValue.length === 6 &&
newValue !== '123456'
) {
state.errorInfo = t('errorInfo');
}
};
const onDelete = () => {
const { value, current } = state;
value[current] = value[current].slice(0, value[current].length - 1);
if (current === 'showInfo') {
state.errorInfo = '';
}
};
watch(
() => state.current,
(value) => {
if (value) {
const vm = refMap[value].value;
if (vm) {
const { top } = vm.$el.getBoundingClientRect();
window.scrollTo(0, window.pageYOffset + top);
}
}
}
);
return {
...toRefs(state),
...refMap,
t,
onInput,
onDelete,
};
},
const t = useTranslate(i18n);
const initialValue = {
showInfo: '123',
addGutter: '123',
basicUsage: '123',
removeMask: '123',
customLength: '123',
};
type ValueKeys = keyof typeof initialValue;
const values = ref(initialValue);
const current = ref<ValueKeys | null>('basicUsage');
const errorInfo = ref('');
const showInfo = ref<ComponentInstance>();
const addGutter = ref<ComponentInstance>();
const basicUsage = ref<ComponentInstance>();
const removeMask = ref<ComponentInstance>();
const customLength = ref<ComponentInstance>();
const refMap = {
showInfo,
addGutter,
basicUsage,
removeMask,
customLength,
};
const onInput = (key: ValueKeys) => {
if (!current.value) {
return;
}
const maxlegnth = current.value === 'customLength' ? 4 : 6;
const newValue = (values.value[current.value] + key).slice(0, maxlegnth);
values.value[current.value] = newValue;
if (
current.value === 'showInfo' &&
newValue.length === 6 &&
newValue !== '123456'
) {
errorInfo.value = t('errorInfo');
}
};
const onDelete = () => {
if (!current.value) {
return;
}
values.value[current.value] = values.value[current.value].slice(
0,
values.value[current.value].length - 1
);
if (current.value === 'showInfo') {
errorInfo.value = '';
}
};
watch(current, (value) => {
if (value) {
const vm = refMap[value].value;
if (vm) {
const { top } = vm.$el.getBoundingClientRect();
window.scrollTo(0, window.pageYOffset + top);
}
}
});
</script>
<template>
<demo-block ref="basicUsage" :title="t('basicUsage')">
<van-password-input
:value="values.basicUsage"
:focused="current === 'basicUsage'"
@focus="current = 'basicUsage'"
/>
</demo-block>
<demo-block ref="customLength" :title="t('customLength')">
<van-password-input
:value="values.customLength"
:length="4"
:focused="current === 'customLength'"
@focus="current = 'customLength'"
/>
</demo-block>
<demo-block ref="addGutter" :title="t('addGutter')">
<van-password-input
:value="values.addGutter"
:gutter="10"
:focused="current === 'addGutter'"
@focus="current = 'addGutter'"
/>
</demo-block>
<demo-block ref="removeMask" :title="t('removeMask')">
<van-password-input
:mask="false"
:value="values.removeMask"
:focused="current === 'removeMask'"
@focus="current = 'removeMask'"
/>
</demo-block>
<demo-block ref="showInfo" :title="t('showInfo')">
<van-password-input
:info="t('info')"
:value="values.showInfo"
:error-info="errorInfo"
:focused="current === 'showInfo'"
@focus="current = 'showInfo'"
/>
</demo-block>
<van-number-keyboard
:show="!!current"
@blur="current = null"
@input="onInput"
@delete="onDelete"
/>
</template>
<style lang="less">
.demo-password-input {
min-height: 150vh;