Vue 组件 — V - Textcomplete

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 }

}

简单使用

当然这只是简单的用法，你可以通过 strategies 加入各种匹配，新增各种玩法，如 @ 的匹配、Emoji 比表情的匹配。

简单预览v-textcomplete

最后，欢迎大家来给我提意见，我会不断完善。 https://github.com/jcc/v-textcomplete.