vue3tribute v1.0.6

版本

(>=1.0.5)

依赖

Vue3+ (注意：使用前通过use挂载到vue上) tributejs

参数传值

<Vue3Tribute
    :options="options"
    @input="input" // 任何内容输入时触发
    @tribute-no-match="noMatch" // 内容不匹配时触发
    @tribute_labels="tribute_labels" //弹出框选中时触发
    placeholder="please input"
    v-model="modelValue" // 任何内容输入时触发
    class="selfClass"
</Vue3Tribute>
const options = reactive({
  trigger: "@",
  noMatchTemplate: "<li>暂无数据</li>",
  values: [
    { key: "1-1", value: "张三" },
    { key: "1-2", value: "李四" },
    { key: "1-3", value: "王五" },
    { key: "1-4", value: "周杰伦" }
  ],
  menuItemTemplate: function (item) {
    return item.original.key + " = " + item.original.value;
  },
  /**
   * --- 代表弹出框选中的值是不可编辑的（用于收集复选框里的选到的标签值）
   * --- 并且搭配selectTemplate的 <span :key="${item.string}" contenteditable="false">
   * --- 里的contenteditable="false"和:key="${item.string}" Key可以自定义名字，以上仅仅对弹出框选中的
   * --- 值是不可编辑的，可编辑的则不需要
   */
  noElementEditable: true,
  /**
   * --- "input" 代表的是input输入框, 其他值都代表 ”textarea“
   */
  type: 'input',
  /**
   * --- 复选框是否可以编辑
   */
  contenteditable: true,
  selectTemplate: function (item) {
    console.log(11, item)
    return (
      `<span :key="${item.string}" contenteditable="false"><a>` +
      "@" +
      item.original.value +
      "</a></span>"
    );
  },
});

除（noElementEditable， type，contenteditable）等自定义参数外其余参数均参考"tributejs"