笔记:van-popup 点击弹出输入框层 修改后点击保存按钮改变内容

  <view class="user_infolist" wx:for="{{user_infolist}}" wx:for-index="i">
   <!-- bindtap="{{item.listTap}}" -->
    <view class="user_infobox {{item.list_id}}" data-oldval="{{item.theTxt}}" data-setid="{{i}}" bindtap="{{item.listTap}}">
      <view class="info_left">{{item.theTit}}</view>
      <view class="info_right"><text>{{item.theTxt}}</text><image src="{{item.moreicon}}" mode="widthFix"></image>		    </view>
    </view>
  </view>
<van-popup show="{{show}}" position="right" overlay="{{true}}" bind:close="onClose" duration="400" custom-style="width:100%;height:100%;background:#ffffff;" >
  <view class="pobox">
    <view class="inputbox">
      <input bindinput="getvalue" value="{{inputValue}}" />
    </view>
    <button bindtap="savebtn" data-btnid="{{i}}">保存</button>
  </view>
</van-popup>
/* 弹出层 */
.pobox{
  width: 100%;
  height: 100%;
  background: #f2f2f4;
  position: absolute;
  left: 0;
  top: 0;
}
.inputbox{
  width: 100%;
  background: #ffffff;
  font-size: 26rpx;
  line-height: 80rpx;
  padding: 0 10rpx;
  margin-top: 30rpx;
}
.inputbox input{
  width: 100%;
  line-height: 80rpx;
  height: 80rpx;
}

.pobox button{
  width: 180rpx;
  height: 70rpx;
  font-size: 26rpx;
  color: #ffffff;
  background: #07c160;
  margin: 0 auto;
  margin-top: 30rpx;
  padding: 0;
  outline: none;
  line-height: 70rpx;
  border-radius: 8rpx;
}
data:{
 user_infolist:[
      {
        theTit: "姓名",
        theTxt:"王某某",
        list_id:"name",
        listTap: "openpopup",
      },
    ],
    show: false,
    inputValue: "1", //input的value值
    backValue: "", //input改变返回的value值
},
  openpopup:function(e){
    var getVal = e.currentTarget.dataset.oldval  //携带的值
    var setVal = 'inputValue'
    this.setData({
      backValue: "",  // 初始化input改变返回的value值 否则该值为上一个修改的backValue
      [setVal]: getVal,  // 把携带的值赋给input
      show: true,   //打开弹出层
      btnid: e.currentTarget.dataset.setid  //把携带的id赋值到全局
    });
  },
  // input改变时的的值
  getvalue:function(e){
    var inputVal = e.detail.value;  //input改变时的value值
    var bkval = 'backValue';   //定义一个全局变量 input改变返回的value值
    console.log(this.data.backValue)
    console.log(inputVal)
    this.setData({
      [bkval]: inputVal
    });
  },
  savebtn:function(e){
    var btnid = this.data.btnid  //获取到 打开弹出层时传递的id
    var getval = this.data.backValue;  //获取到input返回的value值
    var oldcont = this.data.user_infolist[btnid].theTxt;  //获取到内容位置
    var cont = "user_infolist["+btnid+"].theTxt";   //找到数组中这个id下的属性名
    if (getval==""){   //判断input的值是否做出改变
    console.log("未修改")
      this.setData({     //关闭弹窗 并将原有值赋给自己
        cont : oldcont,   
        show: false,
      })
    }else{
      console.log("修改了")
      this.setData({      //关闭弹窗 并将修改的值赋给自己
        show: false,
        [cont]: getval,
        //  backValue:""
      });
    }
  },
  onClose() {
    this.setData({
      show: false,
    });
  },
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值