2024/05/14（团队开发）

　　今天开始我们团队项目的第二阶段，我首先要完成的内容就是老师提出来的，给视频添加标签来实现视频信息的概括。

　　我要实现的效果就是用户点击视频标签后的+号就会新增一个文本框，用户可以在里面输入自己需要的标签来新增标签。

        <view class="container">
            <view class="inputs-wrapper">
                <text id="biaoqian">视频标签</text>
                <view v-for="(label, index) in labels" :key="index" class="input-container">
                    <view class="input-wrapper">
                        <input type="text" v-model="label.value" :name="'input' + index" class="custom-input">
                        <view class="delete_label" @tap="removeLable(index)">×</view>
                    </view>
                </view>
                <view @tap="addLable" class="add_label">+</view>
            </view>
        </view>

labels:[],//输入的标签数组

　　　　　　　　limitDescription(event) {
                  const maxLength = 200;
                  if (event.target.value.length >= maxLength) {
                    // 截取超过长度的部分
                    this.information.description = event.target.value.slice(0, maxLength);
                  }
            },
            addLable()
            {
                console.log("添加标签")
                this.labels.push({value:'#'});
            },
            removeLable(index)
            {    
                console.log("移除标签")
                this.labels.splice(index,1);
            },

#biaoqian{
    font-size: 20px;
    margin-left: 3px;
    margin-right: 5px;
}
.add_label{
    color: #fff;
    height: 25px;
    width: 25px;
    background-color: #999;
    text-align:center;
    border-radius: 50%;
    font-size: 25px;    
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    border-radius: 50%; /* 将标签变成圆形 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
}

实现的效果：

 点击+号可以新增标签

 点击每个标签后面的×就可以删掉对应的标签

 如果要提交标签的话，我们就需要将这个标签数组里面的东西全部拼接起来，注意是只含#或则不含#的不予拼接

我们这里的labels是一个类的数组，所以先要将其内部的标签的值转化为字符串数组

const valuesArray = this.labels.map(label => label.value);
this.information.label = valuesArray.filter(item => item !== '#' && item.includes('#')).join('');

接下来就是后端接受储存就行了