Vue 組件 — V - Textcomplete

k00baa 發(fā)布于2019-08-20 16:34 / 3098人閱讀

摘要：之后，又是一個(gè)簡(jiǎn)單易用靈活的組件。這次我?guī)?lái)了，一個(gè)帶有文字匹配的。好，廢話(huà)少說(shuō)，接下來(lái)簡(jiǎn)單介紹一下如何使用。簡(jiǎn)單預(yù)覽最后，歡迎大家來(lái)給我提意見(jiàn)，我會(huì)不斷完善。

V - Distpicker 之后，V - Textcomplete 又是一個(gè)簡(jiǎn)單、易用、靈活的 Vue 組件。

哈，我又來(lái)啦。這次我?guī)?lái)了 V - Textcomplete ，一個(gè)帶有文字匹配的 Textarea。

可能會(huì)有人質(zhì)疑，這東東有什么用？用來(lái)干嘛的？

V - Textcomplete 是一個(gè)靈活，用起來(lái)超級(jí)簡(jiǎn)單的 Vue 組件，設(shè)定規(guī)則可用于 Emoji 表情的匹配，又或者 @ 某人時(shí)匹配當(dāng)前帖子下活躍用戶(hù)等，我相信這個(gè)功能在現(xiàn)有的很多文本編輯器都已經(jīng)有了。

然而又會(huì)有人質(zhì)疑，這種插件不是有很多的嗎？為何又去造一個(gè)這樣子的輪子呢？

沒(méi)錯(cuò)，確實(shí)是有不少這種插件，而且也相對(duì)成熟，但有沒(méi)有發(fā)現(xiàn)大部分都是依賴(lài) JQuery 的。而我要的是沒(méi)有 JQuery 而且是一個(gè)簡(jiǎn)單易用的 Vue 組件，掌控在自己手上的。

好，廢話(huà)少說(shuō)，接下來(lái)簡(jiǎn)單介紹一下如何使用 V - Textcomplete。

網(wǎng)站：https://textcomplete.iline.co

源碼：https://github.com/jcc/v-textcomplete

安裝

使用 npm 安裝：

npm install v-textcomplete --save

使用 yarn 安裝

yarn add v-textcomplete --save

使用 注冊(cè)組件

注冊(cè)全局組件

import TextComplete from "v-textcomplete"

Vue.component("text-complete", TextComplete);

注冊(cè)組件

import TextComplete from "v-textcomplete"

export default {

  components: { TextComplete }

}

簡(jiǎn)單使用

當(dāng)然這只是簡(jiǎn)單的用法，你可以通過(guò) strategies 加入各種匹配，新增各種玩法，如 @ 的匹配、Emoji 比表情的匹配。

簡(jiǎn)單預(yù)覽v-textcomplete

最后，歡迎大家來(lái)給我提意見(jiàn)，我會(huì)不斷完善。 https://github.com/jcc/v-textcomplete.

云服務(wù)器 GPU云服務(wù)器 vue組件 vue組件開(kāi)發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83009.html

相關(guān)文章

Vue.js Guide Essentials-說(shuō)人話(huà)-速記版

摘要：以下內(nèi)容根據(jù)部分速記。同時(shí)，需要在父組件標(biāo)簽中添加這個(gè)屬性，該屬性才能傳遞到子組件內(nèi)。把父組件傳遞的數(shù)據(jù)當(dāng)做子組件的初始值。以下內(nèi)容根據(jù)Vue.js Guide Essentials部分速記。不含動(dòng)畫(huà)/mixin/SSR/路由/狀態(tài)管理等部分. Introduction 建議閱讀原文 https://vuejs.org/v2/guide/in... 什么是Vue 開(kāi)始聲明式...

Sanchi 2019-08-21 18:38 評(píng)論0 收藏0
Vue官方推薦的風(fēng)格指南

摘要：官方推薦的風(fēng)格指南個(gè)人筆記最近剛注意到官方多了一個(gè)風(fēng)格指南的推薦。中始終用組件命名因?yàn)楣俜酵扑]風(fēng)格命名，所以能用就用組件命名單詞應(yīng)該是完整的單詞完整單詞帶易讀性的好處，和書(shū)寫(xiě)麻煩的缺點(diǎn)。 Vue官方推薦的風(fēng)格指南-個(gè)人筆記最近剛注意到vue官方多了一個(gè)vue風(fēng)格指南的推薦。因?yàn)闃I(yè)務(wù)中一直用的vue，所以梳理學(xué)習(xí)一下，來(lái)增加自己代碼的規(guī)范性，效果不錯(cuò)也可以安利到團(tuán)隊(duì)。文檔沒(méi)有對(duì)JS...

null1145 2019-08-22 18:28 評(píng)論0 收藏0
Vue_Vue權(quán)威指南

摘要：效率不高，很多多余，稱(chēng)之為臟檢查。通過(guò)索引設(shè)置數(shù)組元素并觸發(fā)視圖更新。解決閃爍問(wèn)題自定義指令自定義指令提供一種機(jī)制將數(shù)據(jù)的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫(kù)。 Vue通過(guò)簡(jiǎn)單 API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng) 輕量數(shù)據(jù)綁定指令插件化架構(gòu)從傳統(tǒng)后臺(tái)MVC 向REST API + 前端MV*遷移DOM是數(shù)據(jù)的一種自然映...

SimonMa 2019-08-21 14:31 評(píng)論0 收藏0
Vue.js起手式+Vue小作品實(shí)戰(zhàn)

摘要：本文是小羊根據(jù)文檔進(jìn)行解讀的第一篇文章，主要內(nèi)容涵蓋的基礎(chǔ)部分的知識(shí)的，文章順序基本按照官方文檔的順序，每個(gè)知識(shí)點(diǎn)現(xiàn)附上代碼，然后根據(jù)代碼給予個(gè)人的一些理解，最后還放上在線(xiàn)編輯的代碼以供練習(xí)和測(cè)試之用在最后，我參考上的一篇技博，對(duì)進(jìn)行初入的本文是小羊根據(jù)Vue.js文檔進(jìn)行解讀的第一篇文章，主要內(nèi)容涵蓋Vue.js的基礎(chǔ)部分的知識(shí)的，文章順序基本按照官方文檔的順序，每個(gè)知識(shí)點(diǎn)現(xiàn)附上代...

CompileYouth 2019-08-21 11:18 評(píng)論0 收藏0
Vue.js起手式+Vue小作品實(shí)戰(zhàn)

摘要：本文是小羊根據(jù)文檔進(jìn)行解讀的第一篇文章，主要內(nèi)容涵蓋的基礎(chǔ)部分的知識(shí)的，文章順序基本按照官方文檔的順序，每個(gè)知識(shí)點(diǎn)現(xiàn)附上代碼，然后根據(jù)代碼給予個(gè)人的一些理解，最后還放上在線(xiàn)編輯的代碼以供練習(xí)和測(cè)試之用在最后，我參考上的一篇技博，對(duì)進(jìn)行初入的本文是小羊根據(jù)Vue.js文檔進(jìn)行解讀的第一篇文章，主要內(nèi)容涵蓋Vue.js的基礎(chǔ)部分的知識(shí)的，文章順序基本按照官方文檔的順序，每個(gè)知識(shí)點(diǎn)現(xiàn)附上代...

付倫 2019-08-01 16:07 評(píng)論0 收藏0