筆者發(fā)布此文的目的有三：
- 文章很美，留下痕跡
- 樣式很美，是bootstrap
- 伊人很美，是群消息
查看完整效果，請新建一個txt文件，然后將實現(xiàn)源碼內(nèi)容復制進去，修改文件后綴名為x.html,用瀏覽器打開即可。
請看效果圖：
2.png
實現(xiàn)源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>長發(fā)及腰論</title>
<style>
.article h1{
text-align: center;
color: rgb(26,88,72);
}
.article p{
font: 300;
color: rgb(105,109,116);
text-align: center;
}
.article-detail{
text-indent: 2em;
font: 600;
color: rgb(105,109,116);
}
.commentBox h3{
background-color: rgb(235,232,226);
color:rgb(121,115,121);
font-size: large;
line-height: 50px;
padding-left: 20px;
}
.commentBox b{
color: rgb(26,88,72);
}
.commentBox span{
color:black;
}
.divTwoReply {
text-indent: 2em;
}
</style>
<link rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
</head>
<body>
<div id="comment" v-show= "isShow" class="container">
<article-main v-bind:article="article"></article-main>
<comment-list v-bind:comment="comment" v-on:change="changeCommer"></comment-list>
<comment-area v-bind:type="type" v-bind:name="oldComment" v-on:submit="addComment" v-on:cancel="cancelCommit"></comment-area>
</div>
<template id="article-temp">
<div>
<div class='article text-xs-center'>
<h1>{{article.abc}}</h1>
<p><span>{{article.time}}</span><span>作者:{{article.author}}</span></p>
</div>
<div class='article-detail' v-html='article.detail'></div>
</div>
</template>
<template id="comment_temp">
<div class="commentBox">
<h3>評論列表</h3>
<p v-if="comment.length==0">暫時木有評論，趕緊來坐沙發(fā)</p>
<div v-else>
<div id="comment" v-for="(item,index) in comment" v-bind:index="index">
<b>{{item.name}} <span>{{item.time}}</span> <a href="javascript:;" title="點擊回復" @click="changeCommenter(item.name,index)">回復</a></b>
<p>{{item.content}}</p>
<div class="divTwoReply" v-if="item.reply.length > 0">
<div v-if="item.reply" v-for="reply in item.reply">
<b>{{reply.responder}} 回復 {{reply.reviewers}}<span>{{reply.time}}</span> <a href="javascript:;" title="回復" @click="changeCommenter(reply.responder,index)">回復</a></b>
<p>{{reply.content}}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<template id="comment_area_temp">
<div class="commentBox">
<h3>發(fā)表評論</h3>
<p v-if="type">你回復 {{name}}</p>
<textarea rows="5" placeholder="請輸入合法內(nèi)容，切勿急切~" v-model="commentText" class="form-control"></textarea>
<button class="btn btn-primary" @click="cancelComment">取消</button>
<button class="btn btn-danger" @click="addComment">發(fā)表</button>
</div>
</template>
<script>
Vue.component("article-main",{
template:"#article-temp",
props:['article'],
methods:{
}
});
Vue.component("comment-list",{
template:"#comment_temp",
props:['comment'],
methods:{
changeCommenter:function(name,index){
this.$emit("change",name,index);
}
}
});
Vue.component('comment-area',{
template:"#comment_area_temp",
props:['type','name'],
data:function(){
return {commentText:""}
},
methods:{
addComment:function(){
this.$emit("submit",this.commentText);//提交當前填寫的內(nèi)容
this.commentText = "";
},
cancelComment:function(){
this.$emit("cancel",this.commentText);//取消當前填寫的內(nèi)容
this.commentText = "";
}
}
});
var dic = {
isShow:true,
type:0,
commter:"Mr.Fn",
oldComment:null,
choooseIndex:-1,
arr:['Mr.Fn',"思琪","珊珊"],
comment:[
{
name:"珊珊老師",
time:"2019-4-17",
content:"今天講的課題是什么呢？",
reply:[
{
responder:"珊珊老師",
reviewers:"依琳老師",
time:"2019-04-18",
content:"從原生JS蛻變-vueJS組件化應用構(gòu)建"
},
{
responder:"思琪老師",
reviewers:"珊珊老師",
time:"2019-04-19",
content:"謝謝~??"
}
]
},
{
name:"依琳老師",
time:"2017-03-08",
content:"Mr.Fn老師,我愛你~",
reply:[]
}
],
article:{
"abc":"長發(fā)及腰論",
"time":"2019-04-18:22:12",
"author":"Mr.Fn",
"detail":"<p>待我長發(fā)及腰，問君何處離殤。待我青絲館正，伊人落淚為誰。時光遠逝，回憶刺骨，此情已是絕期，你若忘，我必不殤。數(shù)落繁華，終是凄涼，穿梭昨日，往返徘徊，終是花開花謝，如季節(jié)，春去秋來不可逆違?；ㄏ銤M地，此刻只愿珍重，我已不是你當初所愛的男子。執(zhí)著不過是痛，珍惜來日是福，你若安好，便是我最大幸福。</p>\
<p>一片至誠，寄情文字，不為半點修飾，僅不再打擾。天微亮，又是一天，鋪上紙張，手提墨筆，揮手即是開始，思念婉轉(zhuǎn)于眸，往事化作一笑，歲月定當點綴嫣然。心有所見，你...已是曾經(jīng)。夜微涼，又過一天，唯有往事不悔，不棄來日。心有所見，心系當下，此刻便是幸福。</p>\
<p>昔日，你是我最好的初見，我是你最好的夙愿。許一世繁華，愿此生不分離。卻無奈，無奈，此刻已成過往，心有牽掛，也已徒勞。道世事無常，時光殘忍。只愿來世不再相見，如此便不相戀。唯借一縷清風，渡我傷心。今夜月圓，唯有默默祈禱，此刻幸福。</p>\
<p>梧桐雨，三更雨，不道離情正苦。我不怪世道無情，只怪相遇錦瑟年華。愿來日幸福，今日無悔。珍重......</p>"
}
};
//組件通信
var myvue = new Vue({
el:"#comment",
data:dic,
methods:{
changeCommer:function(name,index){
this.oldComment = name;
this.choooseIndex = index;
this.type = 1;
},
cancelCommit:function(){
this.type = 0;
},
addComment:function(data){
if(this.type == 0){
this.comment.push({
name:"Mr.Fn",
time:this.getTime(),
content:data,
reply:[]
});
}else if(this.type == 1){
this.comment[this.choooseIndex].reply.push({
responder:"Mr.Fn",
reviewers:this.oldComment,
time :this.getTime(),
content:data,
});
}
},
getTime: function(){
var today = new Date();
var year = today.getFullYear();
var mouth = today.getMonth()+1;
var day = today.getDate();
return year+'年'+mouth+'月'+day+"日";
}
}
});
</script>
</body>
</html>
