如何在 VueJS 中合并 2 个第三方组件

Question

我正在使用表单标签组件bootstrap-vue框架。我想使用 带有表单标签的vue-simple-suggest组件（来自 npm）来建议与用户查询相关的单词。用户可以从建议中选择多个单词，所选单词将作为药丸保存在表单标签中，如下图所示。

我不知道如何将两个组件合并为一个组件（或更好的方式），以便我可以使用引导程序的 UI 功能和第三方模块的自动建议功能。

我正在学习VueJs，我不知道我应该学习什么来做到这一点？

这是我的代码：

<template>
  <div>
    <vue-simple-suggest
      v-model="chosen"
      mode="select"
      :list="simpleSuggestionsList"
      :filter-by-query="true"
      :destyled="false"
    >

      <b-form-tags 
        placeholder="Enter Keyword"
        size="lg"
        tag-variant="success"
        tag-pills
        remove-on-delete
        separator=","
        class="my-3"
        @input="updateValue"
      ></b-form-tags>

    </vue-simple-suggest>

  </div>
</template>

<script>
import VueSimpleSuggest from 'vue-simple-suggest'
import 'vue-simple-suggest/dist/styles.css'

export default {
  name: "SeedWordsSuggestions",

  data() {
    return {
      chosen: '',
      seedWords: []
    }
  },

  components: {
    VueSimpleSuggest
  },

  methods: {

    simpleSuggestionsList() {
      return [
        'Angular',
        'ReactJs',
        'VueJs'
      ]
    },

    addSelectedWord(e) {
      console.log(`addSelectedWord`, e)
    },

    updateValue(value) {
      const pos = value.length
      this.seedWords.push(value[pos - 1])
      console.log(this.seedWords)
    }
  }
}
</script>

<style scoped>

</style>

Answer 1

以下解决方案将两个组件组合在一起，创建一个带有标签药丸的可编辑组合框。

根据的警告文档vue-simple-suggest，其自定义输入组件必须发出input、focus和blur事件，并且具有valueprop。此外，组件还需要一些未记录的事件：click、keydown和keyup。

b-form-tags有一个value道具，但缺少几个必需的事件。但是，您可以访问其内部input元素来附加您自己的转发$emit事件的事件处理程序：

export default {
  async mounted() {
    // wait a couple ticks to ensure the inner contents
    // of b-form-tags are fully rendered
    await this.$nextTick()
    await this.$nextTick()

    // <b-form-tags ref="tags">
    const input = this.$refs.tags.getInput()
    const events = [
      'focus',
      'blur',
      'input',
      'click',
      'keydown',
      'keyup'
    ]
    events.forEach(event =>
      input.addEventListener(event, e => this.$refs.tags.$emit(event, e))
    )
  },
}

仅上述更改将导致vue-simple-suggest在键入时正确显示/消失。但是，在与自动建议交互时，它不会添加/删除标签。该行为可以通过以下功能来实现：

1. ENTER或TAB按键会导致悬停的自动建议被添加为标签。如果没有悬停，则按键会将第一个自动建议添加为标签。
2. 单击自动建议会将自动建议添加为标签。
3. BACKSPACE自动建议标签上的 会将其删除。

功能1实现：

1. ref将s添加到vue-simple-suggestand中b-form-tags，以便我们稍后可以在 JavaScript 中访问组件：

<vue-simple-suggest ref="suggest">
  <b-form-tags ref="tags" />
</vue-simple-suggest>

2. keydown在 的内部输入上添加-handler b-form-tags：

export default {
  mounted() {
    //...

    // <b-form-tags ref="tags">
    const input = this.$refs.tags.getInput()
    input.addEventListener('keydown', e => this.onKeyDown(e))
  },
}

3. 按如下方式实现处理程序：

export default {
  methods: {
    async onKeyDown(e) {
      if (e.key === 'Enter' || e.key === 'Tab') {
        // prevent default so that the auto-suggestion isn't also
        // added as plaintext in b-form-tags
        e.preventDefault()

        // <vue-simple-suggest ref="suggest">
        if (this.$refs.suggest.hovered) {
          this.$refs.tags.addTag(this.$refs.suggest.hovered)

        } else {
          const suggestions = await this.$refs.suggest.getSuggestions(e.target.value)
          if (suggestions.length > 0) {
            this.$refs.tags.addTag(suggestions[0])

          } else {
            // no match, so clear chosen
            this.chosen = ''
          }
        }
      }
    }
  }
}

4. 为了防止与我们的处理程序发生冲突，请通过添加prop 来禁用b-form-tag自动添加标签：ENTERno-add-on-enter

<b-form-tags no-add-on-enter />

特征2实现：

1. 绑定suggestion-click事件处理程序：

<vue-simple-suggest @suggestion-click="onSuggestionClick">

2. 按如下方式实现处理程序：

export default {
  methods: {
    onSuggestionClick(suggestion) {
      this.$refs.tags.addTag(suggestion);
    },
  }
}

功能3的实现：

1. 将remove-on-delete道具添加到b-form-tags：

<b-form-tags remove-on-delete />

完整演示

顺便说一句，您可能会更好地使用 Vuetify v-combobox，它支持您尝试合并的两个组件的组合，但我将留给您探索:)