页面:
<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;
}