(精) vue中用父子组件结合实现评论回复功能

最新推荐文章于 2024-03-12 14:25:39 发布

薯条铭

最新推荐文章于 2024-03-12 14:25:39 发布

阅读量7.1k

点赞数 1

分类专栏： vue评论回复文章标签： vue 评论回复文章 vue评论回复

vue评论回复专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考文档https://blog.csdn.net/weixin_35987513/article/details/53748707

项目中分别有三个组件

1.dynamic (父组件)

2.reply (子组件评论的内容区块)

3.commenttext (子组件评论的输入框)

实现效果图

引入部分

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<script src="https://cdn.bootcss.com/vue/2.1.6/vue.min.js"></script>
<link rel="stylesheet" href="style/weui.css"/>
<link rel="stylesheet" href="style/weui2.css"/>
<script src="zepto.min.js"></script>

css部分

<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .comment_input {
        padding: 10px 15px;
        text-align: center;
        background-color: #ededed;
        border-top: solid 1px #e1e1e1;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .comment_input input {
        width: 70%;
        height: 30px;
        border: 1px solid rgba(102, 102, 102, 0.8);
        border-radius: 30px;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 0 10px;
    }

    .comment_input p {
        padding: 5px 10px;
        color: #fc6700;
        line-height: 30px;
        display: inline-block;
    }

    .follow_clickcolor:not(.weui_btn_disabled):active {
        background-color: #e1e1e1;
    }
    
    /*回复*/
    .good a {
        float: right;
        color: #808080;
    }
    .comment:after {
        clear: both;
        content: '';
        display: block;
        width: 0;
        height: 0;
        visibility: hidden;
    }
    .comment {
        *zoom: 1;
        padding: 5px 0;
        border-top: 1px solid #eee;
    }



    .comment-left img {
        width: 30px;
        height: 30px;
    }

    .comment-right {
        float: left;
        width: 100%;
    }

    .comment-text {
        line-height: 18px;
    }

    .comment-text span {
        color: #eb7350;
    }
</style>

html部分

<body class="blogArticle">
<div class="main">
    <div class="container">
        <div class="col-md-9 rightBox" id="comment">
            <commemt-content v-bind:comment="comment" v-on:change="changCommmer"></commemt-content>
            <comment-textarea v-bind:type="type" v-bind:name="oldComment" v-on:submit="addComment"
                              v-on:canel="canelCommit"></comment-textarea>
        </div>
    </div>
</div>
</div>
</body>

功能部分

<script type="text/javascript">

    Vue.component('commemt-content', {
        template: '\
   <div class="commentBox">\
      <p v-if="comment.length==0">暂无评论，我来发表第一篇评论！</p>\
      <div v-else>\
         <div class="comment weui-comment-item" style="padding-left: 65px;" v-for="(item,index) in comment" v-bind:index="index" >\
         <div class="weui-comment-li follow_click dynamic">\
         <img style="width: 25px;height: 25px"class="follow_zan "src="${pageContext.request.contextPath}/img/newaddimg/icon_follow_5.png"alt="">\
        </div>\
        <div class="userinfo">\
        <strong class="nickname">{{item.name}}</strong>\
         <img class="avatar"style="width: 50px;height: 50px;border-radius:50px;border: 1px solid #999999"src="">\
        </div>\
        <div>\
        <span class="time" style="padding-top: 0.625em;font-size: 14px">{{item.time}}</span>\
        <span style="margin-left: 5px;font-size: 14px" class="follow_clickcolor" @click="changeCommenter(reply.responder,index)">回复</span>\
        </div>\
        <div class="comment" @click="changeCommenter(item.name,index)">{{item.content}}</div>\
        <div v-if="item.reply.length > 0">\
            <div class="comment-list reply" v-for="reply in item.reply">\
                            <div class="comment" user="self">\
                                <div class="comment-right">\
                                   <div class="comment-text">\
                                   <span class="user">{{reply.responder}}<span style="color: #333333">回复</span>{{reply.reviewers}}:</span>\
                                   <span @click="changeCommenter(reply.responder,index)" style="color: #333333">{{reply.content}}</span>\
                                    </div>\
                                </div>\
                            </div>\
            </div>\
        </div>\
          \
         </div>\
      </div>\
   </div>',
        props: ['comment'],
        methods: {
            changeCommenter: function (name, index) {
                this.$emit("change", name, index);
            }
        }
    });

    Vue.component('commentTextarea', {
        template: '\
   <div class="commentBox">\
   \
       <div class="comment_input" style="background-color: #FFFFFF">\
       <b v-if="type">你回复&nbsp;{{name}}</b>\
        <input type="text" v-model="commentText" placeholder="请输入你想说的话...">\
        <button class="btn" style="margin-bottom: 0"  @click="addComment">发送</button>\
        </div>\
   </div>',
        props: ['type', 'name'],
        data: function () {
            return {commentText: ""}
        },
        methods: {
            addComment: function () {
                this.$emit("submit", this.commentText);
                this.commentText = "";
            },
            canelComment: function () {
                this.$emit("canel");
                this.commentText = "";
            }
        }
    });

    var comment = new Vue({
        el: "#comment",
        data: {
            commenter: "session",   //评论人
            type: 0,                //0为评论作者1为评论别人的评论2为评论别人的别人
            oldComment: null,
            chosedIndex: -1,        //被选中的评论的index

            comment: [
                {
                    name: "有毒的黄同学",
                    time: "2016-08-17",
                    content: "好,讲得非常好，good",
                    reply: [
                        {
                            responder: "有毒的黄同学",
                            reviewers: "傲娇的",
                            time: "2016-09-05",
                            content: "你说得对"
                        },
                        {
                            responder: "傲娇的",
                            reviewers: "有毒的黄同学",
                            time: "2016-09-05",
                            content: "很强"
                        }
                    ]
                },
                {
                    name: "Freedom小黄",
                    time: "2016-08-17",
                    content: "好,讲得非常好，good",
                    reply: []
                }
            ]
        },
        methods: {
            addComment: function (data) {
                if (this.type == 0) {
                    this.comment.push({
                        name: 'session',
                        time: getTime(),
                        content: data,
                        reply: []
                    });
                    //服务器端变
                } else if (this.type == 1) {
                    this.comment[this.chosedIndex].reply.push({
                        responder: 'session',
                        reviewers: this.comment[this.chosedIndex].name,
                        time: getTime(),
                        content: data
                    });
                    this.type = 0;
                }
            },
            changCommmer: function (name, index) {
                this.oldComment = name;
                this.chosedIndex = index;
                this.type = 1;
            },
            canelCommit: function () {
                this.type = 0;
            }
        }
    })


    //格式化时间
    function getTime() {
        var now = new Date();
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var day = now.getDate();
        month.length < 2 ? "0" + month : month;
        day.length < 2 ? "0" + day : day;
        return year + "-" + month + "-" + day;
    }
</script>

薯条铭

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
(精) vue中用父子组件结合实现评论回复功能

参考文档https://blog.csdn.net/weixin_35987513/article/details/53748707项目中分别有三个组件1.dynamic (父组件)2.reply (子组件评论的内容区块)3.commenttext (子组件评论的输入框)实现效果图引入部分&lt;meta name="viewport" content="width=device-width,...
复制链接

扫一扫