本文給大家分享的是個(gè)人在使用vue.js制作的文章和評論的分頁組件，并使用webpack打包起來，這里推薦給大家，有需要的小伙伴可以參考下
學(xué)習(xí)了vue.js一段時(shí)間，拿它來做2個(gè)小組件，練習(xí)一下。
我這邊是用webpack進(jìn)行打包，也算熟悉一下它的運(yùn)用。
源碼放在文末的 github 地址上。
首先是index.html
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', Arial, sans-serif;
}
.contianer {
width: 50%;
height: auto;
margin: 20px auto;
}
article {
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class='contianer'>
<article>
文章內(nèi)容...
</article>
<div id='main'>
<app></app>
</div>
</div>
<script type="text/javascript" src='bundle.js'></script>
</body>
</html>
我將 app這個(gè)組件放在 <div id='main'></div> 內(nèi)
通過webpack打包后,入口的js文件是entry.js，用來引入app.vue組件
entry.js
let Vue = require('vue');
import App from './components/app';
let app_vue = new Vue({
el: '#main',
components: {
app: App
}
});
接下來看下這個(gè)app組件
<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>
它有2個(gè)子組件，分別是comment.vue和page.vue，通過動態(tài)綁定數(shù)據(jù)，進(jìn)行父子間組件通信，我是這樣認(rèn)為的，對于 當(dāng)前在第幾頁 應(yīng)當(dāng)由 page.vue傳遞給app.vue，所以這里我們使用 雙向綁定,其余的如 params, url, isSync，即向后臺請求數(shù)據(jù)的東西以及是否同步或異步操作<當(dāng)然，這里我還沒有測試過后臺數(shù)據(jù)，目前是直接js生成靜態(tài)數(shù)據(jù)>。
接下來,看下comment.vue評論組件
<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}">
<h3 class='comt-title'>{{ totalCommentCount }} 條評論</h3>
<div class="comt-line"></div>
<div class="comt-wrap" v-for="comment of commentArr">
<div class="comt-user">
<img src='{{ comment.avatar }}' class="comt-img"/>
</div>
<div class="comt-context">
<p class="comt-name">{{ comment.name }}</p>
<p>
{{ comment.context }}
</p>
</div>
<div class="comt-line"></div>
</div>
</div>
</template>
<script type="text/javascript">
import {getCommentData, getTotalCommentCount} from './getData';
export default {
props: {
curPageIndex: {
type: Number,
default: 1,
},
eachPageSize: {
type: Number,
default: 7,
},
commentUrl: {
type: String,
default: '',
},
commentParams: {
type: Object,
default: null,
},
commentIsSync: {
type: Boolean,
default: true,
},
},
data () {
return {
totalCommentCount: 0,
hasComment: false,
loading: true,
}
},
computed: {
commentArr () {
this.loading = true;
let res = getCommentData(this.commentUrl, this.commentParams, this.commentIsSync, this.curPageIndex, this.eachPageSize);
this.loading = false;
return res;
},
},
created () {
let cnt = getTotalCommentCount(this.commentUrl, this.commentParams);
this.totalCommentCount = cnt;
this.hasComment = cnt > 0;
}
}
</script>
這里的 getData.js 將在下面提到，是我們獲取數(shù)據(jù)的位置。
loading: 本意是在跳轉(zhuǎn)頁碼加載評論時(shí)，對于當(dāng)前評論加載0.5的透明度的遮罩，然后ajax通過它的回調(diào)函數(shù)來取消遮罩，現(xiàn)在這樣就不能實(shí)現(xiàn)了，只能強(qiáng)行寫下，然而是沒有用的..
hasComment: comment組件第一次加載的時(shí)候，我們就去請求獲得總共的數(shù)據(jù)長度，如果沒有數(shù)據(jù)，則不顯示comment組件布局內(nèi)容
·curPageIndex·: 通過父組件app傳遞下來，使用的是props
這些數(shù)據(jù)，我們都設(shè)置一個(gè)默認(rèn)值與類型比較好。
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>
主要是個(gè)對于 組件事件的運(yùn)用，=最常見的click事件，以及class與style的綁定，根據(jù) curPageIndex與this.pageIndex來比較，判斷是否擁有這個(gè)class,通過computed計(jì)算屬性，來獲得 頁碼數(shù)組 因?yàn)闀鶕?jù)當(dāng)前頁 有所變化，created的時(shí)候 計(jì)算出總頁碼。
最后一個(gè)是 目前生成獲取靜態(tài)數(shù)據(jù)的js文件.
// let data = {
// avatar: '', 頭像
// name: '', 用戶名
// context: '', 評論內(nèi)容
// }
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);
}
就這樣了吧。
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試