집 >웹 프론트엔드 >JS 튜토리얼 >Vue를 사용하여 주석 프레임워크를 구현하는 방법

Vue를 사용하여 주석 프레임워크를 구현하는 방법

亚连원래의: 2018-06-13 10:25:223392검색

이 글에서는 주로 간단한 Vue 주석 프레임워크 구현(상위 컴포넌트 구현)을 소개하고 참고용으로 제공합니다.

최근 요구 사항을 확인했습니다.

페이지에 댓글 목록이 표시되도록 댓글 기능을 구현합니다.
해당 모듈의 구성 요소화를 구현합니다.
게시자, 게시 시간 및 콘텐츠를 표시합니다.

얼핏 보면 어렵지 않아 보이지만 구체적인 구현에는 여전히 몇 가지 문제가 있습니다. 그리고, vue를 처음 사용하기 때문에 설명서를 읽어보면 헷갈릴 수 있으니, 더 이상 고민하지 말고 각 모듈이 어떻게 구현되어 있는지 분석해 보도록 하겠습니다.

소스 코드 주소

댓글 양식 코드:

<!-- 文档结构区开始 -->
<template>
  <p id="comment" >
    <Userp @transferUser="getInput" ></Userp>
    <Commentp :List="List"></Commentp>
    <Pagep @transferUser="getPage" :totalCount="totalCount" :currentPage="currentPage"></Pagep>
  </p>
</template>
<!-- 文档结构区结束 -->

<!-- js 控制区开始 -->
<script>
//引入组件 commentInput、commentList、pagination
import Userp from &#39;./commentInput.vue&#39;
import Pagep from &#39;./pagination.vue&#39;
import Commentp from &#39;./commentList.vue&#39;

export default {
  //声明组件名
  name: &#39;comment&#39;,

  //包含实例可用组件的哈希表
  components: {
    Userp,
    Pagep,
    Commentp
  },

  //声明组件参数
  data() {
    return {
      totalCount: 0,
      currentPage: 1,
      pagesize: 3,
      totalData: [],
      List: [],
    }
  },

  methods: {
    //显示评论列表信息的方法
    getInput(msg) {
      //将评论信息保存到评论数组里
      this.totalData.push({ text: msg })
      //计算评论信息总条数长度
      this.totalCount = this.totalData.length

      //判断评论总数是否大于单页显示条数
      if (this.totalCount <= this.pagesize) {
       // 显示所有评论
       this.List = this.totalData
      } else {
       // 截取totalData中 this.totalCount - this.pagesize 后面的元素进行显示
       this.List = this.totalData.slice(this.totalCount - this.pagesize)
      }
      //点击评论按钮，默认跳转显示第一页内容
      this.currentPage = 1
      //评论列表倒序显示，即最新评论，显示在最上面
      this.List.reverse()

    },

    // 计算评论列表每一页的显示内容
    getPage(curr, size) {
      this.currentPage = curr

      if (this.totalCount <= this.pagesize) {
        //显示所有评论
        this.List = this.totalData
      } else {
        var start = this.totalCount - this.currentPage * this.pagesize
        if (start < 0) { start = 0 }
        // 截取totalData中 [start, start + this.pagesize] 位元素进行显示
        this.List = this.totalData.slice(start, start + this.pagesize)
      }
      //评论列表倒序显示，即最新评论，显示在最上面
      this.List.reverse()
    }
  },
}
</script>
<!-- js 控制区结束 -->

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

Vue를 사용하여 주석 프레임워크를 구현하는 방법

관련 기사