Vue.js的@Mention#标签组件 - vue-mention

Vue.js的@Mention#标签组件 - vue-mention
插件名称 vue-mention
发布时间 2020年12月30日
插件作者 Akryum

Twitter和Facebook启发了@mention用户和#tag主题popper组件,用于输入和textarea元素。

如何使用它:

1.导入组件。

import { Mentionable } from 'vue-mention'

2.定义提及和标签。

const users = [
{
value: 'akryum',
firstName: 'Guillaume',
},
{
value: 'posva',
firstName: 'Eduardo',
},
{
value: 'atinux',
firstName: 'Sébastien',
},
]
const issues = [
{
value: 123,
label: 'Error with foo bar',
searchText: 'foo bar'
},
{
value: 42,
label: 'Cannot read line',
searchText: 'foo bar line'
},
{
value: 77,
label: 'I have a feature suggestion',
searchText: 'feature'
}
]

3.将组件插入模板。

<template>
  <Mentionable
    :keys="['@', '#']"
    :items="items"
    offset="6"
    insert-space
    @open="onOpen"
  >
    <textarea
      v-model="text"
    />
    <template #no-result>
      <div class="dim">
        No result
      </div>
    </template>
    <template #item-@="{ item }">
      <div class="user">
        {{ item.value }}
        <span class="dim">
          ({{ item.firstName }})
        </span>
      </div>
    </template>
    <template #item-#="{ item }">
      <div class="issue">
        <span class="number">
          #{{ item.value }}
        </span>
        <span class="dim">
          {{ item.label }}
        </span>
      </div>
    </template>
  </Mentionable>
</template>
export default {
  components: {
    Mentionable,
  },
  data () {
    return {
      text: '',
      items: [],
    }
  },
  methods: {
    onOpen (key) {
      this.items = key === '@' ? users : issues
    },
  },
}

4.所有可能的道具。

keys: {
  type: Array,
  required: true,
},
placement: {
  type: String,
  default: 'top-start',
},
items: {
  type: Array,
  default: () => [],
},
omitKey: {
  type: Boolean,
  default: false,
},
filteringDisabled: {
  type: Boolean,
  default: false,
},
insertSpace: {
  type: Boolean,
  default: false,
},
mapInsert: {
  type: Function,
  default: null,
},
limit: {
  type: Number,
  default: 8,
},

变更日志:

v1.0.0(2020年12月28日)

  • 固定:当输入为电子邮件时,禁用弹出框;当先前输入为空格或换行时,则弹出提示框
  • 固定:RegexError在提及时键入特殊字符时
  • 添加了“应用”事件
  • 添加了关闭事件和测试
  • 支持内容可编辑
  • 支持包装输入