13--微信小程序 修改班级名称（组件）按钮、input

页面：

<view class="box">
  <view class="top">
    <!--  路由组件传参 -->
    <label class="edit">更改班级名称</label>
    <input type="text" class="input banname" bindinput="inputName" placeholder="请输入班级名称" value="{{classname}}"></input>
  </view>
  <view class="btn">
    <button size="mini" class="cancel" bindtap="cancel">取消</button>
    <button type="submit" disabled="{{disabled}}" size="mini"  class="save" bindtap="save">保存</button>
  </view>
</view>

js:

const app = getApp()
Component({
  data: {
    disabled: true,
    newvalue: ''
  },
  properties: {
    classid: {
      type: String,
      value: ''
    },
    classname: {
      type: String,
      value: ''
    }
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function() {
      console.log(this.data.classid, this.data.classname)
      let value = this.data.classname
      this.setData({
        value: value
      })
      console.log(value)

    }
  },

  methods: {
    inputName: function(e) {
      var newvalue = e.detail.value
      this.setData({
        newvalue: newvalue
      })
      console.log(newvalue)
      if (newvalue == this.data.classname) {
        this.setData({
          disabled: true //修改isDisabled的值为false（即启用状态）   
        })
      } else {
        this.setData({
          disabled: false
        })
      }
    },
    //取消   向外暴露
    cancel: function(e) {
      this.triggerEvent('hide', {})
    },
    //保存
    save: function(e) {
      let token = wx.getStorageSync('token')
      let classid = this.data.classid
      let classname = this.data.newvalue
      wx.request({
        url: app.globalData.update_c,
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded',
          'cookie': token
        },
        data: {
          token,
          classid,
          classname
        },
        //成功后
        success: res => {
          if (res.data.error) {
            wx.showToast({
              title: res.data.message,
              icon: 'none',
              duration: 2000
            })
            return
          } else {
            wx.showToast({
              title: res.data.message,
              icon: 'success',
              duration: 2000
            })
          }
          this.triggerEvent('hide', {
            classname: this.data.newvalue
          })
        }
      })
    }

  } //methods结束
})

样式：

.edit {
  margin: 5px 4px 0 12px;
  display: block;
}

.banname {
  border: 1px solid #eaeaea;
  padding: 7px;
  margin: 6px 12px;
}

button[disabled]{
  background-color: #eaeaea !important;
  color: #fff;
}

.btn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 10px;
}

.box {
  border: 1px solid #eaeaea;
  width: 100%;
  height: 100%;
  margin-top: 10px;
}
.cancel{
   border: 1px solid #eaeaea;
}
.save {
  color: #fff;
  background-color: #298ef7;
   border: 1px solid #eaeaea;
}