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