vue-at

by fritx

fritx /vue-at

At.js for Vue.

433 Stars 85 Forks Last release: Not found MIT License 138 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

vue-at


    

  

Live Demo & Documentation: https://fritx.github.io/vue-at

Docs is powered by At-UI.

  • [x] Chrome / Firefox / Edge / IE9~IE11
  • [x] Plain-text based, no jQuery, no extra nodes
  • [x] Content-Editable / Textarea
  • [x] Avatars, custom templates
  • [x] Vue2 / Vue1
  • [x] Vuetify / Element-UI
  • [ ] Vue-CLI 3 migration

See also: react-at

Motivation

At.js is awesome, but:

  • It is based on jQuery and jQuery-Caret.
  • It introduces extra node wrappers.
  • It could be unstable on content edit/copy/paste.

Finally I ended up creating this.

npm i [email protected]  # for Vue2  


Using V-Model (Recommended)

With Content-Editable,

v-model
should be bound in
 container.
With Textarea,
v-model
should be bound in
 itself.
  

Textarea

npm i -S textarea-caret  # also, for textarea

Custom Templates

Custom List



Custom List with Vue 1.x

There is no "scoped slot" feature in Vue 1.
Use a "normal slot" with

data-
attribute instead.

Custom Tags

This gives you the option of changing the style of inserted tagged items. It is only supported for ContentEditable version, not Textarea.


  {{ s.current.name }}





Used with 3rd-party libraries

Vuetify v-textarea

  
  

Element-UI el-input

  
  

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.