https://github.com/fritx/vue-at

At.js for Vue.
https://github.com/fritx/vue-at

at atwho vue

Last synced: 4 days ago
JSON representation

At.js for Vue.

• Host: GitHub
• URL: https://github.com/fritx/vue-at
• Owner: fritx
• License: mit
• Created: 2016-12-16T17:29:08.000Z (almost 8 years ago)
• Default Branch: vue2
• Last Pushed: 2023-06-12T04:03:34.000Z (over 1 year ago)
• Last Synced: 2024-04-15T00:48:33.267Z (7 months ago)
• Topics: at, atwho, vue
• Language: Vue
• Homepage: https://fritx.github.io/vue-at/
• Size: 3.74 MB
• Stars: 528
• Watchers: 16
• Forks: 114
• Open Issues: 93
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://github.com/fritx/react-at)

## Motivation

[At.js](https://github.com/ichord/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](https://github.com/fritx/vue-at/tree/vue3#readme) instead.**

```plain

npm i vue-at@next  # for Vue3 (branch vue3)

npm i [email protected]  # for Vue2 (branch vue2)

npm i [email protected]  # for Vue1 (branch vue1-legacy)

npm i vue1-at  # for Vue1 (branch vue1-new)

```

```vue

  

    


  


import At from 'vue-at'

export default {

  components: { At },

  data () {

    return {

      members: ['Roxie Miles', 'grace.carroll', '小浩']

    }

  }

}

#app .atwho-view { /* more */ }

#app .atwho-ul { /* more */ }

```

## Using V-Model (Recommended)

With Content-Editable, `v-model` should be bound in `` container.


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

```vue

  


  

```

## Textarea

```vue

  

    

  

// import At from 'vue-at' // for content-editable

import AtTa from 'vue-at/dist/vue-at-textarea' // for textarea

export default {

  components: { AtTa }

}

```

```plain

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

```

## Custom Templates

### Custom List

```vue

  

    

      

      

    

    


  


// ...

members: [{

  avatar: 'https://randomuser.me/api/portraits/men/2.jpg',

  name: 'myrtie.green'

}, {

  avatar: 'https://randomuser.me/api/portraits/men/8.jpg',

  name: '椿木'

}]

#app .atwho-li { /* more */ }

#app .atwho-li img { /* more */ }

#app .atwho-li span { /* more */ }

```

#### Custom List with Vue 1.x

There is no "scoped slot" feature in Vue 1.


Use a "normal slot" with `data-` attribute instead.

```vue

  

  

```

### Custom Tags

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 }}

```

## Used with 3rd-party libraries

### Vuetify v-textarea

```vue

  

  

```

### Element-UI el-input

```vue

  

  

```