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 }

}

簡單使用

<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.