<!--
* @Author: your name
* @Date: 2020-07-21 20:50:21
* @LastEditTime: 2020-07-31 20:15:53
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \今日头条Demo\src\views\UserArticle\UserArticle.vue
-->
<style lang="less" scoped>
.UserArticle {
padding: 90px 0 50px;
/deep/ .van-tabs__wrap {
position: fixed;
top: 46px;
left: 0;
right: 0;
z-index: 1;
}
}
</style>
<template>
<div class="UserArticle">
<!-- 导航栏 -->
<van-nav-bar title="我的收藏/历史/作品" left-arrow @click-left="$router.back()" fixed></van-nav-bar>
<!-- 标签页 -->
<van-tabs v-model="active">
<van-tab title="我的收藏"></van-tab>
<van-tab title="我的历史"></van-tab>
<van-tab title="我的作品"></van-tab>
</van-tabs>
<!-- 动态组件 -->
<component v-bind:is="currentTabComponent"></component>
</div>
</template>
<script>
export default {
name: "UserArticle",
components: {
"kv-userarticle": () => import("../../components/UserArticle/article"),
"kv-history": () => import("../../components/UserArticle/history"),
"kv-collect": () => import("../../components/UserArticle/collect"),
},
props: {
type: {
type: String,
},
},
data() {
let active = ["collect", "history"].indexOf(this.type);
if (active === -1) {
active = 2;
}
return {
active: 0,
// currentTabComponent:'kv-userarticle'
};
},
watch: {},
computed: {
currentTabComponent() {
return ["kv-history", "kv-collect", "kv-userarticle"][this.active];
},
},
methods: {},
created() {},
mounted() {},
};
</script>