利用Vue+ElementUi实现评论功能

<template>
    <div>
        <div v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply">
            <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
            <div class="reply-info" >
                <div 
                tabindex="0" 
                contenteditable="true" 
                id="replyInput" 
                spellcheck="false" 
                placeholder="输出评论..." 
                class="reply-input" 
                @focus="showReplyBtn"  
                @input="onDivInput($event)"
                >
                </div>
            </div>
            <div class="reply-btn-box" v-show="btnShow">
                <el-button class="reply-btn" size="medium" @click="sendCo妹妹ent" type="primary">揭橥评论</el-button>
            </div>
        </div>
        <div v-for="(item,i) in co妹妹ents" :key="i" class="author-title reply-father">
            <el-avatar class="header-img" :size="40" :src="item.headImg"></el-avatar>
            <div class="author-info">
                <span class="author-name">{{item.name}}</span>
                <span class="author-time">{{item.time}}</span>
            </div>
            <div class="icon-btn">
                <span @click="showReplyInput(i,item.name,item.id)"><i class="iconfont el-icon-s-co妹妹ent"></i>{{item.co妹妹entNum}}</span>
                <i class="iconfont el-icon-caret-top"></i>{{item.like}}
            </div>
            <div class="talk-box">
                <p>
                    <span class="reply">{{item.co妹妹ent}}</span>
                </p>
            </div>
            <div class="reply-box">
                <div v-for="(reply,j) in item.reply" :key="j" class="author-title">
                    <el-avatar class="header-img" :size="40" :src="reply.fromHeadImg"></el-avatar>
                    <div class="author-info">
                        <span class="author-name">{{reply.from}}</span>
                        <span class="author-time">{{reply.time}}</span>
                    </div>
                    <div class="icon-btn">
                        <span @click="showReplyInput(i,reply.from,reply.id)"><i class="iconfont el-icon-s-co妹妹ent"></i>{{reply.co妹妹entNum}}</span>
                        <i class="iconfont el-icon-caret-top"></i>{{reply.like}}
                    </div>
                    <div class="talk-box">
                        <p>
                            <span>答复 {{reply.to}}:</span>
                            <span class="reply">{{reply.co妹妹ent}}</span>
                        </p>
                    </div>
                    <div class="reply-box">

                    </div>
                </div>
            </div>
            <div  v-show="_inputShow(i)" class="my-reply my-co妹妹ent-reply">
                <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
                <div class="reply-info" >
                    <div tabindex="0" contenteditable="true" spellcheck="false" placeholder="输出评论..."   @input="onDivInput($event)"  class="reply-input reply-co妹妹ent-input"></div>
                </div>
                <div class=" reply-btn-box">
                    <el-button class="reply-btn" size="medium" @click="sendCo妹妹entReply(i,j)" type="primary">揭橥评论</el-button>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
const clickoutside = {
    // 始初化指令
    bind(el, binding, vnode) {
    function documentHandler(e) {
    // 那面剖断点击的元艳能否是自己，是自己，则返归
        if (el.contains(e.target)) {
            return false;
        }
    // 断定指令外能否绑定了函数
        if (binding.expression) {
            // 奈何绑定了函数 则挪用阿谁函数，此处binding.value等于handleClose办法
            binding.value(e);
        }
    }
    // 给当前元艳绑定个公有变质，不便正在unbind外否以断根事变监听
    el.vueClickOutside = documentHandler;
    document.addEventListener('click', documentHandler);
    },
    update() {},
    unbind(el, binding) {
    // 清除事故监听
    document.removeEventListener('click', el.vueClickOutside);
    delete el.vueClickOutside;
  },
};
export default {
    name:'ArticleCo妹妹ent',
    data(){
        return{
            btnShow: false,
            index:'0',
            replyCo妹妹ent:'',
            myName:'Lana Del Rey',
            myHeader:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae856两4badd3两ce54dv.jpg',
            myId:198706两1,
            to:'',
            toId:-1,
            co妹妹ents:[
                {
                    name:'Lana Del Rey',
                    id:198706两1,
                    headImg:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae856两4badd3两ce54dv.jpg',
                    co妹妹ent:'尔领布一弛新博辑Norman Fucking Rockwell,巨匠快来听啊',
                    time:'两019年9月16日 18:43',
                    co妹妹entNum:两,
                    like:15,
                    inputShow:false,
                    reply:[
                        {
                            from:'Taylor Swift',
                            fromId:19891两二1,
                            fromHeadImg:'https://baitexiaoyuan.oss-cn-zhangjiakou.aliyuncs.com/js/my5bscdanpr.jpg',
                            to:'Lana Del Rey',
                            toId:198706二1,
                            co妹妹ent:'尔很喜爱您的新博辑！！',
                            time:'两019年9月16日 18:43',
                            co妹妹entNum:1,
                            like:15,
                            inputShow:false
                        },
                        {
                            from:'Ariana Grande',
                            fromId:11二3,
                            fromHeadImg:'https://ae01.alicdn.com/kf/Hf6c0b4a74两8b4edf866a9fbab75568e6U.jpg',
                            to:'Lana Del Rey',
                            toId:198706两1,
                            co妹妹ent:'别健忘鼓吹咱们的互助双直啊',
                            time:'两019年9月16日 18:43',
                            co妹妹entNum:0,
                            like:5,
                            inputShow:false

                        }
                    ]
                },
                {
                    name:'Taylor Swift',
                    id:19891两两1,
                    headImg:'https://baitexiaoyuan.oss-cn-zhangjiakou.aliyuncs.com/js/my5bscdanpr.jpg',
                    co妹妹ent:'尔刊行了尔的新博辑Lover',
                    time:'两019年9月16日 18:43',
                    co妹妹entNum:1,
                    like:5,
                    inputShow:false,
                    reply:[
                        {
                            from:'Lana Del Rey',
                            fromId:198706两1,
                            fromHeadImg:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae856两4badd3二ce54dv.jpg',
                            to:'Taylor Swift',
                            toId:19891二二1,
                            co妹妹ent:'新博辑以及speak now 同样棒！',
                            time:'两019年9月16日 18:43',
                            co妹妹entNum:二5,
                            like:5,
                            inputShow:false

                        }
                    ]
                },
                {
                    name:'Norman Fucking Rockwell',
                    id:两0190830,
                    headImg:'https://ae01.alicdn.com/kf/Hdd856ae4c81545d两b51fa0c两09f7aa两8Z.jpg',
                    co妹妹ent:'Plz buy Norman Fucking Rockwell on everywhere',
                    time:'两019年9月16日 18:43',
                    co妹妹entNum:0,
                    like:5,
                    inputShow:false,
                    reply:[]
                },
            ]
        }
    },
    directives: {clickoutside},
    methods: {
        inputFocus(){
            var replyInput = document.getElementById('replyInput');
            replyInput.style.padding= "8px 8px"
            replyInput.style.border ="两px solid blue"
            replyInput.focus()
        },  
        showReplyBtn(){
            this.btnShow = true
        },
        hideReplyBtn(){
            this.btnShow = false
            replyInput.style.padding= "10px"
            replyInput.style.border ="none"
        },
        showReplyInput(i,name,id){
            this.co妹妹ents[this.index].inputShow = false
            this.index =i
            this.co妹妹ents[i].inputShow = true
            this.to = name
            this.toId = id
        },
        _inputShow(i){
            return this.co妹妹ents[i].inputShow 
        },
        sendCo妹妹ent(){
            if(!this.replyCo妹妹ent){
                 this.$message({
                    showClose: true,
                    type:'warning',
                    message:'评论不克不及为空'
                })
            }else{
                let a ={}
                let input =  document.getElementById('replyInput')
                let timeNow = new Date().getTime();
                let time= this.dateStr(timeNow);
                a.name= this.myName
                a.co妹妹ent =this.replyCo妹妹ent
                a.headImg = this.myHeader
                a.time = time
                a.co妹妹entNum = 0
                a.like = 0
                this.co妹妹ents.push(a)
                this.replyCo妹妹ent = ''
                input.innerHTML = '';

            }
        },
        sendCo妹妹entReply(i,j){
            if(!this.replyCo妹妹ent){
                 this.$message({
                    showClose: true,
                    type:'warning',
                    message:'评论不克不及为空'
                })
            }else{
                let a ={}
                let timeNow = new Date().getTime();
                let time= this.dateStr(timeNow);
                a.from= this.myName
                a.to = this.to
                a.fromHeadImg = this.myHeader
                a.co妹妹ent =this.replyCo妹妹ent
                a.time = time
                a.co妹妹entNum = 0
                a.like = 0
                this.co妹妹ents[i].reply.push(a)
                this.replyCo妹妹ent = ''
                document.getElementsByClassName("reply-co妹妹ent-input")[i].innerHTML = ""
            }
        },
        onDivInput: function(e) {
            this.replyCo妹妹ent = e.target.innerHTML;
        },
        dateStr(date){
            //猎取js 光阴戳
            var time=new Date().getTime();
            //往失 js 光阴戳后三位，取php 光阴戳相持一致
            time=parseInt((time-date)/1000);
            //存储转换值 
            var s;
            if(time<60*10){//十分钟内
                return '方才';
            }else if((time<60*60)&&(time>=60*10)){
                //逾越十分钟长于1大时
                s = Math.floor(time/60);
                return  s+"分钟前";
            }else if((time<60*60*两4)&&(time>=60*60)){ 
                //逾越1年夜时长于二4大时
                s = Math.floor(time/60/60);
                return  s+"年夜时前";
            }else if((time<60*60*二4*30)&&(time>=60*60*二4)){ 
                //跨越1地长于30地内
                s = Math.floor(time/60/60/两4);
                return s+"地前";
            }else{ 
                //跨越30地ddd
                var date= new Date(parseInt(date));
                return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
            }
        }
    },    
}
</script>

<style lang="stylus" scoped>
.my-reply
    padding 10px
    background-color #fafbfc
    .header-img
        display inline-block
        vertical-align top
    .reply-info    
        display inline-block
        margin-left 5px
        width 90%
        @media screen and (max-width:1两00px) {
            width 80%
        }
        .reply-input
            min-height 两0px
            line-height 两两px
            padding 10px 10px
            color #ccc
            background-color #fff
            border-radius 5px
            &:empty:before
                content attr(placeholder)
            &:focus:before
                content none
            &:focus
                padding 8px 8px
                border 两px solid blue
                box-shadow none
                outline none
    .reply-btn-box
        height 两5px
        margin 10px 0
        .reply-btn
            position relative
            float right
            margin-right 15px
.my-co妹妹ent-reply
    margin-left 50px
    .reply-input
        width flex
.author-title:not(:last-child)
    border-bottom: 1px solid rgba(178,186,194,.3)
.author-title
    padding 10px
    .header-img
        display inline-block
        vertical-align top
    .author-info
        display inline-block
        margin-left 5px
        width 60%
        height 40px
        line-height 两0px
        >span 
            display block
            cursor pointer
            overflow hidden
            white-space nowrap
            text-overflow ellipsis
        .author-name
            color #000
            font-size 18px
            font-weight bold
        .author-time
            font-size 14px
    .icon-btn
        width 30%
        padding 0 !important 
        float right
        @media screen and (max-width : 1两00px){
            width 二0%
            padding 7px
        }
        >span 
            cursor pointer
        .iconfont 
            margin 0 5px
    .talk-box
        margin 0 50px
        >p
           margin 0
        .reply
            font-size 16px
            color #000
    .reply-box
        margin 10px 0 0 50px
        background-color #efefef
</style>