Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: form 表单-指定哦组建添加一个标准自定义插槽示例 #4887

Closed
wants to merge 2 commits into from
Closed

feat: form 表单-指定哦组建添加一个标准自定义插槽示例 #4887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e12b35c
feat: form 表单-指定哦组建添加一个标准自定义插槽示例
GavinLucky Nov 13, 2024
84534d0
feat: eslint fix
GavinLucky Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 129 additions & 0 deletions playground/src/views/examples/form/costom-sub/graph-validate-code.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

import { Input, Spin, Tooltip } from 'ant-design-vue';

/** 图形验证码 */

defineOptions({
name: 'GraphValidateCode',
});
interface IGraphValidateCodeProps {
/** 获取图片Api接口 */
propApi?: () => Promise<string>;
/** 校验失败状态 */
propValidateFailed: boolean;
}
// eslint-disable-next-line vue/define-macros-order
const props = defineProps<IGraphValidateCodeProps>();
const emit = defineEmits<{
(e: 'onEmitOnBlur'): void;
(e: 'onEmitOnChange', event: Event): void;
(e: 'onEmitOnFocus'): void;
}>();

const validateFailedComputed = computed(() => {
return !!props.propValidateFailed;
});

const imgLoadingStateRef = ref(false);
const inputValue = defineModel<string>('value');
const imgDataRef = ref();
const loadImgDataApiFn = () => {
return new Promise((resolve, reject) => {
if (props.propApi) {
imgLoadingStateRef.value = true;
props
.propApi()
.then((res) => {
// console.log('res', res);
imgDataRef.value = res;

resolve(res);
})
.catch((error) => {
console.error('e', error);
reject(error);
})
.finally(() => {
imgLoadingStateRef.value = false;
});
}
});
};
Comment on lines +32 to +53
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance error handling and remove debug code.

  1. Remove commented console.log
  2. Add timeout for API calls
  3. Improve error handling with specific error types
 const loadImgDataApiFn = () => {
-  return new Promise((resolve, reject) => {
+  return new Promise<string>((resolve, reject) => {
     if (props.propApi) {
       imgLoadingStateRef.value = true;
+      const timeoutId = setTimeout(() => {
+        imgLoadingStateRef.value = false;
+        reject(new Error('Request timeout'));
+      }, 10000);
+
       props
         .propApi()
         .then((res) => {
-          // console.log('res', res);
           imgDataRef.value = res;
           resolve(res);
         })
         .catch((error) => {
-          console.error('e', error);
+          const errorMessage = error instanceof Error ? error.message : 'Failed to load image';
+          console.error('Image loading failed:', errorMessage);
           reject(error);
         })
         .finally(() => {
+          clearTimeout(timeoutId);
           imgLoadingStateRef.value = false;
         });
+    } else {
+      reject(new Error('API function not provided'));
     }
   });
 };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const loadImgDataApiFn = () => {
return new Promise((resolve, reject) => {
if (props.propApi) {
imgLoadingStateRef.value = true;
props
.propApi()
.then((res) => {
// console.log('res', res);
imgDataRef.value = res;
resolve(res);
})
.catch((error) => {
console.error('e', error);
reject(error);
})
.finally(() => {
imgLoadingStateRef.value = false;
});
}
});
};
const loadImgDataApiFn = () => {
return new Promise<string>((resolve, reject) => {
if (props.propApi) {
imgLoadingStateRef.value = true;
const timeoutId = setTimeout(() => {
imgLoadingStateRef.value = false;
reject(new Error('Request timeout'));
}, 10000);
props
.propApi()
.then((res) => {
imgDataRef.value = res;
resolve(res);
})
.catch((error) => {
const errorMessage = error instanceof Error ? error.message : 'Failed to load image';
console.error('Image loading failed:', errorMessage);
reject(error);
})
.finally(() => {
clearTimeout(timeoutId);
imgLoadingStateRef.value = false;
});
} else {
reject(new Error('API function not provided'));
}
});
};

const updateImgDataFn = () => {
loadImgDataApiFn().then().catch();
};

const handleBlur = () => {
// console.log('handleBlur');
emit('onEmitOnBlur');
// 光标失焦
};
const handleFocus = () => {
// console.log('handleFocus');
emit('onEmitOnFocus');
// 光标聚焦
};
const handleChange = (e: Event) => {
// console.log('handleChange', e);
emit('onEmitOnChange', e);
// 输入框内容改变
};
onMounted(() => {
setTimeout(() => {
loadImgDataApiFn();
}, 100);
});
defineExpose({
loadImgFn: () => {
return loadImgDataApiFn();
},
});
</script>

<template>
<div
class="graph-validate-code-cls flex w-full flex-row items-center justify-between"
>
<div class="mr-[2px] w-1/2 flex-1">
<Input
v-model:value="inputValue"
:class="[
validateFailedComputed ? 'border-destructive' : 'border-light',
]"
placeholder="请输入验证码"
@blur="handleBlur"
@change="handleChange"
@focus="handleFocus"
/>
</div>

<div class="w-1/2 flex-1">
<Spin :spinning="imgLoadingStateRef" size="small">
<Tooltip placement="top">
<template #title>
<span>点击更新验证码</span>
</template>

<div
class="hover:border-primary border-light ml-[2px] box-border cursor-pointer rounded-[8px] border px-[5px] py-[1px]"
@click="updateImgDataFn"
>
<img
:src="imgDataRef"
:style="{
height: '28px',
width: 'auto',
}"
alt=""
class="mx-auto h-full object-contain"
/>
</div>
</Tooltip>
</Spin>
</div>
</div>
</template>

<style scoped lang="scss"></style>
Loading