Vue实现CNode社区

作品预览

vue 2.0 + Axios + Vue-router实现CNode社区

以下为部分项目介绍 详情请看 https://github.com/OrangeSAM/CNode/blob/master/README.md
组件介绍
pagination 分页组件
​    这个组件HTML和CSS部分的代码相对简单,最重要的是理清各按钮的排布逻辑。比如在点击页码5时,页码1    就应该去除且同时页码6显示在页码5之后;还有比如在目前页码为1的情况下,需要禁止上一页的执行。以下是组件template中的代码。


  <div class="pagination">
    <div class="wrap">
      <span>首页</span>
      <span>上一页</span>
      <span>...</span>
      <span>{{btn}}</span>
      <span>下一页</span>
    </div>
  </div>

​    第三个span是用来判断当前页码是否大于4,如果大于4就应该用显示...表明之前仍有页码。

​    添加了v-for指令的span是用来循环展示页码的。:class指令使用数组语法动态绑定类名。如果该页码即为当前页,那么value值为true,类名curtPage得以添加到class上。需要注意的是,这里的pagebtn是可直接使用的类名,所以是字符串类型;如果是使用了组件data中的属性,那就不应该使用字符串类型。

​    所有span的click事件是用触发页码变动事件的。这里具体实现上,按钮为文字的和数字的逻辑是不同的。对于文字按钮,我这里使用switch进行判断。因为在点击非页码按钮时是获取不到页面的,这时就需要对所点击按钮的innerText做出判断以响应,这里为了方便使用jQuery获取当前页码的上一个DOM节点模拟点击事件;或许要说明的是首页按钮的case,因为有可能页面显示的页码已经不是最开始的时候,所以要把页码初始化。 ​    也就是现在写总结时才想起,完全可以在模板代码中直接传递确定的页码作为参数,这样就省了很多事。
叫我强东

AUTHOR'S WORKS

More>>

0条评论

VOTE ME

2位支持者

  • 饥人谷_茜茜
  • Sam

SUPER WORKS

Vue实现CNode社区
Vue实现CNode社区

vue 2.0 + Axios + Vue-router实现CNode社区