feat: tab pill

This commit is contained in:
alisa 2023-04-27 19:41:06 +08:00
parent bc66c57eba
commit be885dde89
3 changed files with 35 additions and 36 deletions

View File

@ -76,7 +76,7 @@
"unplugin-auto-import": "^0.13.0",
"unplugin-vue-components": "^0.23.0",
"unplugin-vue-define-options": "1.1.4",
"vite": "^4.3.1",
"vite": "^4.3.3",
"vite-plugin-pages": "^0.28.0",
"vue-tsc": "^1.0.12"
}

View File

@ -1,36 +1,35 @@
<script lang="ts" setup>
import { useGovStore } from '@/stores';
import ProposalListItem from '@/components/ProposalListItem.vue';
import { ref, onMounted } from 'vue'
const tab = ref("")
const store = useGovStore()
onMounted(()=>{
store.fetchProposals('2')
})
import { ref, onMounted } from 'vue';
const tab = ref('');
const store = useGovStore();
onMounted(() => {
store.fetchProposals('2');
});
</script>
<template>
<div>
<VTabs v-model="tab">
<VTab value="2">Voting</VTab>
<VTab value="3" @click="store.fetchProposals('3')">Passed</VTab>
<VTab value="4" @click="store.fetchProposals('4')">Rejected</VTab>
</VTabs>
<VWindow v-model="tab" class="mt-5">
<VWindowItem value="2">
<ProposalListItem :proposals="store?.proposals['2']"/>
</VWindowItem>
<div>
<VTabs v-model="tab" class="v-tabs-pill">
<VTab value="2">Voting</VTab>
<VTab value="3" @click="store.fetchProposals('3')">Passed</VTab>
<VTab value="4" @click="store.fetchProposals('4')">Rejected</VTab>
</VTabs>
<VWindow v-model="tab" class="mt-5">
<VWindowItem value="2">
<ProposalListItem :proposals="store?.proposals['2']" />
</VWindowItem>
<VWindowItem value="3">
<ProposalListItem :proposals="store?.proposals['3']"/>
</VWindowItem>
<VWindowItem value="3">
<ProposalListItem :proposals="store?.proposals['3']" />
</VWindowItem>
<VWindowItem value="4">
<ProposalListItem :proposals="store?.proposals['4']"/>
</VWindowItem>
</VWindow>
</div>
<VWindowItem value="4">
<ProposalListItem :proposals="store?.proposals['4']" />
</VWindowItem>
</VWindow>
</div>
</template>
<route>
{
@ -38,4 +37,4 @@ onMounted(()=>{
i18n: 'governance'
}
}
</route>
</route>

View File

@ -6609,7 +6609,7 @@ postcss@^8.0.9, postcss@^8.4.23:
picocolors "^1.0.0"
source-map-js "^1.0.2"
postcss@^8.1.10, postcss@^8.4.21:
postcss@^8.1.10:
version "8.4.21"
resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz"
integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
@ -6886,9 +6886,9 @@ rimraf@3.0.2, rimraf@^3.0.2:
dependencies:
glob "^7.1.3"
rollup@^3.20.2:
rollup@^3.21.0:
version "3.21.0"
resolved "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.21.0.tgz#0a71517db56e150222670f88e5e7acfa4fede7c8"
integrity sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==
optionalDependencies:
fsevents "~2.3.2"
@ -7749,14 +7749,14 @@ vite-plugin-vuetify@^1.0.2:
debug "^4.3.3"
upath "^2.0.1"
vite@^4.3.1:
version "4.3.1"
resolved "https://registry.npmjs.org/vite/-/vite-4.3.1.tgz"
integrity sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==
vite@^4.3.3:
version "4.3.3"
resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.3.tgz#26adb4aa01439fc4546c480ea547674d87289396"
integrity sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==
dependencies:
esbuild "^0.17.5"
postcss "^8.4.21"
rollup "^3.20.2"
postcss "^8.4.23"
rollup "^3.21.0"
optionalDependencies:
fsevents "~2.3.2"