7--input 保存按钮 禁用可用

首先搭建页面：

<view class="page">
  <view class="top">
    <!--  路由组件传参 -->
    <text>班级名称</text>
    <button type="submit" bindtap="save" class="save" disabled='{{isDisabled}}'>保存</button>
  </view>
  <input class="xin" bindinput="bind_banji" placeholder="请输入班级名称"></input>
</view>

把样式写好：禁用和可用样式>>

.top {
  display: flex;
  justify-content: space-between;
  margin: 10px 15px;
  align-items: center;
}
/* 设置不可用状态的背景色 */
button[disabled]{
  background-color: #eaeaea !important;
  color: #fff;
}

.top .save{
  width: 17%;
  padding: 5rpx;
  margin: 0;
  font-weight: none;
  font-size: 40rpx;
  color: #fff;
  background-color: #298EF7;
}

.xin {
  border-bottom: 1px solid #ccc;
  margin: 15px;
}

data里写一个存值的名字，和页面加载完成时 状态是否可用>>

  data: {
    classname: '',
    isDisabled: true, //表示页面加载完成时disabled为禁用状态
  },

最重要的input获取值，监听input，若没有值，按钮则禁用状态，反之可用

 //input的值   
  bind_banji: function(e) {
    var classname = e.detail.value
    this.setData({
      classname: classname
    })
    console.log(classname)
    if (classname !== '') {
      this.setData({
        isDisabled: false //修改isDisabled的值为false（即启用状态）   
      })
    } else {
      this.setData({
        isDisabled: true
      })
    }
  },

我在数据传给后台的地方遇到了困扰，就是如何拿到input的值，其实很简单，直接用data里classname

var that = this
let classname = that.data.classname

完成啦！！！