vue2文章添加多个标签思路代码及效果展示

效果展示

思路

data数据结构

第一个数组，用来存放标签库，供创建文章时选择

第二个数组，用来存放从标签库选中后的标签，且选中后需在可选的标签库里删除，否则出现同一个标签被多次添加

js代码

点击输入框，可展示所有标签/也可不展示，取决于组件身上属性（激活时展示or不展示）

点击想要的标签，标签库移除，添加到选中数组内

移除标签，标签库添加回去（后续还想选），然后从选中数组内移除

是不是听的云里雾里？这里放一段gif演示

确定的时候就把选中标签数组提交到后台这没什么好说的，数组转字符串扔过去即可

后端数据库使用String=>varchar类型存储

不过这里设计成弹窗式的，当用户取消之后需要清空选中数组，标签库重置

废话不多说了，上代码

步骤

前端

前端搜索时展示数据

使用element的autocomplete组件

组件

<el-autocompletev-model="keyWord"class="inline-input":fetch-suggestions="querySearch"placeholder="请输入内容"style="margin-right: 10px"@select="handleSelect"/>

data

method

搜索时回显数据

//用于like查询 
querySearch(queryString, cb) {var tags = this.tagsvar results = queryString ? tags.filter((tag) => {return (tag.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0)}) : tags// 调用 callback 返回建议列表的数据cb(results)},

点击时加入已选中标签数组

    handleSelect(item) {this.keyWord = ''// 加入选中组this.selectedTags.push(item)// 选中后该标签不可被再选中，从标签库移除this.tags = this.tags.filter((i) => i.value !== item.value)},

关闭标签时的移除&加入各自的数组

handleCloseTag(tag) {// 还给标签库this.tags.push(tag)// 移除取消的标签this.selectedTags = this.selectedTags.filter((item) => item.value !== tag.value)},

挂载时回调获取数据

 async selectAllTags() {const res = await selectAllTag(1, 99)if (res.code === 20000) {this.tags = res.data.records// 由于element的autocomplete 搜索时回显的数据字段必须叫value，这里给他重新包装一下this.tags = this.tags.map((tag) => {return {value: tag.tagName}})//   .filter((item) => {// 由于后续编辑回显selectedTag也有值，产生关闭后，unselect加值，重复//   // 与已选中数组一致的不会进  可选列表//   // 这里的some在返回值为true时直接跳出, 唯一为真,如果是every则要么找到一个false要么全为true才结束//   return !this.selectedTags.some(selected => selected.value === item.value)// })this.unselectedTags = this.tags} else {console.log('服务器废了')}},

这里注释掉的是为了解决编辑回显时选中数组和标签库产生重复问题，你可以自行研究完添加后在将其注释解开慢慢看

保存提交数据

  this.tags = this.selectedTags.map((item) => {return item.value})this.form.tags = this.tags.join(',')

页面完整代码

<template><div v-if="initSuccess" class="main"><div class="operate" style="display: flex;justify-content: space-between"><div style="display: flex;"><el-input v-model="form.title" placeholder="标题" /><el-select v-model="form.categoryName" placeholder="请选择" style="margin:0 20px;min-width: 150px"><el-optionv-for="category in categoryData":key="category.categoryName":label="category.categoryName":value="category.categoryName"/></el-select><el-input v-model="form.summary" placeholder="摘要" style="margin-right: 20px" /><el-button style="margin-right: 10px;" @click=" handleAdd">添加标签 +</el-button><el-dialog title="添加标签" :visible.sync="dialogVis" style="margin-top: -100px"><!--          <el-input v-model="keyWord" @input="searchTag" />--><el-autocompletev-model="keyWord"class="inline-input":fetch-suggestions="querySearch"placeholder="请输入内容"style="margin-right: 10px"@select="handleSelect"/><el-tagv-for="(tag ,index) in selectedTags":key="index"class="singleTag"style="margin-right: 10px"closable@close="handleCloseTag(tag)">{{ tag.value }}</el-tag><div slot="footer" class="dialog-footer"><el-button @click="cancelAddTag">重 置</el-button><el-button type="primary" @click="dialogVis=false">确 定</el-button></div></el-dialog><el-tagv-for="(tag ,index) in selectedTags":key="index"class="singleTag"style="margin-right: 10px"closable@close="handleCloseTag(tag)">{{ tag.value }}</el-tag></div><div style="display: flex"><div class="publishBox" @click="save">保存</div><div class="cancelBox" @click="$router.push('/article/list')">取消</div></div></div><MdEditor :content="form.content" @update:content="getEditorContent" /></div>
</template><script>import MdEditor from '@/components/MdEditor/index.vue'
import { add, update } from '@/api/article/list'
import { selectList as selectCategoryList } from '@/api/article/category'
import { selectList as selectAllTag } from '@/api/tag'export default {name: 'Index',components: { MdEditor },data() {return {articleId: this.$route.params.id,article: {},content: '',form: {},categoryData: [],initSuccess: false,dialogVis: false,keyWord: '',selectedTags: [],unselectedTags: [],tags: []}},mounted() {if (this.$route.params.id !== '0') {this.form = this.$store.state.currArticlethis.selectedTags = this.form.tags.split(',').map(item => {return {value: item}})}selectCategoryList(1, 999, this.searchObj).then(res => {this.categoryData = res.data.recordsthis.listLoading = falsethis.initSuccess = true})this.selectAllTags()},methods: {cancelAddTag() {this.keyWord = ''this.selectedTags = []this.tags = this.unselectedTagsthis.dialogVis = false},handleCloseTag(tag) {// 还给标签库this.tags.push(tag)// 移除取消的标签this.selectedTags = this.selectedTags.filter((item) => item.value !== tag.value)},querySearch(queryString, cb) {var tags = this.tagsvar results = queryString ? tags.filter((tag) => {return (tag.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0)}) : tags// 调用 callback 返回建议列表的数据cb(results)},handleSelect(item) {this.keyWord = ''// 加入选中组this.selectedTags.push(item)// 选中后该标签不可被再选中，从标签库移除this.tags = this.tags.filter((i) => i.value !== item.value)},async selectAllTags() {const res = await selectAllTag(1, 99)if (res.code === 20000) {this.tags = res.data.records// 由于element的autocomplete 搜索时回显的数据字段必须叫value，这里给他重新包装一下this.tags = this.tags.map((tag) => {return {value: tag.tagName}})//   .filter((item) => {// 由于后续编辑回显selectedTag也有值，产生关闭后，unselect加值，重复//   // 与已选中数组一致的不会进  可选列表//   // 这里的some在返回值为true时直接跳出, 唯一为真,如果是every则要么找到一个false要么全为true才结束//   return !this.selectedTags.some(selected => selected.value === item.value)// })this.unselectedTags = this.tags} else {console.log('服务器废了')}},handleAdd() {this.dialogVis = true},getEditorContent(content) {this.form.content = content},save() {// 将原来的对象数组转为数组，提取出对象的value值this.tags = this.selectedTags.map((item) => {return item.value})this.form.tags = this.tags.join(',')if (this.articleId === '0') {add(this.form).then(res => {if (res.code === 20000) {this.$message.success('保存成功')this.$router.push('/article/list')} else {this.$message.error(res.msg)}})} else {update(this.form).then(res => {if (res.code === 20000) {this.$message.success('保存成功')this.$router.push('/article/list')} else {this.$message.error(res.msg)}})}}}
}
</script><style scoped>
.singleTag {position: relative;
}.del {position: absolute;font-size: 12px;color: red;cursor: pointer;display: block;/*background: red;*/bottom: 0;right: -10px;width: 20px;text-align: center;transition: 1s;
}.del:hover {color: #2f4d03;cursor: pointer;transform: rotateZ(360deg);
}.publishBox {cursor: pointer;width: 100px;text-align: center;margin-right: 20px;padding: 10px;background: #6ce8ff;color: #000000;box-shadow: 0 0 4px black;border-radius: 10px;
}.cancelBox {cursor: pointer;width: 100px;text-align: center;padding: 10px;background: #ff8383;color: #000000;box-shadow: 0 0 4px black;border-radius: 10px;
}
</style>