Skip to content
Vue JavaScript CSS HTML
Branch: dev
Clone or download
Latest commit 4a9473f May 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create FUNDING.yml May 27, 2019
src chore: update to vue 2.6 as devDeps, switch to v-slot directive in Ap… May 25, 2019
static At.vue + App.vue Dec 16, 2016
webpack docs: add element-ui el-input demo, and recommend v-model on textarea… May 25, 2019
.babelrc At.vue + App.vue Dec 16, 2016
.gitignore package-lock=false Apr 30, 2019
.npmignore
.npmrc
LICENSE license: MIT (for #9) Jun 3, 2017
README.md
WechatIMG1.jpeg feature: custom item templates with avatars Dec 24, 2016
WechatIMG2.jpeg feature: custom item templates with avatars Dec 24, 2016
index.html - fix(demo): fixed at-panel position on mobile via meta-viewport Aug 23, 2017
package.json chore: update to vue 2.6 as devDeps, switch to v-slot directive in Ap… May 25, 2019

README.md

vue-at


    

  

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

Docs is powered by At-UI.

  • Chrome / Firefox / Edge / IE9~IE11
  • Plain-text based, no jQuery, no extra nodes
  • Content-Editable / Textarea
  • Avatars, custom templates
  • Vue2 / Vue1
  • 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 vue-at@2.x  # for Vue2  <----
npm i vue-at@1.x  # for Vue1 (branch vue1-legacy)
npm i vue1-at  # for Vue1 (branch vue1-new)
<template>
  <at :members="members">
    <div contenteditable></div>
  </at>
</template>

<script>
import At from 'vue-at'

export default {
  components: { At },
  data () {
    return {
      members: ['Roxie Miles', 'grace.carroll', '小浩']
    }
  }
}
</script>

<style>
#app .atwho-view { /* more */ }
#app .atwho-ul { /* more */ }
</style>

Using V-Model (Recommended)

With Content-Editable, v-model should be bound in <at> container.
With Textarea, v-model should be bound in <textarea> itself.

<at v-model="html">
  <div contenteditable></div>
</at>

<at-ta>
  <textarea v-model="text"></textarea>
</at-ta>

Textarea

<template>
  <at-ta>
    <textarea></textarea>
  </at-ta>
</template>

<script>
// import At from 'vue-at' // for content-editable
import AtTa from 'vue-at/dist/vue-at-textarea' // for textarea

export default {
  components: { AtTa }
}
</script>
npm i -S textarea-caret  # also, for textarea

Custom Templates

Custom List

<template>
  <at :members="members" name-key="name">
    <template slot="item" slot-scope="s">
      <img :src="s.item.avatar">
      <span v-text="s.item.name"></span>
    </template>
    <div contenteditable></div>
  </at>
</template>

<script>
// ...
members: [{
  avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
  name: 'myrtie.green'
}, {
  avatar: 'https://randomuser.me/api/portraits/men/8.jpg',
  name: '椿木'
}]
</script>

<style>
#app .atwho-li { /* more */ }
#app .atwho-li img { /* more */ }
#app .atwho-li span { /* more */ }
</style>

Custom List with Vue 1.x

There is no "scoped slot" feature in Vue 1.
Use a "normal slot" with data- attribute instead.

<!-- vue1-at for vue@1.x -->
<template slot="item">
  <img data-src="item.avatar">
  <span data-text="item.name"></span>
</template>

Custom Tags

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

<span slot="embeddedItem" slot-scope="s">
  <span class="tag"><img :src="s.current.avatar">{{ s.current.name }}</span>
</span>

<!-- with Vue 2.6+ 'v-slot' directive -->
<!-- note at least two '<span>' wrapper are required to work -->
<template v-slot:embeddedItem="s">
  <span><span class="tag"><img class="avatar" :src="s.current.avatar">{{ s.current.name }}</span></span>
</template>

Used with 3rd-party libraries

Vuetify v-textarea

<at-ta :members="members">
  <!-- slots -->
  <v-textarea v-model="text"></v-textarea>
</at-ta>

Element-UI el-input

<at-ta :members="members">
  <!-- slots -->
  <el-input v-model="text" type="textarea"></el-input>
</at-ta>
You can’t perform that action at this time.