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.

About the developer

fritx
459 Stars 94 Forks MIT License 138 Commits 89 Opened issues

Description

At.js for Vue.

Services available

!
?

Need anything else?

Contributors list

# 12,544
CSS
Electro...
Three.j...
callbac...
93 commits
# 175,061
Vue.js
CSS
Shell
annotat...
4 commits
# 533,475
Vue.js
CSS
HTML
2 commits
# 167,360
HTML
knockou...
mvvm-fr...
vue3
2 commits
# 53,832
Vue.js
Firefox
diction...
Chrome
1 commit
# 79,148
Vue.js
Ada
sed
Node.js
1 commit

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.