6.5【微信小程序全栈开发课程】记录页面（五）--隐藏显示文本框

柔光的暖阳◎ 2023-06-08 06:57 13阅读 0赞

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

编辑RecordList.vue文件的data函数，添加三个变量：ellipsis、note、src

其中ellipsis用来控制添加或者编辑文本框显示、note是添加或者编辑文本框中的文本（note默认为记录数据里面的备注）、src是编辑按钮图片链接

data () { 
      return { 
        create_time:formatTime(new Date(this.record.create_time)),
        ellipsis: false,
        note:this.record.note,
        src:"/static/images/bianji.png"
      }
    },

#### 2、添加方法 ####

在标签中创建methods函数，添加changeEllipsis、cancel方法

changeEllipsis方法用来修改变量ellipsis，从而控制文本框是否显示

cancel用来修改ellipsis，同时将note重置为修改前的状态

//参考数据，无需粘贴
    //data () { 
      //...
    //},
    
    
    //需要添加的部分，不要忘记在以上一行添加逗号隔开
    methods:{ 
      // ellipsis为true时，显示文本框；为false隐藏文本框
      changeEllipsis () { 
        this.ellipsis = !this.ellipsis
      },
      // 点击取消按钮时，要改变ellipsis，同时将note重置为修改前的状态
      cancel () { 
        this.ellipsis = !this.ellipsis
        this.note = this.record.note
      },
    }

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

编辑RecordList.vue文件的template部分

<template>
      <div class="book-card">
        <div class="table" width="98%">
          <div class="tr">
            
            <div class="date">{
       {create_time}}</div>
            
            <div class="busi">
              
              <label v-if="record.add > 0">+{
       {record.add}}</label>
              <label v-else-if="record.add == 0"> 0</label>
              <label v-else>{
       {record.add}}</label>
            </div>
            
            <div class="mark">
              
              <label v-if="record.mark >= 0"> {
       {record.mark}}</label>
              <label v-else>{
       {record.mark}}</label>
            </div>
            
            
            <div class="net" @click='changeEllipsis'>
              <label v-if="note">{
       {note}}</label>
              <label v-else class="no-note">点击添加</label>
            </div>
            
            
            
            <label v-if="ellipsis">
              <div class="image" @click='cancel'><image class='img' src='/static/images/quxiao.png'></image></div>
            </label>
            <label v-else>
              
              <div class="image" @click='changeEllipsis'><image class='img' :src="note? src : ''"></image></div>
            </label>
          </div>
        </div>
        
        <div class="hide" v-if="ellipsis">
          <button class="btn">
            
            <label v-if="record.note">修改</label>
            <label v-else>添加</label>
          </button>
          
          <input v-model='note' class="input" maxlength='10' placeholder="最多输入10个字">
        </div>
      </div>
    </template>

#### 4、测试效果 ####

![format_png][]

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

![format_png 1][]

[format_png]: /images/20230531/13a4863b1c8448a1bdc3612d8968d647.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 1]: /images/20230531/afa71bc3caa74fb997014f23e8185c15.png