Use vue. js to create paging components and vue. js paging Components

Use vue. js to create paging components and vue. js paging Components

I learned vue. js for a while, used it for two small components, and practiced it.
I am using webpack for packaging, and I am familiar with its application.
The source code is put on the github address at the end of the article.

First, index.html

<! DOCTYPE html> 
I put the app component in <div id = 'main'> </div>
After packaging through webpack, the entry js file is entry. js, which is used to introduce the app. vue component
Entry. js
let Vue = require('vue');import App from './components/app';let app_vue = new Vue({ el: '#main', components: {  app: App }});
Next, let's take a look at this app component.
<style type="text/css" scoped> </style><template> <comment :cur-page-index="curPageIndex" :each-page-size="eachPageSize" :comment-url="commentUrl"   :comment-params="commentParams" :comment-is-sync="commentIsSync">   </comment> <page :cur-page-index.sync="curPageIndex" :each-page-size="eachPageSize" :page-url="pageUrl"   :page-params="pageParams" :page-is-sync="pageIsSync"> </page></template> <script type="text/javascript"> import Comment from './comment'; import Page from './page'; export default {  data () {   return {    curPageIndex: 1,    eachPageSize: 7,   }  },  components: {   comment: Comment,   page: Page  }, }</script>
It has two sub-components: comment. vue and page. vue dynamically binds data to communicate with parent-child components. In my opinion, for the current page. the vue is passed to the app. vue, so here we use two-way binding. The rest, such as params, url, and isSync, are the items that request data from the background and whether to perform synchronous or asynchronous operations. <of course, I have not tested background data here. Currently, static data is directly generated by js>.
Next, let's take a look at comment. vue comments.
<Style type = "text/css" scoped>. comt-mask {opacity: 0.5 ;}. comt-title {}. comt-line {width: 100%; height: 2px; background-color: # CCC; margin: 10px 0 ;}. comt-wrap {}. comt-user {float: left ;}. comt-img {width: 34px; height: 34px; border-radius: 17px ;}. comt-context {margin: 0 0 0 60px ;}. comt-name {color: # 2B879E; margin-bottom: 10px; font-size: 18px ;}</style> <template> <div v-if = "hasComment ": class = "{'comt-mask ': loading} "> 

Here, getData. js will mention the location where we get data.
Loading: it is intended to load a 0.5 transparency mask for the current comment when loading a comment on the page number, and ajax uses its callback function to cancel the mask. Now it cannot be implemented, it can only be forcibly written, but it is useless ..
HasComment: When the comment component is loaded for the first time, we request the total data length. If there is no data, the layout of the comment component is not displayed.
· CurPageIndex: passed through the parent component app, using props
We can set a default value and a type for the data.
Page. vue
<style type="text/css" scoped> .page {  text-align: center;  margin: 30px; } .page-btn {  color: gray;  background-color: white;  border: white;  width: 30px;  height: 30px;  margin: 5px;  font-size: 18px;  outline: none; } .page-btn-link {  cursor: Crosshair; } .page-btn-active {  border: 1px solid gray;  border-radius: 15px; }</style><template> <div class="page">  <button v-for="pageIndex of pageArr" track-by='$index' :class="{'page-btn': true, 'page-btn-active':    this.curPageIndex === pageIndex, 'page-btn-link': checkNum(pageIndex)}"    @click="clickPage(pageIndex)" >    {{ pageIndex }}  </button>   </div></template><script type="text/javascript"> import {getTotalPageCount} from './getData'; export default {  props: {   totalPageCount: {    type: Number,    default: 0,   },   curPageIndex: {    type: Number,    default: 1,   },   eachPageSize: {    type: Number,    default: 7,   },   pageAjcn: {    type: Number,    default: 4,   },   pageUrl: {    type: String,    default: '',   },   pageParams: {    type: Object,    default: null,   },   pageIsSync: {    type: Boolean,    default: true,   }        },  data () {   return {   }  },  computed: {   pageArr () {    let st = 1,     end = this.totalPageCount,     cur = this.curPageIndex,     ajcn = this.pageAjcn,     arr = [],     left = Math.floor(ajcn / 2),     right = ajcn - left;         if (end == 0 || cur == 0) {     return arr;    } else {     console.log(st, end, cur, left, right);     arr.push(st);     console.log(st+1, cur-left);     if (st + 1 < cur - left) {      arr.push('...');     }     for (let i = Math.max(cur - left, st + 1); i <= cur - 1; ++i) {      arr.push(i);     }     if (cur != st) {      arr.push(cur);     }     for (let i = cur + 1; i <= cur + right && i <= end - 1 ; ++i) {      arr.push(i);     }     if (cur + right < end - 1) {      arr.push('...');     }     if (end != cur) {      arr.push(end);     }     return arr;    }    }  },  methods: {   clickPage (curIndex) {    if (Number.isInteger(curIndex)) {     this.curPageIndex = curIndex;    }   },   checkNum (curIndex) {    return Number.isInteger(curIndex);   }     }，  created () {   this.totalPageCount = getTotalPageCount(this.pageUrl,  this.pageParams, this.pageIsSync,     this.eachPageSiz);  } }</script>
Mainly used for component events, = the most common click events, and the binding of class and style, according to curPageIndex and this. pageIndex is used to compare and determine whether the class exists. The page number array is obtained through the computed calculation attribute because the total page number is calculated when the page is created according to the changes on the current page.
The last one is the js file currently generated to obtain static data.
// Let data = {// avatar: '', avatar // name:'', username/context: '', comment ///} let dataArr = []; function randomStr (len) {return Math. random (). toString (36 ). substr (len);} function initData () {for (var I = 0; I <45; ++ I) {let _ avator = ". /resources/"+ I % 7 + ". jpg "; let _ name = randomStr (20); let _ context = randomStr (2); dataArr. push ({avatar: _ avator, name: _ name, context: _ context}) ;}} if (! DataArr. length) {initData ();} export function getCommentData (url = '', params = null, isSync = true, curPageIndex = 1, eachPageSize = 7) {/* ajax */let st = (curPageIndex-1) * eachPageSize; let end = st + eachPageSize; return dataArr. slice (st, end);} export function getTotalCommentCount (url = '', params = null, isSync = true) {/* ajax */return dataArr. length;} export function getTotalPageCount (url = '', params = null, isSync = true, eachPageSize = 7) {/* ajax */return Math. floor (dataArr. length + eachPageSize-1)/eachPageSize );}
That's all.
Github address