添加验证码错误提示

This commit is contained in:
神仙都没用 2024-07-30 14:36:01 +08:00
parent 4de876c0e9
commit fd5286fe0a

View File

@ -3,8 +3,15 @@
<div v-if="svg" class="svg" v-html="svg" /> <div v-if="svg" class="svg" v-html="svg" />
<img v-else-if="base64" class="base64" :src="base64" alt="" /> <img v-else-if="base64" class="base64" :src="base64" alt="" />
<template v-else-if="isError">
<el-text type="danger"> 后端未启动 </el-text>
<el-icon color="#f56c6c" :size="16">
<warning-filled />
</el-icon>
</template>
<template v-else> <template v-else>
<el-icon class="is-loading"> <el-icon class="is-loading" :size="18">
<loading /> <loading />
</el-icon> </el-icon>
</template> </template>
@ -14,20 +21,28 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { Loading } from "@element-plus/icons-vue"; import { Loading, WarningFilled } from "@element-plus/icons-vue";
import { useCool } from "/@/cool"; import { useCool } from "/@/cool";
const emit = defineEmits(["update:modelValue", "change"]); const emit = defineEmits(["update:modelValue", "change"]);
const { service } = useCool(); const { service } = useCool();
//
const isError = ref(false);
// base64 // base64
const base64 = ref(""); const base64 = ref("");
// svg // svg
const svg = ref(""); const svg = ref("");
//
async function refresh() { async function refresh() {
isError.value = false;
svg.value = "";
base64.value = "";
await service.base.open await service.base.open
.captcha({ .captcha({
height: 45, height: 45,
@ -54,6 +69,7 @@ async function refresh() {
}) })
.catch((err) => { .catch((err) => {
ElMessage.error(err.message); ElMessage.error(err.message);
isError.value = true;
}); });
} }
@ -75,6 +91,7 @@ defineExpose({
height: 45px; height: 45px;
width: 150px; width: 150px;
position: relative; position: relative;
user-select: none;
.svg { .svg {
height: 100%; height: 100%;
@ -87,7 +104,6 @@ defineExpose({
.el-icon { .el-icon {
position: absolute; position: absolute;
font-size: 22px;
right: 20px; right: 20px;
} }
} }