cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ObjectHorizontalElement tab UI refactor

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-07 09:32:23 +08:00
parent a64c28c6ee
commit 8774bcdf72
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/dynamic/ObjectHorizontalElement.vue
View File

@ -3,7 +3,8 @@ import DynamicComponent from './DynamicComponent.vue';
import { select } from './index';
import { ref} from 'vue'
const props = defineProps(['value']);
const tab = ref('');
const tab = ref(Object.keys(props.value)[0] || '');
const changeTab = (val: string) => {
tab.value = val;
};
@ -13,13 +14,13 @@ const changeTab = (val: string) => {
<div class="tabs">
<a class="tab tab-bordered text-gray-400 uppercase"
v-for="(item, index) of value" :value="index"
:class="{ 'tab-active': tab === String(index) }"
:class="{ 'tab-active':tab === String(index) }"
@click="changeTab(String(index))"
>{{ index }}</a>
</div>
<div class="min-h-[25px] mt-4">
<div v-for="(v, k) of value" :value="k">
<DynamicComponent :value="v" v-show=" tab === String(k)"/>
<DynamicComponent :value="v" v-show="tab === String(k)"/>
</div>
</div>
</div>