ld/skin-disease-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Replace inline style with v-show to control Detect Result's visibility.

Browse Source
This commit is contained in:
Sunday 2022-04-30 17:00:41 +08:00
parent cabd78c219
commit 798cf7d057
2 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -5,7 +5,7 @@
<main class="container"> <main class="container">
<image-form @detect-responsed="onDetectResponsed"></image-form> <image-form @detect-responsed="onDetectResponsed"></image-form>
<detect-result <detect-result
:visible="detectResult.visible" v-show="detectResultShow"
:diseaseName="detectResult.diseaseName" :diseaseName="detectResult.diseaseName"
:imageUrl="detectResult.imageUrl" :imageUrl="detectResult.imageUrl"
:trustworthiness="detectResult.trustworthiness" :trustworthiness="detectResult.trustworthiness"
@ -34,14 +34,14 @@ export default {
diseaseName: "", diseaseName: "",
imageUrl: "", imageUrl: "",
trustworthiness: 0.0, trustworthiness: 0.0,
visible: false,
}, },
detectResultShow: false,
}; };
}, },
methods: { methods: {
onDetectResponsed(res) { onDetectResponsed(res) {
this.detectResult = res.data; this.detectResult = res.data;
this.detectResult.visible = true; this.detectResultShow = true;
}, },
}, },
}; };

3
src/components/DetectResult.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<section class="py-1 text-center container"> <section class="py-1 text-center container">
<div class="row py-lg-3"> <div class="row py-lg-3">
<div class="col-lg-6 col-md-8 mx-auto" :hidden="!visible"> <div class="col-lg-6 col-md-8 mx-auto">
<h1 class="mb-3 text-center">Detect Result</h1> <h1 class="mb-3 text-center">Detect Result</h1>
<img <img
class="img-thumbnail my-2 w-25" class="img-thumbnail my-2 w-25"
@ -23,7 +23,6 @@ export default {
diseaseName: { type: String }, diseaseName: { type: String },
imageUrl: { type: String }, imageUrl: { type: String },
trustworthiness: { type: Number }, trustworthiness: { type: Number },
visible: { tyep: Boolean, default: false },
}, },
}; };
</script> </script>