BootStrapVue Tags 标签搜索、筛选排除选择标签实例 - 详解

文章涉及：

Vuex、Vue、BoostrapVue

文章解析：

Vue 中使用 tags 标签实现输入名称查询标签列表排除已选择标签
默认展示全部可搜索 tags 标签列表模糊搜索可用 tags 标签列表

文章概览：

computed 计算函数 criteria 监听 input 输入内容

availableOptions 函数根据条件获取标签列表计算可选 tags 标签

optional_tag_inputDesc 函数搜索结束提示

add_option_to_tags_Click 函数实现添加选中 tags

实现效果

在这里插入图片描述

实例教程

store.js

import {getp} from '../config/http'

export const state = () => ({
  optional_tags: []
});

export const mutations = {
  set_optional_tags(state, payload) {
    state.optional_tags = payload
  }
};

export const actions = {
  async get_optional_tags({commit, state}, payload) {
    let optional_tags_result = await getp("demo/label_list_by_name.php", new URLSearchParams({"qname": payload.qname}));
    commit("set_optional_tags", optional_tags_result)
  }
}

代码解析：

actions =>get_optional_tags 异步获取标签列表=>commit=> set_optional_tags=>更新状态

Template

<template>
  <b-form-group label="标签">
    <b-form-tags v-model="tags" no-outer-focus class="mb-2">
      <template v-slot="{ tags,disabled, addTag, removeTag }">
        <ul v-if="tags.length > 0" class="list-inline d-inline-block mb-2">
          <li v-for="tag in tags" :key="tag" class="list-inline-item">
            <b-form-tag
              @remove="removeTag(tag)"
              :title="tag"
              :tag_disabled="tag_disabled"
              variant="primary"
            >{{ tag }}
            </b-form-tag>
          </li>
        </ul>

        <b-dropdown size="sm" variant="outline-secondary" block menu-class="w-100">
          <template v-slot:button-content>
            <b-icon icon="tag-fill"></b-icon>
            选择标签
          </template>
          <b-dropdown-form @submit.stop.prevent="() => {}">
            <b-form-group
              label-for="tag-search-input"
              label="Search tags"
              label-cols-md="auto"
              class="mb-0"
              label-size="sm"
              :description="optional_tag_inputDesc"
              :disabled="disabled"
            >
              <b-form-input
                v-model="optional_tag_input"
                id="tag-search-inpu"
                type="search"
                size="sm"
                autocomplete="off"
              ></b-form-input>
            </b-form-group>
          </b-dropdown-form>
          <b-dropdown-divider></b-dropdown-divider>
          <b-dropdown-item-button
            v-for="option in availableOptions"
            :key="option"
            @click="add_option_to_tags_Click({ option, addTag })"
          >
            {{ option }}
          </b-dropdown-item-button>
          <b-dropdown-text v-if="availableOptions.length === 0">
            没有可供选择的标记
          </b-dropdown-text>
        </b-dropdown>
      </template>
    </b-form-tags>
  </b-form-group>
</template>

深入理解：

b-form-group=> :description 结果提示

b-form-input => data 动态获取=>标签=>名称=>结果

b-dropdown-item-button =>availableOptions 展示可选标签->标签 =>点击=>添加标签

Script

<script>
  import {mapState} from "vuex";

  export default { 
    name: "demo",
    computed: {
      ...mapState({optional_tags: (state) => state.writer_article.optional_tags}),
      criteria() { 
        return this.optional_tag_input.trim().toLowerCase()
      },
      availableOptions() {
        const criteria = this.criteria 
        let result = this.$store.dispatch("get_optional_tags", {qname: this.criteria})
        if (result) {
          let temp_tags = []
          for (var optional_tag in  this.optional_tags) {
            temp_tags.push(this.optional_tags[optional_tag]['name'])
          }
          const options = temp_tags.filter(opt => this.tags.indexOf(opt) === -1)
          if (criteria) {
            return options.filter(opt => opt.toLowerCase().indexOf(criteria) > -1);
          }
          // Show all options available
          return options
        }
      },
      optional_tag_inputDesc() {
        if (this.criteria && this.availableOptions.length === 0) {
          return '没有与optional_tag_input条件匹配的标记'
        }
        return ''
      }
    },
    data() {
      return {
        optional_tag_input: '',//搜索标签文字
        tags: [],//选中标签数组
      }
    },
    methods: {
      add_option_to_tags_Click({option, addTag}) {
        addTag(option)
        this.optional_tag_input = ''
      }
    }
  }
</script>

深入理解：

computed：计算函数=>…mapState 获取 store 状态映射 optional_tags 为本地可选标签列表

availableOptions => criteria筛选输入内容格式为小写

this.$store.dipatch(“get_optional_tags”)=>条件获取标签列表=>格式数据 =>存放 temp_tags

const options = temp_tags.filter(opt => this.tags.indexOf(opt) === -1) 筛选 tags 排除标签

add_option_to_tags_Click=>添加选择标签=>放入 tags