与我之前相关的一个标签的博客（时间选择标签）：
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
