摘要:上一篇文章中我們已經(jīng)實(shí)現(xiàn)了評(píng)論的發(fā)布功能,現(xiàn)在要實(shí)現(xiàn)回復(fù)評(píng)論的功能,,首先呢,要知道你回復(fù)的是哪一條評(píng)論,所以我們這里要或得評(píng)論的,當(dāng)點(diǎn)擊評(píng)論的時(shí)候?qū)崿F(xiàn)評(píng)論的回復(fù),這里用到,把該方法放到中,這里叫做,然后在里面的里面定義一個(gè)參數(shù),把賦給的值
上一篇文章中我們已經(jīng)實(shí)現(xiàn)了評(píng)論的發(fā)布功能,現(xiàn)在要實(shí)現(xiàn)回復(fù)評(píng)論的功能,,首先呢,要知道你回復(fù)的是哪一條評(píng)論,所以我們這里要或得評(píng)論的id,當(dāng)點(diǎn)擊評(píng)論的時(shí)候?qū)崿F(xiàn)評(píng)論的回復(fù),這里用到@click="reply(item)",把該方法放到methods中,這里叫做item.id,然后在new vue里面的data里面定義一個(gè)參數(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ù)時(shí)應(yīng)該讓手機(jī)默認(rèn)鍵盤彈出,輸入框或得焦點(diǎn),,這里用到了UIChatBox.popupKeyboard();然后當(dāng)你回復(fù)時(shí),一般常見的會(huì)有回復(fù):“某某”的評(píng)論或者“@”發(fā)表評(píng)論人的評(píng)論,所以呢,這里要或得發(fā)表評(píng)論的用戶信息,,在data里面設(shè)置一個(gè)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)基本實(shí)現(xiàn)了,以下是完整代碼
htmljs 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)); } }); };
補(bǔ)充說(shuō)明,當(dāng)我們回復(fù)別人的評(píng)論時(shí),別人發(fā)表的評(píng)論用戶頭像在左邊,本人發(fā)布的回復(fù)或者評(píng)論頭像在右邊,這里有點(diǎn)像qq、微信的聊天界面,大家可以想象以下,,所以這里我們要判斷以下讓列表中的頭像靠左或靠右,如果評(píng)論item.user_id 等于user.id時(shí),說(shuō)明是作者本人發(fā)布,在這里就出現(xiàn)了以下代碼
:class="item.user_id == user.id ? "aui-pull-right" : """
當(dāng)符合item.user_id == user.id時(shí)添加aui框架中的aui-pull-right樣式,否則不添加。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/81948.html
摘要:關(guān)于作者程序開發(fā)人員,不拘泥于語(yǔ)言與技術(shù),目前主要從事和前端開發(fā),使用和,端使用混合式開發(fā)。個(gè)人網(wǎng)站最近剛寫了一個(gè)手機(jī)在線播放的電影站開發(fā)混合式系列第集技術(shù)選型是一套簡(jiǎn)潔優(yōu)雅的開發(fā)框架。 關(guān)于作者 程序開發(fā)人員,不拘泥于語(yǔ)言與技術(shù),目前主要從事PHP和前端開發(fā),使用Laravel和VueJs,App端使用Apicloud混合式開發(fā)。合適和夠用是最完美的追求。 個(gè)人網(wǎng)站:http://...
摘要:關(guān)于作者程序開發(fā)人員,不拘泥于語(yǔ)言與技術(shù),目前主要從事和前端開發(fā),使用和,端使用混合式開發(fā)。個(gè)人網(wǎng)站最近剛寫了一個(gè)手機(jī)在線播放的電影站開發(fā)混合式系列第集技術(shù)選型是一套簡(jiǎn)潔優(yōu)雅的開發(fā)框架。 關(guān)于作者 程序開發(fā)人員,不拘泥于語(yǔ)言與技術(shù),目前主要從事PHP和前端開發(fā),使用Laravel和VueJs,App端使用Apicloud混合式開發(fā)。合適和夠用是最完美的追求。 個(gè)人網(wǎng)站:http://...
摘要:以上就是對(duì)評(píng)論模塊的設(shè)計(jì)與功能實(shí)現(xiàn),歡迎各位大佬提出代碼優(yōu)化建議,共同成長(zhǎng)代碼出自開源項(xiàng)目,致力于打造全平臺(tái)型全棧精品開源項(xiàng)目。 評(píng)論模塊在很多系統(tǒng)中都有,CodeRiver河碼 作為類似程序員客棧的溝通協(xié)作平臺(tái)自然也不會(huì)少。 前端界面是參考了簡(jiǎn)書的評(píng)論模塊,專門寫了一篇文章介紹實(shí)現(xiàn)步驟: vue + element-ui + scss 仿簡(jiǎn)書評(píng)論模塊 感興趣的可以看看。 項(xiàng)目地...
摘要:所以,我們運(yùn)用這個(gè)函數(shù),也可以理解為將異步的代碼轉(zhuǎn)換為同步執(zhí)行更簡(jiǎn)單的說(shuō)就是,上面的代碼執(zhí)行完之后,里面的代碼才能運(yùn)行,以下是代碼 這段時(shí)間再用apicloud的混合開發(fā),其中在運(yùn)用swiper插件這一塊遇到了一些問(wèn)題,多虧了我們老大經(jīng)驗(yàn)豐富,讓我們這些后輩少采一些坑,,在這里做一下總結(jié),主要是Vue.nextTick()函數(shù)的用法 坑:當(dāng)時(shí)在運(yùn)用swiper插件的時(shí)候,沒用用vue進(jìn)...
閱讀 2024·2021-11-22 15:29
閱讀 3321·2021-10-14 09:43
閱讀 1311·2021-10-08 10:22
閱讀 3400·2021-08-30 09:46
閱讀 1482·2019-08-30 15:55
閱讀 1980·2019-08-30 15:44
閱讀 910·2019-08-30 14:19
閱讀 1514·2019-08-30 13:13
{{item.user.username}} 角色 {{item.id}}
{{item.user.created_at}}