Vue 元件 — V - Textcomplete

cjjian發表於2017-05-15
Vue元件

Powered By Jiajian Chan

V - Distpicker 之後，V - Textcomplete 又是一個簡單、易用、靈活的 Vue 元件。

哈，我又來啦。這次我帶來了 V - Textcomplete ，一個帶有文字匹配的 Textarea。

可能會有人質疑，這東東有什麼用？用來幹嘛的？

V - Textcomplete 是一個靈活，用起來超級簡單的 Vue 元件，設定規則可用於 Emoji 表情的匹配，又或者 @ 某人時匹配當前帖子下活躍使用者等，我相信這個功能在現有的很多文字編輯器都已經有了。

然而又會有人質疑，這種外掛不是有很多的嗎？為何又去造一個這樣子的輪子呢？

沒錯，確實是有不少這種外掛，而且也相對成熟，但有沒有發現大部分都是依賴 JQuery 的。而我要的是沒有JQuery 而且是一個簡單易用的 Vue 元件，掌控在自己手上的。

好，廢話少說，接下來簡單介紹一下如何使用 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

textcomplete-preview

最後，歡迎大家來給我提意見，我會不斷完善。 https://github.com/jcc/v-textcomplete.

本作品採用《CC 協議》，轉載必須註明作者和本文連結
Nothing is impossible. —— @Jiajian Chan

相關文章