微信小程序 多标签选择和添加标签

 与我之前相关的一个标签的博客（时间选择标签）：

https://blog.csdn.net/weixin_42418774/article/details/98747230

今天我来说说进阶标签的选择和添加标签：

首先我们看到wxml页面布局：

wxml:

<view class='btn_view'>
        <text>标签：</text>
        <block wx:for="{{obtnArry}}" >
          <view class='label_view {{item.selected ? "active" : ""}}' data-value="{{item.name}}" bindtap='dealTap' checked="{{item.selected}}" data-index="{{index}}">
            {{item.name}}
          </view>
        </block>
        <van-popup show="{{ show }}" bind:close="onClose" close-on-click-overlay="{{false}}" overlay="false">
          <view class="input_view">
            <text>请输入标签：</text>
            <input class="input" placeholder="最多输入5个字" maxlength="5" bindinput="bindValue"></input>
            <!-- <view class="btn"> -->
                <button catchtap="onInputValue" class="determine_button">确定</button>
                <button catchtap="onCancel" class="determine_button1">取消</button>
            <!-- </view> -->
          </view>
        </van-popup>
        <image bindtap='addinput' class="img" src="/imgs/jia.png" ></image>
  </view>

wxss:(布局样式仅供参考，你可以有更好的优化代码)

.determine_button{
  background: #ff784a;
  color: white;
  border-radius: 10rpx;
  height: 60rpx;
  line-height:60rpx;
  position: fixed;
  bottom: 5rpx;
  left: 8rpx;
  width: 46%;
}
.determine_button1{
  background: #ff784a;
  color: white;
  border-radius: 10rpx;
  height: 60rpx;
  line-height:60rpx;
  position: fixed;
  bottom: 5rpx;
  right: 8rpx;
  width: 46%;
}
.label_view{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rpx 10rpx;
  width: 140rpx;
  height: 50rpx;
  border: 1rpx solid rgb(114, 107, 107);
  font-size: 26rpx;
  border-radius: 12rpx;
  color: rgb(114, 107, 107);
  margin-right: 5rpx;
  margin-top: 15rpx;
}
.btn_view{
  margin: 10rpx 15rpx;
  font-size: 26rpx;
  color: rgb(99, 95, 95);
  width: 700rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.btn_view text{
  display: flex;
  align-items: center;
}
.active{
  background: #ff784a;
  border: 1rpx solid rgb(255, 253, 253);
}
.btn_view .img{
  margin-top: 8rpx;
  width: 65rpx;
  height: 65rpx;
}
.input_view{
  font-size: 28rpx;
  width: 400rpx;
  height: 270rpx;
  margin: 20rpx 20rpx;
}
.input{
  margin-top: 20rpx;
  margin-left: 22rpx;
  width: 350rpx;
  border: 1px #aaa solid
}

最后就是主要的js代码了：

data定义|：

js:
//同步输入框内容
  bindKeyInput(e) {
      this.setData({
        albumName: e.detail.value
      })
  },
// 选择标签并输入到label数组中
 dealTap:function(e){  
    let string = "obtnArry[" + e.target.dataset.index + "].selected";
    // const checkedicon = "obtnArry[" + e.target.dataset.index + "].selected"; 
    console.log(!this.data.obtnArry[e.target.dataset.index].selected);
    this.setData({
      [string]: !this.data.obtnArry[e.target.dataset.index].selected
    })
    let detailValue = this.data.obtnArry.filter(it => it.selected).map(it => it.name)
    this.setData({
      label: detailValue
    })
    console.log(this.data.label)
  },
  addinput(e){
    this.setData({ 
      show: true,
    });
  },
//关闭弹出层，但是我这里有取消按钮，所以这个没用了
  //onClose() {
   // this.setData({ show: false });
 // },

//实时获取输入框的值
  bindValue(e){
    this.setData({
      inputValue: e.detail.value
    })
  },
//确定按钮，添加数组达到添加标签的作用
  onInputValue(){
    this.setData({ 
      show: false ,
      inputValue: this.data.inputValue
    });
    var obtnArry = this.data.obtnArry;
    console.log(this.data.inputValue)
    var newData = { num: obtnArry.length, name: this.data.inputValue, selected: false };
    obtnArry.push(newData);//实质是添加lists数组内容，使for循环多一次
    this.setData({
      obtnArry,
    })
    console.log(this.data.inputValue)
  },
//取消按钮
  onCancel(){
    this.setData({ show: false });
  }

借鉴博客：https://blog.csdn.net/liushuanglian/article/details/101021928