提交 3c4de9b0 作者: Vben

fix(input-count): make sure the reset function works close #381

上级 e49072c3
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
- 重构路由多层模式,解决嵌套 keepalive 执行多次问题 - 重构路由多层模式,解决嵌套 keepalive 执行多次问题
### 🐛 Bug Fixes
- 确保 CountDownInput 组件重置清空值
## 2.1.0 (2021-03-15) ## 2.1.0 (2021-03-15)
### ✨ Features ### ✨ Features
......
...@@ -8,22 +8,21 @@ ...@@ -8,22 +8,21 @@
</Button> </Button>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, PropType } from 'vue'; import { defineComponent, ref, PropType, watchEffect } from 'vue';
import { Button } from 'ant-design-vue'; import { Button } from 'ant-design-vue';
import { useCountdown } from './useCountdown'; import { useCountdown } from './useCountdown';
import { isFunction } from '/@/utils/is'; import { isFunction } from '/@/utils/is';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { propTypes } from '/@/utils/propTypes';
export default defineComponent({ export default defineComponent({
name: 'CountButton', name: 'CountButton',
components: { Button }, components: { Button },
props: { props: {
count: { value: propTypes.string,
type: Number, count: propTypes.number.def(60),
default: 60,
},
beforeStartFunc: { beforeStartFunc: {
type: Function as PropType<() => boolean>, type: Function as PropType<() => boolean>,
default: null, default: null,
...@@ -32,8 +31,12 @@ ...@@ -32,8 +31,12 @@
setup(props) { setup(props) {
const loading = ref(false); const loading = ref(false);
const { currentCount, isStart, start } = useCountdown(props.count); const { currentCount, isStart, start, reset } = useCountdown(props.count);
const { t } = useI18n(); const { t } = useI18n();
watchEffect(() => {
props.value === undefined && reset();
});
/** /**
* @description: Judge whether there is an external function before execution, and decide whether to start after execution * @description: Judge whether there is an external function before execution, and decide whether to start after execution
*/ */
......
<template> <template>
<AInput v-bind="$attrs" :class="prefixCls" :size="size"> <AInput v-bind="$attrs" :class="prefixCls" :size="size" :value="state">
<template #addonAfter> <template #addonAfter>
<CountButton :size="size" :count="count" :beforeStartFunc="sendCodeApi" /> <CountButton :size="size" :count="count" :value="state" :beforeStartFunc="sendCodeApi" />
</template> </template>
</AInput> </AInput>
</template> </template>
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
export default defineComponent({ export default defineComponent({
name: 'CountDownInput', name: 'CountDownInput',
inheritAttrs: false,
components: { [Input.name]: Input, CountButton }, components: { [Input.name]: Input, CountButton },
props: { props: {
value: propTypes.string, value: propTypes.string,
......
...@@ -14,8 +14,8 @@ export function useCountdown(count: number) { ...@@ -14,8 +14,8 @@ export function useCountdown(count: number) {
function stop() { function stop() {
isStart.value = false; isStart.value = false;
timerId = null;
clear(); clear();
timerId = null;
} }
function start() { function start() {
......
...@@ -23,6 +23,7 @@ import ApiSelect from './components/ApiSelect.vue'; ...@@ -23,6 +23,7 @@ import ApiSelect from './components/ApiSelect.vue';
import { BasicUpload } from '/@/components/Upload'; import { BasicUpload } from '/@/components/Upload';
import { StrengthMeter } from '/@/components/StrengthMeter'; import { StrengthMeter } from '/@/components/StrengthMeter';
import { IconPicker } from '/@/components/Icon'; import { IconPicker } from '/@/components/Icon';
import { CountdownInput } from '/@/components/CountDown';
const componentMap = new Map<ComponentType, Component>(); const componentMap = new Map<ComponentType, Component>();
...@@ -51,6 +52,7 @@ componentMap.set('WeekPicker', DatePicker.WeekPicker); ...@@ -51,6 +52,7 @@ componentMap.set('WeekPicker', DatePicker.WeekPicker);
componentMap.set('TimePicker', TimePicker); componentMap.set('TimePicker', TimePicker);
componentMap.set('StrengthMeter', StrengthMeter); componentMap.set('StrengthMeter', StrengthMeter);
componentMap.set('IconPicker', IconPicker); componentMap.set('IconPicker', IconPicker);
componentMap.set('InputCountDown', CountdownInput);
componentMap.set('Upload', BasicUpload); componentMap.set('Upload', BasicUpload);
......
...@@ -31,6 +31,7 @@ export function useRuleFormItem<T extends Indexable>( ...@@ -31,6 +31,7 @@ export function useRuleFormItem<T extends Indexable>(
}, },
set(value) { set(value) {
if (isEqual(value, defaultState.value)) return; if (isEqual(value, defaultState.value)) return;
innerState.value = value as T[keyof T]; innerState.value = value as T[keyof T];
emit?.(changeEvent, value); emit?.(changeEvent, value);
}, },
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<a-button @click="resetValidate" class="mr-2"> 清空校验信息 </a-button> <a-button @click="resetValidate" class="mr-2"> 清空校验信息 </a-button>
<a-button @click="getFormValues" class="mr-2"> 获取表单值 </a-button> <a-button @click="getFormValues" class="mr-2"> 获取表单值 </a-button>
<a-button @click="setFormValues" class="mr-2"> 设置表单值 </a-button> <a-button @click="setFormValues" class="mr-2"> 设置表单值 </a-button>
<a-button @click="resetFields" class="mr-2"> 重置 </a-button>
</div> </div>
<CollapseContainer title="表单校验"> <CollapseContainer title="表单校验">
<BasicForm @register="register" @submit="handleSubmit" /> <BasicForm @register="register" @submit="handleSubmit" />
...@@ -47,6 +48,15 @@ ...@@ -47,6 +48,15 @@
required: true, required: true,
}, },
{ {
field: 'field44',
component: 'InputCountDown',
label: '验证码',
colProps: {
span: 8,
},
required: true,
},
{
field: 'field4', field: 'field4',
component: 'Select', component: 'Select',
label: '字段4', label: '字段4',
...@@ -150,15 +160,16 @@ ...@@ -150,15 +160,16 @@
components: { BasicForm, CollapseContainer, PageWrapper }, components: { BasicForm, CollapseContainer, PageWrapper },
setup() { setup() {
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const [register, { validateFields, clearValidate, getFieldsValue, setFieldsValue }] = useForm( const [
{ register,
labelWidth: 120, { validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue },
schemas, ] = useForm({
actionColOptions: { labelWidth: 120,
span: 24, schemas,
}, actionColOptions: {
} span: 24,
); },
});
async function validateForm() { async function validateForm() {
try { try {
const res = await validateFields(); const res = await validateFields();
...@@ -191,6 +202,7 @@ ...@@ -191,6 +202,7 @@
setFormValues, setFormValues,
validateForm, validateForm,
resetValidate, resetValidate,
resetFields,
}; };
}, },
}); });
......
...@@ -24,9 +24,6 @@ ...@@ -24,9 +24,6 @@
}); });
function handleReloadCurrent() { function handleReloadCurrent() {
reload(); reload();
// reload({
// searchInfo: 'xxx',
// });
} }
function handleReload() { function handleReload() {
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
import { CountdownInput } from '/@/components/CountDown'; import { CountdownInput } from '/@/components/CountDown';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin'; import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';
export default defineComponent({ export default defineComponent({
name: 'ForgetPasswordForm', name: 'ForgetPasswordForm',
...@@ -66,14 +66,12 @@ ...@@ -66,14 +66,12 @@
sms: '', sms: '',
}); });
const { validForm } = useFormValid(formRef);
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD); const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD);
async function handleReset() { async function handleReset() {
const data = await validForm(); const form = unref(formRef);
if (!data) return; if (!form) return;
console.log(data); await form.resetFields();
} }
return { return {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论