Vue.js
Need help with vue-at?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
fritx

Description

At.js for Vue.

443 Stars 89 Forks MIT License 138 Commits 83 Opened issues

Services available

Need anything else?

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.