4.5【微信小程序全栈开发课程】意见反馈（一）--实时监控字数

逃离我推掉我的手 2023-06-08 06:55 74阅读 0赞

#### 1、添加变量 ####

编辑opinion.vue文件script部分的代码，添加data对象，在里面定义两个变量opinion、word\_count

opinion是用户反馈信息，word\_count是用户反馈信息的字数

#### 2、添加页面代码 ####

（1）编辑opinion.vue文件template部分的代码，

<template>
      <div>
        <div class="container">
          <div class="row">
            <label class="name">意见与反馈</label>
          </div>
          <div class="row text">
            <div>
              <textarea
                v-model='opinion'
                class = "input"
                maxlength='200'
                placeholder="点击这里填写你的建议、问题反馈、合作等信息，我会认真对待每一条信息~"
              ></textarea>
              
              <label class="word-count">{
       {word_count}}/200</label>
            </div>
          </div>
        </div>
        <button>提交</button>
      </div>
    </template>

###### （2）textarea组件介绍 ######

textarea是多行输入框，是小程序的原生组件

v-model：用来绑定在data对象中定义的opinion变量，会将用户输入的信息，保存到opinion中

maxlength：限定最长输入的长度

placeholder：当未输入时，显示的提示信息

> 小程序文档参考textarea  
> [https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html][https_developers.weixin.qq.com_miniprogram_dev_component_textarea.html]

#### 3、实时监控字数 ####

当用户在textarea多行输入框中进行输入，会实时显示当前输入的字数，这就要用到监控函数watch了

在watch监控函数中定义一个与需要监控的变量同名的方法，注意，必须是与需要监控的变量同名的方法

//参考代码，无需粘贴
    //data () { 
      //... 
    //},
    
    
    //需要添加的代码
    watch: { 
      //与需要监控的变量opinion同名的方法
      opinion () { 
        this.word_count = this.opinion.length
      }
    }

#### 4、查看效果 ####

在输入框中输入时时，右下角的数字也会随之变化

![format_png][]

#### 5、可能遇到的问题 ####

因为我们限定了200的字数，在微信开发者工具上面测试的时候，可能会出现还没到200字就输入不了的情况

就像下面这样，想输入拼音dao，但是输入d就卡住了，不能再往下输入了。

这个是因为电脑端会将输入过程中的拼音的长度也计算到输入总长度中，所以「到」字虽然只是一个字符，但是拼音有「dao」有三个字符，输入「d」到200字符的限定长度了，后面的拼音就输入不了了

不过不需要担心，在手机端不会出现这种情况，手机端输入过程中拼音的长度不会计算到输入总长度中，算是微信开发者工具的一个无关痛痒的小bug吧

![format_png 1][]

> **作者：猫宁一**  
> 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 2][]

[https_developers.weixin.qq.com_miniprogram_dev_component_textarea.html]: https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html
[format_png]: /images/20230531/03ad98b23c4e4598a992a4535fecf24b.png
[format_png 1]: /images/20230531/6c64fbc1f97048e893560b6cae0fe5aa.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 2]: /images/20230531/81c9b92864af46a79ceb1be19ef0c1f6.png