摘要：上一篇文章中我們已經(jīng)實現(xiàn)了評論的發(fā)布功能，現(xiàn)在要實現(xiàn)回復(fù)評論的功能，，首先呢，要知道你回復(fù)的是哪一條評論，所以我們這里要或得評論的，當(dāng)點擊評論的時候?qū)崿F(xiàn)評論的回復(fù)，這里用到，把該方法放到中，這里叫做，然后在里面的里面定義一個參數(shù)，把賦給的值

上一篇文章中我們已經(jīng)實現(xiàn)了評論的發(fā)布功能，現(xiàn)在要實現(xiàn)回復(fù)評論的功能，，首先呢，要知道你回復(fù)的是哪一條評論，所以我們這里要或得評論的id，當(dāng)點擊評論的時候?qū)崿F(xiàn)評論的回復(fù)，這里用到@click="reply(item)"，把該方法放到methods中，這里叫做item.id，然后在new vue里面的data里面定義一個參數(shù)，把item.id賦給comment_id,comment_id的值一開始為空,然后在UIChatBox.open里的ret函數(shù)參數(shù)里面調(diào)用comment_id: vm.comment_id

data:{
    comment_id: null
}
methods: {
                reply: function (item) {
                    this.comment_id = item.id
                }
            }
            

這里已經(jīng)獲取了comment_id的值，當(dāng)回復(fù)時應(yīng)該讓手機默認(rèn)鍵盤彈出，輸入框或得焦點，，這里用到了UIChatBox.popupKeyboard();然后當(dāng)你回復(fù)時，一般常見的會有回復(fù)：“某某”的評論或者“@”發(fā)表評論人的評論，所以呢，這里要或得發(fā)表評論的用戶信息，，在data里面設(shè)置一個user額變量，再將item的用戶id賦給user，所以綜上所述，代碼如下

data:{
                user: JSON.parse(localStorage.getItem("user")),
                comment_id: null,
                comments: []
            }，
methods: {
                reply: function (item) {
                    this.comment_id = item.id
                    UIChatBox.popupKeyboard();
                    UIChatBox.value({
                        msg: "@" + item.user.username + " "
                    });            //設(shè)置輸入框的值
                }
            }

到這里，我們回復(fù)的功能就已經(jīng)基本實現(xiàn)了，以下是完整代碼

html

        

            

                

                    

                        
                    
                    

                        
{{item.user.username}} 角色 {{item.id}}
                        
{{item.user.created_at}}
                    
                
                

                    {{item.content}}
                
            
        
  
    
js
apiready = function(){
        var id=api.pageParam.id;
        var UIChatBox = api.require("UIChatBox");

        var vm=new Vue({
            el:"#app",
            data:{
                user: JSON.parse(localStorage.getItem("user")),
                comment_id: null,
                comments: []
            },
            methods: {
                reply: function (item) {
                    this.comment_id = item.id
                    UIChatBox.popupKeyboard();
                    UIChatBox.value({
                        msg: "@" + item.user.username + " "
                    });
                }
            },
            created:function(){
                var that=this;
                app.get("news/"+id + "/comments",function(data){
                    that.comments=data.data;
                    // console.log(data)
                },function(err){

                })
            }
        });


        // app.alert(localStorage.getItem("token"))
        
        UIChatBox.open({
            style:{
                indicator:{
                    target:"both"
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.eventType == "send") {
                    //post到服務(wù)端接口
                    app.post("news/" + id + "/comments", {
                        comment_id: vm.comment_id,
                        content: ret.msg
                    }, function (data) {
                        vm.comments.push(data)
                        api.toast({
                            msg: "發(fā)送成功"
                        });
                        UIChatBox.closeKeyboard();
                        vm.comment_id = null
                    }, function (xhr) {
                        switch (xhr.status) {
                            case 422:
                                api.toast({
                                    msg: xhr.responseJSON.content[0]
                                });
                                break;
                        }
                    })
                }
            } else {
                alert(JSON.stringify(err));
            }
        });
        

    };

補充說明，當(dāng)我們回復(fù)別人的評論時，別人發(fā)表的評論用戶頭像在左邊，本人發(fā)布的回復(fù)或者評論頭像在右邊，這里有點像qq、微信的聊天界面，大家可以想象以下，，所以這里我們要判斷以下讓列表中的頭像靠左或靠右，如果評論item.user_id 等于user.id時，說明是作者本人發(fā)布，在這里就出現(xiàn)了以下代碼

:class="item.user_id == user.id ? "aui-pull-right" : """

當(dāng)符合item.user_id == user.id時添加aui框架中的aui-pull-right樣式，否則不添加。