npm install vue-at

- [x] Chrome / Firefox / Edge / IE9~IE11
- [x] Plain-text based, no jQuery, no extra nodes
- [x] Content-Editable / Textarea
- [x] Avatars, custom templates
- [x] Vue3 / Vue2 / Vue1
- [x] Vuetify / Element UI / Element Plus
- [ ] Vue-CLI migration
- [ ] Vite migration
Playground: https://we-demo.github.io/vue-at-vite-app/
Vue3 Docs: https://github.com/fritx/vue-at/tree/vue3#readme
Vue2 Docs: https://fritx.github.io/vue-at/ or see below
See also: react-at
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.
If you're using Vue3, read branch vue3 instead.
``plain`
npm i vue-at@next # for Vue3 (branch vue3)
npm i vue-at@2.x # for Vue2 (branch vue2)
npm i vue-at@1.x # for Vue1 (branch vue1-legacy)
npm i vue1-at # for Vue1 (branch vue1-new)
`vue
`
With Content-Editable, v-model should be bound in container.v-model
With Textarea, should be bound in
`vue
`
`vue
`
`plain`
npm i -S textarea-caret # also, for textarea
`vue
`
#### Custom List with Vue 1.x
There is no "scoped slot" feature in Vue 1.
Use a "normal slot" with data- attribute instead.
`vue`
This gives you the option of changing the style of inserted tagged items. It is only supported for ContentEditable version, not Textarea.
`vue
{{ s.current.name }}
{{ s.current.name }}
`
`vue`
`vue``