使用vue.js和webpack完成文章的评论和分页组件

学习了vue.js一段时间,拿它来做2个小组件,练习一下。
我这边是用webpack进行打包,也算熟悉一下它的运用。
源码放在文末的 github 地址上。

首先是index.html

    Page        * {            margin: 0;            padding: 0;            font-family: 'Open Sans', Arial, sans-serif;        }        .contianer {            width: 50%;            height: auto;            margin: 20px auto;        }        article {            margin-bottom: 50px;        }            文章内容...

我将 app这个组件放在 内
通过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    }});

接下来看下这个app组件

    import Comment from './comment';    import Page from './page';    export default {        data () {            return {                curPageIndex: 1,                eachPageSize: 7,            }        },        components: {            comment: Comment,            page: Page        },    }

它有2个子组件,分别是comment.vue和page.vue,通过动态绑定数据,进行父子间组件通信,我是这样认为的,对于 当前在第几页 应当由 page.vue传递给app.vue,所以这里我们使用 双向绑定,其余的如 params, url, isSync,即向后台请求数据的东西以及是否同步或异步操作。

接下来,看下comment.vue评论组件

    .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;    }        {{ totalCommentCount }}  条评论                {{ comment.name }}                    {{ comment.context }}    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;        }    }

这里的 getData.js 将在下面提到,是我们获取数据的位置。
loading: 本意是在跳转页码加载评论时,对于当前评论加载0.5的透明度的遮罩,然后ajax通过它的回调函数来取消遮罩,现在这样就不能实现了,只能强行写下,然而是没有用的..
hasComment: comment组件第一次加载的时候,我们就去请求获得总共的数据长度,如果没有数据,则不显示comment组件布局内容
·curPageIndex·: 通过父组件app传递下来,使用的是props
这些数据,我们都设置一个默认值与类型比较好。
page.vue

    .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;    }                {{ pageIndex }}    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 

主要是个对于 组件事件的运用,=最常见的click事件,以及class与style的绑定,根据 curPageIndex与this.pageIndex来比较,判断是否拥有这个class,通过computed计算属性,来获得 页码数组 因为会根据当前页 有所变化,created的时候 计算出总页码。
最后一个是 目前生成获取静态数据的js文件.

// let data = {//     avatar: '',  头像//     name: '',  用户名//     context: '', 评论内容// }let dataArr = [];function randomStr (len) {    return Math.random().toString(36).substr(len);}function initData () {    for (var i = 0; igithub地址#webpack、JavaScript、vue.js#

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部