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('');
接下来就是后端接受储存就行了