zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions 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 { select } from './index';
import { ref} from 'vue' import { ref} from 'vue'
const props = defineProps(['value']); const props = defineProps(['value']);
const tab = ref(''); const tab = ref(Object.keys(props.value)[0] || '');
const changeTab = (val: string) => { const changeTab = (val: string) => {
tab.value = val; tab.value = val;
}; };
@ -13,13 +14,13 @@ const changeTab = (val: string) => {
<div class="tabs"> <div class="tabs">
<a class="tab tab-bordered text-gray-400 uppercase" <a class="tab tab-bordered text-gray-400 uppercase"
v-for="(item, index) of value" :value="index" v-for="(item, index) of value" :value="index"
:class="{ 'tab-active': tab === String(index) }" :class="{ 'tab-active':tab === String(index) }"
@click="changeTab(String(index))" @click="changeTab(String(index))"
>{{ index }}</a> >{{ index }}</a>
</div> </div>
<div class="min-h-[25px] mt-4"> <div class="min-h-[25px] mt-4">
<div v-for="(v, k) of value" :value="k"> <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> </div>
</div> </div>