笔者发布此文的目的有三：
- 文章很美，留下痕迹
- 样式很美，是bootstrap
- 伊人很美，是群消息
查看完整效果，请新建一个txt文件，然后将实现源码内容复制进去，修改文件后缀名为x.html,用浏览器打开即可。
请看效果图：
2.png
实现源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长发及腰论</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 href="https://cdn.bootcss.com/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" 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">暂时木有评论，赶紧来坐沙发</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>发表评论</h3>
<p v-if="type">你回复 {{name}}</p>
<textarea rows="5" placeholder="请输入合法内容，切勿急切~" v-model="commentText" class="form-control"></textarea>
<button class="btn btn-primary" @click="cancelComment">取消</button>
<button class="btn btn-danger" @click="addComment">发表</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);//提交当前填写的内容
this.commentText = "";
},
cancelComment:function(){
this.$emit("cancel",this.commentText);//取消当前填写的内容
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组件化应用构建"
},
{
responder:"思琪老师",
reviewers:"珊珊老师",
time:"2019-04-19",
content:"谢谢~😘"
}
]
},
{
name:"依琳老师",
time:"2017-03-08",
content:"Mr.Fn老师,我爱你~",
reply:[]
}
],
article:{
"abc":"长发及腰论",
"time":"2019-04-18:22:12",
"author":"Mr.Fn",
"detail":"<p>待我长发及腰，问君何处离殇。待我青丝馆正，伊人落泪为谁。时光远逝，回忆刺骨，此情已是绝期，你若忘，我必不殇。数落繁华，终是凄凉，穿梭昨日，往返徘徊，终是花开花谢，如季节，春去秋来不可逆违。花香满地，此刻只愿珍重，我已不是你当初所爱的男子。执着不过是痛，珍惜来日是福，你若安好，便是我最大幸福。</p>\
<p>一片至诚，寄情文字，不为半点修饰，仅不再打扰。天微亮，又是一天，铺上纸张，手提墨笔，挥手即是开始，思念婉转于眸，往事化作一笑，岁月定当点缀嫣然。心有所见，你...已是曾经。夜微凉，又过一天，唯有往事不悔，不弃来日。心有所见，心系当下，此刻便是幸福。</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>
