V – Distpicker 以后，V – Textcomplete 又是一个简朴、易用、天真的 Vue 组件。

哈，我又来啦。此次我带来了 V – Textcomplete ，一个带有笔墨婚配的 Textarea。

可能会有人质疑，这东东有什么用？用来干吗的？

V – Textcomplete 是一个天真，用起来超等简朴的 Vue 组件，设定划定规矩可用于 Emoji 脸色的婚配，又或许 @ 某人时婚配当前帖子下活泼用户等，我置信这个功能在现有的许多文本编辑器都已经有了。

但是又会有人质疑，这类插件不是有许多的吗？为什么又去造一个这模样的轮子呢？

没错，确实是有不少这类插件，而且也相对成熟，但有没有发明大部分都是依靠 JQuery 的。而我要的是没有 JQuery 而且是一个简朴易用的 Vue 组件，掌控在本身手上的。

好，废话少说，接下来简朴引见一下怎样运用 V – Textcomplete。

• 网站：https://textcomplete.iline.co

• 源码：https://github.com/jcc/v-textcomplete

装置

运用 npm 装置：

npm install v-textcomplete --save

运用 yarn 装置

yarn add v-textcomplete --save

运用

注册组件

注册全局组件

import TextComplete from 'v-textcomplete'

Vue.component('text-complete', TextComplete);

注册组件

import TextComplete from 'v-textcomplete'

export default {

  components: { TextComplete }

}

简朴运用

<template>
  <text-complete v-model="content" areaClass="textcomplete" :strategies="strategies"></text-complete>
</template>

<script>
import { default as githubEmoji } from './github_emoji'
import TextComplete from 'v-textcomplete'

export default {
  components: { TextComplete },
  data() {
    return {
      content: '',
      strategies: [{
        match: /(^|\s):([a-z0-9+\-\_]*)$/,
        search(term, callback) {
          callback(Object.keys(githubEmoji).filter(function (name) {
            return name.startsWith(term);
          }).slice(0, 10))
        },
        template(name) {
          return '<img width="17" src="' + githubEmoji[name] + '"></img> ' + name;
        },
        replace(value) {
          return '$1:' + value + ': '
        },
      }]
    }
  }
}
</script>

固然这只是简朴的用法，你能够经由过程 strategies 到场种种婚配，新增种种弄法，如 @ 的婚配、Emoji 比脸色的婚配。

简朴预览v-textcomplete

末了，迎接人人来给我提意见，我会不断完善。 https://github.com/jcc/v-textcomplete.