先上效果:
结构逻辑,父UserCenter这个页面里,有三个子页面,我的资料MyProfile,我的产品MyProducts以及我的需求MyRequests。
代码结构如下:(用路径结构表达)
./UserCenter.vue #代码举例
./Components/MyProfile.vue #代码举例
./Components/MyProducts.vue
./Components/MyRequests.vue
接下来是具体的代码细节,已经删除了无关内容。因此代码无法直接运行查看。
#UserCenter.vue: 主要是button里面加塞的function,v-if的应用。function写的极其恶心,实在不太会vue。
<template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<div class="flex justify-between m-auto">
<div class="items-center flex justify-center min-w-full">
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500" id="tabExample" role="tablist">
<li class="mr-20" role="presentation">
<button @click='pickme("myPrf")'
:style="{
backgroundColor: myPrf ? 'blue' : '',
color: myPrf ? 'white' : '',
}"
class="text-base inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="profile-tab-example" type="button" role="tab" aria-controls="profile-example" aria-selected="false">我的资料</button>
</li>
<li class="mr-20" role="presentation">
<button @click='pickme("myPrd")'
:style="{
backgroundColor: myPrd ? 'blue' : '',
color: myPrd ? 'white' : '',
}"
class="text-base inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="settings-tab-example" type="button" role="tab" aria-controls="settings-example" aria-selected="false">我的产品</button>
</li>
<li class="mr-20" role="presentation">
<button @click='pickme("myReq")'
:style="{
backgroundColor: myReq ? 'blue' : '',
color: myReq ? 'white' : '',
}"
class="text-base inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="settings-tab-example" type="button" role="tab" aria-controls="settings-example" aria-selected="false">我的需求</button>
</li>
</ul>
</div>
</div>
<MyProfile v-if="myPrf"></MyProfile>
<MyProducts v-if="myPrd"></MyProducts>
<MyRequests v-if="myReq"></MyRequests>
</div>
</div>
</div>
</template>
<script>
import MyProfile from "../Pages/Components/MyProfile";
import MyProducts from "../Pages/Components/MyProducts";
import MyRequests from "../Pages/Components/MyRequests";
export default {
name: "UserCenter",
data: () => ({
myPrf:true,
myPrd:false,
myReq:false,
}),
components: { Head, Link, MyProfile, MyProducts, MyRequests },
methods: {
pickme(value) {
if (value === "myPrf") {
this.myPrf = true
this.myPrd = false
this.myReq = false
}
if (value === "myPrd") {
this.myPrf = false
this.myPrd = true
this.myReq = false
}
if (value === "myReq") {
this.myPrf = false
this.myPrd = false
this.myReq = true
}
}
},
}
</script>
<style scoped>
</style>
#MyProfile.vue:
<template>
<div class="flex justify-c enter">
<div class="flex justify-center flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<label id="name" name="name" class="block text-sm font-medium text-gray-700">{{$page.props.auth.user.name}}</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: "MyProfile",
}
</script>
<style scoped>
</style>