Vue递归组件，实现多级评论 


 <div id="app">
　　　　　
        <multistage :comments="articleCommentTree" v-on:reply="reply"></multistage>

        <div>
            <input type="text" :placeholder="content">
            <input type="hidden" :value="toid">
            <input type="button" value="回复">
        </div>

    </div>

    <template id="temp1">
        <div >
            <!--定义这种可伸缩的div盒子时不能定死height，定死会发生溢出，从而造成元素堆积-->
            <div v-for="item in comments" class="cmt-layout" >
                    <div class="avatar">
                        <img src="https://z3.ax1x.com/2021/10/26/5Isix1.jpg" alt="5Isix1.jpg" />
                    </div> 
                    <span class="author">{{item.name}}</span>
                    <span class="time">{{item.time}}</span>                     
                    <DIV class="content">
                        <span>{{item.content}}</span>
                    </DIV>                                                    
                    <a class="reply" @click="reply(item.id,item.name)">回复</a>                  
                    <multistage :comments=item.reply_comment v-if="item.reply_comment" v-on="$listeners"></multistage>                                
            </div>
        </div>
        
      
    </template>

    <script src="js/main.js"></script>

　　main.js

  1 Date.prototype.format = function(fmt) {
  2     var o = {
  3         "M+": this.getMonth() + 1, //月份 
  4         "d+": this.getDate(), //日 
  5         "h+": this.getHours(), //小时 
  6         "m+": this.getMinutes(), //分 
  7         "s+": this.getSeconds(), //秒 
  8         "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
  9         "S": this.getMilliseconds() //毫秒 
 10     };
 11     if (/(y+)/.test(fmt)) {
 12         fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
 13     }
 14     for (var k in o) {
 15         if (new RegExp("(" + k + ")").test(fmt)) {
 16             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
 17         }
 18     }
 19     return fmt;
 20 }
 21 
 22 
 23 Vue.component("multistage", {
 24     template: "#temp1",
 25     data() {
 26         return {
 27             toid: "",
 28             content: "",
 29         }
 30     },
 31     props: ["comments"],
 32     methods: {
 33         reply(toid, content) {
 34             this.$emit("reply", [toid, content])
 35             console.log(toid)
 36         }
 37     }
 38 
 39 })
 40 
 41 
 42 
 43 
 44 var vue = new Vue({
 45     el: '#app',
 46     data: {
 47         toid: "",
 48         content: "",
 49         info: null,
 50         loading: true,
 51         errored: false,
 52         imgSrc: "https://imgtu.com/i/5Isix1",
 53         articleCommentTree: [{
 54                 id: 1,
 55                 name: "张三",
 56                 time: (new Date).format("yyyy-MM-dd hh:mm:ss"),
 57                 content: "今天天气真好！",
 58                 parent_id: 0,
 59                 reply_comment: [{
 60                     id: 2,
 61                     name: "李四",
 62                     time: (new Date).format("yyyy-MM-dd hh:mm:ss"),
 63                     content: "今天天气真好！",
 64                     parent_id: 1,
 65                     reply_comment: [{
 66                             id: 3,
 67                             name: "马路",
 68                             time: (new Date).format("yyyy-MM-dd hh:mm:ss"),
 69                             content: "今天天气真好！",
 70                             parent_id: 2,
 71                             reply_comment: [],
 72                         },
 73                         {
 74                             id: 4,
 75                             name: "马路",
 76                             time: (new Date).format("yyyy-MM-dd hh:mm:ss"),
 77                             content: "今天天气真好！",
 78                             parent_id: 2,
 79                             reply_comment: [],
 80                         }
 81                     ]
 82                 }]
 83             },
 84             {
 85                 id: 4,
 86                 name: "马路",
 87                 time: (new Date).format("yyyy-MM-dd hh:mm:ss"),
 88                 content: "今天天气真好！",
 89                 parent_id: 2,
 90                 reply_comment: [],
 91             }
 92         ]
 93     },
 94     mounted() {
 95         axios
 96             .get('https://api.coindesk.com/v1/bpi/currentprice.json')
 97             .then(response => (this.info = response.data.bpi))
 98             .catch((error) => {
 99                 console.log(error)
100                 this.errored = true
101             })
102             .finally(() => this.loading = false)
103     },
104     methods: {
105         reply(data) {
106             this.toid = data[0]
107             this.content = data[1]
108             console.log(this.toid)
109         }
110     }
111 })
View Code

总结：

一. css样式复习

1.块元素和行元素标签

2.可伸缩的div盒子不要定义height和width,否则元素溢出后会出现元素重叠

3.margin,padding

posted @ 2021-10-28 20:08  拥有人鱼线的程序猿  阅读(960)  评论(0)    收藏  举报