Vue实现CNode

效果实现思路及过程：

通过vuex调用CNdoe接口，
通过Tap切换来实现跳转
通过dayjs插件是现实事件
获取屏幕可视区实现回到顶部

效果代码实现：

vuex代码实现思路：

我们通过async和await异步获取数据，然后进行赋值，接口文档https://cnodejs.org/api

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'Vue.use(Vuex)export default new Vuex.Store({state: {homeData:[],status:'all',aboutData:{}},mutations: {SET_HOME(state,data){state.homeData=data},SET_TAP(state,status){state.status=status;console.log(status)},SET_ABOUT(state,data){state.aboutData=data}},actions: {async setHome({commit},tab='all'){await axios.get('https://cnodejs.org/api/v1/topics?tab='+tab).then(res=>{console.log(res.data.data);commit('SET_HOME',res.data.data)})},setTap({commit},status){commit('SET_TAP',status)},setAbout({commit},id){axios.get('https://cnodejs.org/api/v1/topic/'+id).then(res=>{console.log(res.data.data)commit('SET_ABOUT',res.data.data)})}},modules: {}
})

首页代码实现思路：

先编写一下我们导航栏数据信息，然后通过Tap切换实现跳转，然后获取vuex中赋值的数据进行渲染，然后用dayjs插件实现时间的优化，在通过导航守卫在判断当我们页面刷新导航在跳，然后通过屏幕可视区实现点击返回顶部

<template><div class="home"><header><ul><router-link tag="li" :class="{'current-tab':status==item.title}" :to="{path:'/',query:{'tab':item.title}}" v-for="item in tap" :key="item.id">{{item.name}}</router-link></ul></header><div class="inner"  @scroll="totop($event)"><ul v-for="item in homeData" :key="item.id"><li><img :src="item.author.avatar_url"></li><li>置顶</li><router-link tag="li" :to="'/topic/'+item.id">{{item.title}}</router-link><li><span>{{item.reply_count}}</span><span>/</span><span>{{item.visit_count}}</span></li><li>{{item.create_at | Time}}</li></ul></div><div class="return-to" v-show="sctop>300" @click="addto">回到顶部</div></div>
</template><script>
import dayjs from 'dayjs'
import "dayjs/locale/zh-cn"
import rTime from "dayjs/plugin/relativeTime"
dayjs.locale('zh-cn')
dayjs.extend(rTime)
import {mapState,mapActions} from 'vuex'const tap=[{id:0,title:'all',name:"全部"},{id:1,title:'good',name:"精华"},{id:2,title:'job',name:"分享"},{id:3,title:'share',name:"问答"},{id:4,title:'ask',name:"招聘"},
];
export default {data() {return {tap,sctop:0,cstop:null}},computed:{...mapState(['homeData','status']),},methods: {...mapActions(['setTap','setHome']),totop(e){this.cstop=ethis.sctop=e.target.scrollTopconsole.log(this.sctop)},addto(){this.sctop=0this.cstop.target.scrollTop=0}},filters:{Time(value){return dayjs().to(dayjs(value))}},  created(){this.$store.dispatch('setHome');},async beforeRouteUpdate(to, from, next) {this.$store.dispatch('setTap',to.query.tab)await this.$store.dispatch('setHome',to.query.tab)console.log(to)next();},
}
</script><style lang="scss" scoped>.home{width: 100%;margin: 0 auto;header{ul{display: flex;li{width: 0.5rem;line-height: 0.3rem;margin: 10px;color: chartreuse;}.current-tab{background: chartreuse;border-radius: 5px;color: #fff;}}}.inner{height: 6rem;overflow: scroll;ul{display: flex;margin: 10px 0;align-items: center;position: relative;li:nth-child(1){width: 10%;height: 0.4rem;img{width: 100%;height: 100%;}}li:nth-child(2){max-width: 10%;padding: 2px 4px;background: #80bd01;border-radius: 3px;margin-left: 10px;color: #fff;font-size: 12px;}li:nth-child(3){max-width: 70%;display: -webkit-box; -webkit-box-orient: vertical;vertical-align: middle;-webkit-line-clamp: 1;overflow: hidden;text-align: left;color: #333;font-size: 12px;}li:nth-child(4){position: absolute;bottom: -2px;left: 82px;text-align: left;line-height: 2em;font-size: 10px;span:nth-child(1){color: #9e78c0;}span:nth-child(2){color: #9e78c0;margin: 0 2px;}span:nth-child(3){color: #b4b4b4;}}li:nth-child(5){position: absolute;bottom: 0;right: 10px;font-size: .1em;text-align: right;min-width: 50px;display: inline-block;white-space: nowrap;}}}.return-to{right: 0px;bottom: 20px;display: block;background-color: #f5f5f5;border: 1px solid #ccc;border-right: 0;width: 24px;color: gray;padding: 12px 0 12px 5px;// display: none;position: fixed;cursor: pointer;text-align: center;z-index: 20;background-color: #fff;border-radius: 12px 0 0 12px;}}
</style>

是不是很简单，不懂的可以私信，我会一一解答

Vue实现CNode相关推荐

vue实现Cnode具体有axios分页请求 | filters（过滤器）解决时间转秒前分钟前小时前月前年前
vue实现axios分页请求 [注意点] 1.可以根据对象名[对象中的属性]来获取相对的属性值 2.有类名还要添加类名: :class="['tab-item',{active:activ ...
Vue开源项目库汇总
最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. http://ww ...
【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）...
Vue 资源典藏,包括:UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
实用VUE 开发插件！！前端必备
element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...
Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计 ...
[转]Vue生态系统中的库
Vue UI组件库 Vuex vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github ...
好用的vue组件插件及框架
实用的vue插件大汇总 Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总 ...
Vue UI组件开发框架服务端辅助工具应用实例 Demo示例
2019独角兽企业重金招聘Python工程师标准>>> element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组 ...
java cms 知乎_可能是史上最全面的学习资源 — VUE 开源库篇（二）
原标题:可能是史上最全面的学习资源 - VUE 开源库篇(二) 原文:https://www.cnblogs.com/opendigg/p/6513510.html 作者:OpenDigg 最近做了一 ...

Vue实现CNode

效果实现思路及过程：

效果代码实现：

vuex代码实现思路：

首页代码实现思路：

Vue实现CNode相关推荐

最新文章

热门文章