Use VUE to implement textarea to fix the number of input lines and add underline styles.

First, the effect picture ###

Textarea underline

Set a 1*35// line height image and set the background image.

background: url('./img/linebg.png') repeat; border: none; outline: none; overflow: hidden; line-height: 35px; // Make sure that the line height is the same as the background height resize: none;Copy the code

Fixed number of input lines

Requirement: the user can only enter 2 lines regardless of the number of bytes.

Cannot be set with maxlength because it limits the number of rows.

Implementation approach

The first idea is to figure out how many lines the user has typed, and then delete any characters that are beyond that.

<textarea class='textarea' @scroll='textsrc' v-model='text.Headquarters' ref='Headquarters' rows="2"></textarea>Copy the code

If a user copies a large section of text at a time and pastes it into a textarea, multiple lines will appear directly. Deleting a string that exceeds part of the newline will trigger scroll event, so use the IF statement to determine whether the limit is met.

Find many lines of code typesetting error, paste a picture.

            textsrc() {                this.$refs.Headquarters.scrollTo(0, 0)                let LineNumber = this.$refs.Headquarters.scrollHeight / 35;                console.log(this.state)                if (LineNumber => 2) {                    this.state = false;                } else {                    this.state = true; }; ! this.tiemr && ! this.state && this.tiemer(); this.tiemr && this.state && clearInterval(this.tiemr);if(this.state) { this.tiemr = null; }},Copy the code

Write a function to delete redundant charactersCopy the code

            tiemer() {                this.tiemr = setInterval(() => {                    this.text.Headquarters = this.text.Headquarters.slice(                        0,                        this.text.Headquarters.length - 1                    );                    if (this.$refs.Headquarters.scrollHeight / 35 == 2) {                        clearInterval(this.tiemr)                        this.tiemr = null                        this.state = true}}, 10); },Copy the code

Copy the code

Finally, post on Github and welcome the advice of god who has a better way.