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; }