fix(lan): 修复局域网服务检测逻辑与显示控制

- 将 `v-if` 替换为 `v-show` 以避免组件重复创建
- 使用 `.sync` 修饰符替代 `value` 事件进行双向绑定
- 调整检测超时逻辑,超时后设置为检测成功
- 网络响应失败时正确同步状态值
- 移除模板中冗余的条件渲染包装元素
This commit is contained in:
hz
2025-12-11 12:11:02 +08:00
committed by joshen
parent c5c49222e8
commit cb555a91f7
2 changed files with 6 additions and 8 deletions

View File

@@ -20,7 +20,7 @@ export default {
methods: { methods: {
syncValue(val) { syncValue(val) {
this.loading = false this.loading = false
this.$emit('value', val) this.$emit('update:value', val)
}, },
/**局域网检测*/ /**局域网检测*/
lanServiceCheck() { lanServiceCheck() {
@@ -30,7 +30,7 @@ export default {
const controller = new AbortController(); const controller = new AbortController();
const timeoutId = setTimeout(() => { const timeoutId = setTimeout(() => {
controller.abort(); controller.abort();
this.syncValue(false); this.syncValue(true);
}, 1000); }, 1000);
// 拼接随机参数(时间戳+随机数确保URL唯一防止缓存 // 拼接随机参数(时间戳+随机数确保URL唯一防止缓存
@@ -43,7 +43,7 @@ export default {
}) })
.then(response => { .then(response => {
clearTimeout(timeoutId); clearTimeout(timeoutId);
response.ok ? this.syncValue(true) : this.syncValue(false); this.syncValue(!response.ok)
}) })
.catch(error => { .catch(error => {
clearTimeout(timeoutId); clearTimeout(timeoutId);
@@ -58,14 +58,12 @@ export default {
<template> <template>
<div class="lan-checker-container"> <div class="lan-checker-container">
<div v-if="value">
<div> <div>
<span>{{ errorMsg }}</span> <span>{{ errorMsg }}</span>
</div> </div>
<div class="check-btn" @click="lanServiceCheck"> <div class="check-btn" @click="lanServiceCheck">
<el-button v-loading="loading" type="primary">重新检测</el-button> <el-button v-loading="loading" type="primary">重新检测</el-button>
</div> </div>
</div>
</div> </div>
</template> </template>

View File

@@ -37,11 +37,11 @@
</div> </div>
<div class="content-wrapper" v-if="isLan"> <div class="content-wrapper" v-show="isLan">
<lan-service-checker v-model="isLan"/> <lan-service-checker :value.sync="isLan"/>
</div> </div>
<!-- 内容区域 --> <!-- 内容区域 -->
<div class="content-wrapper" v-else > <div class="content-wrapper" v-show="!isLan" >
<div <div
class="welcome-message" class="welcome-message"
ref="messageContainer" ref="messageContainer"