Implementation of the simple Vue comment framework (implementation of the parent component) and the vue comment framework component

Implementation of the simple Vue comment framework (implementation of the parent component) and the vue comment framework component

I recently saw a requirement:

1. Implements a comment function, requiring pagination of the comment list
2. Implement componentization for corresponding modules
3. Displays the publisher, release time, and content.

At first glance, it is not very difficult, but there are still some problems in implementation. In addition, because vue is used for the first time, reading the document is also very difficult. Let's not talk about it much. Next we will analyze how each module is implemented.

Source Code address

Comment Form code:

<! -- Start of the document structure area --> <template> <div id = "comment"> <UserDiv @ transferUser = "getInput"> </UserDiv> <CommentDiv: list = "List"> </CommentDiv> <PageDiv @ transferUser = "getPage": totalCount = "totalCount ": currentPage = "currentPage"> </PageDiv> </div> </template> <! -- End of the document structure area -->

<! -- Js Control Area --> <script> // introduce commentInput, commentList, and paginationimport UserDiv from '. /commentInput. vue 'import PageDiv from '. /pagination. vue 'import CommentDiv from '. /commentList. vue 'export default {// declare component name: 'comment', // hash table components: {UserDiv, PageDiv, CommentDiv} containing available instance components }, // declare the component parameter data () {return {totalCount: 0, currentPage: 1, pagesize: 3, totalData: [], List: [], }}, methods :{/ /Method for displaying the comment list information getInput (msg) {// Save the comment information to the comment array this. totalData. push ({text: msg}) // calculates the total length of comment information. this. totalCount = this. totalData. length // determine whether the total number of comments is greater than the number of lines displayed on a single page if (this. totalCount <= this. pagesize) {// display all comments this. list = this. totalData} else {// intercept this in totalData. totalCount-this. the elements after pagesize are displayed as this. list = this. totalData. slice (this. totalCount-this. pagesize)} // click the comment button. The first page is displayed by default. currentPa Ge = 1 // The comment list is displayed in reverse order, that is, the latest comment, displayed at the top of this. list. reverse ()}, // calculate the display content getPage (curr, size) {this. currentPage = curr if (this. totalCount <= this. pagesize) {// display all comments this. list = this. totalData} else {var start = this. totalCount-this. currentPage * this. pagesize if (start <0) {start = 0} // intercept [start, start + this. pagesize] bit element to display this. list = this. totalData. slice (start, start + th Is. pagesize)} // The comment List is displayed in reverse order, that is, the latest comment. this. List. reverse () },}</script> <! -- Js control area ended -->

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.