search

fritx / vue-at

At.js for Vue.
https://fritx.github.io/vue-at/
MIT License
532 stars 114 forks source link

2.5.0-beta w/ styled-tags insertion #55

Open fritx opened 6 years ago

fritx commented 6 years ago

Related issues: #13, #35, #42, #51, #52, #53

Related PR: #54 (pending)

README: (coming soon..) Online demos: (coming soon..)

<at :members="members" name-key="name" v-model="html2">
  <!-- custom tag: avatars -->
  <span slot="embeddedItem" slot-scope="s">
    <span class="tag"><img class="avatar" :src="s.current.avatar">{{ s.current.name }}</span>
  </span>

  <!-- custom list: avatars -->
  <template slot="item" scope="s">
    <img class="avatar" :src="s.item.avatar">
    <span class="name" v-text="s.item.name"></span>
  </template>

  <div class="editor" contenteditable></div>
</at>

More example at branch demo/try-emoji or commit https://github.com/fritx/vue-at/commit/7cdcea18613173806c1dbfd1b5ff781cc4d41add

Thank you all, @dmitry-kozachek, @jasonlfunk, @Zanzavar, @hfalucas, @gdutwyg, @chieh301, @wuyungen1996, @jrvaja, @Brimstedt 

# please try
npm i -S vue-at@2.5.0-beta
jggj21 commented 3 years ago

This functionality will become available for <at-ta> </at-ta>

using a textarea?

fritx commented 3 years ago

@jggj21 no, for now, "styled-tags" is just available for <div contenteditable>