欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue评论组件案例

程序员文章站 2022-07-02 17:22:50
最近学习了Vue前端框架,在这里记录一下组件的用法,我自己试着写了一个评论的组件,大神看到勿喷,欢迎提出宝贵意见。 首先看一下效果图 用到的文件有: < ......

最近学习了vue前端框架,在这里记录一下组件的用法,我自己试着写了一个评论的组件,大神看到勿喷,欢迎提出宝贵意见。

首先看一下效果图

Vue评论组件案例

用到的文件有:

<link rel="stylesheet" href="../js/bootstrap/dist/css/bootstrap.min.css">
<!-- ionicons -->
<link rel="stylesheet" href="../js/ionicons/css/ionicons.min.css">
<!-- jquery 3 -->
<script src="../js/jquery/dist/jquery.min.js"></script>
<!-- bootstrap 3.3.7 -->
<script src="../js/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- vue -->
<script src="../js/vue.js"></script>

 

demo下载地址:

话不多说直接上代码,基本注释我都写全了,这里我没有将js和html文件分开直接在html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>document</title>
  <link rel="stylesheet" href="../js/bootstrap/dist/css/bootstrap.min.css">
  <!-- ionicons -->
  <link rel="stylesheet" href="../js/ionicons/css/ionicons.min.css">
  <!-- jquery 3 -->
  <script src="../js/jquery/dist/jquery.min.js"></script>
  <!-- bootstrap 3.3.7 -->
  <script src="../js/bootstrap/dist/js/bootstrap.min.js"></script>
  <!-- vue -->
  <script src="../js/vue.js"></script>
  <style>
    [v-cloak] {
      display: none
    } 
     .tb_comment{
      width: 100%;
      /* border: 1px solid; */
    }
    .tb_comment img{
       width:64px;
       height:64px;
    }
    .tb_user{
      width: 80px;
    }
 
 
         /* 用户评论内容展示 */
      .div_comment_content{
        padding: 6px 12px;  
        border: 1px solid #d2d6de;
        background-color: #f0f8ff;
      }
   
  </style>


</head>

<body>
  <div class="row" id="app" v-cloak>
    <div class='row'>
      <div class="col-md-3"></div>
      <div class="col-md-6">
        <!-- comment_item:传递给子组件数据  comment_data:父组件里定义的数据 -->
        <!-- id子父组件里我都定义成id----当前评论资源id -->
        <!-- prentsendcomment:在子组件里调用父组件发表方法的名称 sendcomment:父组件里发表方法 -->
        <!-- prentsendsupport:子组件里调用父组件点赞方法名称  sendsupport:父组件里点赞方法 -->
        <!-- prentsendopposition:子组件里调用父组件反对方法名称  sendopposition:父组件里反对方法 -->
        <temp_comment v-bind:comment_item="comment_data" v-bind:id="id" @prentsendcomment="sendcomment"
          @prentsendsupport="sendsupport" @prentsendopposition="sendopposition">
        </temp_comment>

      </div>
      <div class="col-md-3"></div>

    </div>
  </div>

  <!-- 评论组件html代码结构 -->
  <template id='tp_comment'>
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">欢迎您发表评论</h3>
      </div>
      <div class="panel-body form-check-inline">
        <label style="color:gray">请勿发表与本片无关的主题,评论需要审核</label>
        <textarea class="form-control" style="resize:none;" rows="5" placeholder="说点什么吧..." maxlength="20" v-model="input_comment"> </textarea>
        <span class="pull-right">还能输入<b style="color:red">{{surplus}}</b>/{{total}}</span><br>
        <input type="button" class="pull-right btn btn-primary" value="发表" @click="btnsend">
        <div v-for="item in comment_item" :key="item.id">
          <table class="tb_comment table table-condensed">
            <tbody>
              <tr>
                <td class="tb_user">
                  <img class="img-circle" v-bind:src="item.portraiturl">
                </td>
                <td>
                  <p>{{item.nickname}} &nbsp;&nbsp;<i class="glyphicon glyphicon-time"></i>&nbsp;{{item.createtime|date}}
                    <span class="pull-right">
                      <a href="#" @click.prevent="btnsupport(item.id)"> <i class="    glyphicon glyphicon-thumbs-up"></i>&nbsp;({{item.supportnum}})</a>
                      &nbsp;&nbsp;
                      <a href="#" @click.prevent="btnopposition(item.id)"><i class="    glyphicon glyphicon-thumbs-down"></i>&nbsp;({{item.oppositionnum}})</a>
                    </span>
                  </p>
                  <div class='div_comment_content'>
                    {{item.commentcontent}}
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <table class="tb_comment table table-condensed" v-if="comment_item.length==0">
          <tbody>
            <tr>
              <td class="text-muted" style="width:100%">
                <h4>暂无评论...</h4>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>

  <script>
    window.onload = function (ev) {
      // 定义评论组件
      var temp_comment = {
        template: '#tp_comment',
        // 组件里的数据必须是方法返回。
        data: function () {
          return {
            input_comment: '',// 输入的评论 
            total: 200,// 评论可输入总字数 
          }
        },
        // 父组件传递的消息列表
        props: ['comment_item', 'id'],
        // 计算属性
        computed: { // 计算剩余可输入字数
          surplus: function () {
            return this.total - this.input_comment.length;
          },
        },
        // 自定义过滤器
        filters: {
          // 时间过滤器
          "date": function (d) {
            var newdate = new date(d);
            y = newdate.getfullyear();
            m = (newdate.getmonth() + 1).tostring().padstart(2, '0');
            d = newdate.getday().tostring().padstart(2, '0');
            hh = newdate.gethours().tostring().padstart(2, '0');
            mm = newdate.getminutes().tostring().padstart(2, '0');
            ss = newdate.getseconds().tostring().padstart(2, '0');
            return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
          }
        },
        // 方法
        methods: {
          // 父组件传入的发表评论方法,由子组件调用父组件发表评论方法
          btnsend: function () {
            // 调用父组件方法。
            this.$emit('prentsendcomment', this.id, this.input_comment)
          },
          // 评论点赞
          btnsupport: function (id) {
            // 调用父组件方法。
            this.$emit('prentsendsupport', id)
          },
          // 评论反对
          btnopposition: function (id) {
            // 调用父组件方法。
            this.$emit('prentsendopposition', id)
          }
        }
      }

      var vm = new vue({
        el: '#app',
        data: {
          id: 12,
          // 测试数据
          comment_data: [
            {
              id: 1,
              portraiturl: "../images/user2-160x160.jpg",
              nickname: '那年初夏',
              commentcontent: '劝君更敬一杯酒',
              supportnum: 14,
              oppositionnum: 323,
              createtime: new date()
            },
            {
              id: 2,
              portraiturl: "../images/user2-160x160.jpg",
              nickname: '列夫托尔斯泰',
              commentcontent: '这个部电影指的我们去好好看看。',
              supportnum: 2312,
              oppositionnum: 33,
              createtime: new date()
            },
            {
              id: 3,
              portraiturl: "../images/user2-160x160.jpg",
              nickname: '小怪兽',
              commentcontent: '千万不要下载,千万不要下载,千万不要下载,我活了34年,这种烂片,第一次见难道比纯洁心灵还要烂》?',
              supportnum: 23,
              oppositionnum: 43,
              createtime: new date()
            },
            {
              id: 4,
              portraiturl: "../images/user2-160x160.jpg",
              nickname: '帅大叔',
              commentcontent: '到菜市场买菜,看到一个孩子在看摊,我问:“一只鸡多少钱?” 那孩子回答:“23。” 我又问:“两只鸡多少钱?” 孩子愣了一下,一时间没算过来,急中生智大吼一声:“一次只能买一只!”',
              supportnum: 56,
              oppositionnum: 55,
              createtime: new date()
            },
            {
              id: 5,
              portraiturl: "../images/user2-160x160.jpg",
              nickname: '夏末',
              commentcontent: '版权归作者所有,任何形式转载请联系作者。作者:电影幕后故事(来自豆瓣)来源:https://movie.douban.com/review/9666136/郭敬明当作家远不如当商人成功。当作家写出来的那些不知所云、虚到不行的句子只能骗一骗心智不成熟的小孩子;但做商人时所展现出来的精明与虚伪倒是能骗过不少人。我指的就这部披着“反校园霸凌”外衣,实则还是矫情、无病呻吟的电影。',
              supportnum: 78,
              oppositionnum: 23,
              createtime: new date()
            },
            {
              id: 6,
              portraiturl: "../images/user2-160x160.jpg",
              nickname: '罗罔极',
              commentcontent: '前阵子,我犯了个错。 我在文章里说,当下的大陆喜剧,有两大派系分庭抗礼。 一派是徐峥宁浩,其作品核心偏于人间悲剧; 一派是开心麻花,其作品核心偏于纯粹喜剧。 没想到,现在又杀出个程咬金。 八年酝酿,慢工打磨。 导演、编剧:黄渤。 这一出手,就震惊四座—— 《一出好... ',
              supportnum: 332,
              oppositionnum: 33,
              createtime: new date()
            },
          ]
        },
        // 注册组件
        components: {
          'temp_comment': temp_comment,
        },
        // 方法
        methods: {
          getdata: function () {
            var list = json.parse(localstorage.getitem('cmts') || '[]')
            this.list = list;
          },
          // 由子组件调用后传入评论资源的id和内容
          sendcomment: function (id, content) {
            alert(id + '------' + content)
          },
          // 子组件触发点赞
          sendsupport: function (id) {
            alert(id)
          },
          // 子组件触发反对
          sendopposition: function (id) {
            alert(id)
          }
        },

        beforecreate() {
          // 这时候data 和methods 都还没有被初始化,所以访问不到getdata
        },
        created() {
          this.getdata();
        }
      })

    };
  </script>
</body>

</html>