Vue 组件 — V - Textcomplete

《Vue 组件 — V - Textcomplete》

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

《Vue 组件 — V - Textcomplete》

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

    原文作者:jcc
    原文地址: https://segmentfault.com/a/1190000009418079
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞