vue-emoji

基于 Vue2.0 的emoji插件

Vue-emoji

安装

yarn add rui-vue-emoji

使用示例

<link rel="stylesheet" type="text/css" href="./node_modules/vue-emoji-component/dist/vue-emoji.css">
<script src = './vue.min.js'></script>
<script src = './node_modules/vue-emoji-component/dist/vue-emoji.js'></script>

<div id="app">
  <div>
    <h1>Vue-Emoji</h1>
    <div contenteditable="" ref = 'edit' focus></div>
    <button ref = 'btn' @click = 'showEmoji = !showEmoji'>emoji</button>
    <vue-emoji
      v-show = 'showEmoji'
      ref = 'emoji'
      @select = 'showEmoji = false'
      @hide = 'handleHide'
    ></vue-emoji>
  </div>
</div>

new Vue({
  el: '#app',
  components: {
    VueEmoji
  },
  data () {
    return {
      showEmoji : false
    }
  },
  mounted () {
    this.$refs.emoji.appendTo({
      area: this.$refs.edit,
      btn: this.$refs.btn,
      position: 'top left'
    });
  },
  methods: {
    hide () {
      this.showEmoji = false;
    },
    handleHide (e) {
      this.hide();
    }
  }
});

在`webpack`中引入

// styles.js
import 'rui-vue-emoji/dist/vue-emoji.css';

你也可以考虑将雪碧图和单个图标上传到CDN, 那么需要改动一下js和css文件。

[class*="sprite-"] {
  background-image: url("https://your.cdn.path/")!important;
}

mounted () {
  this.$refs.emoji.appendTo({
    area: this.$refs.edit,
    btn: this.$refs.btn,
    position: 'top left'
  }).setPath('https://your.cdn.path/');
},

需要注意的是，在css中控制雪碧图的路径，在js中控制最后引用的单个表情图片的路径。

选项

事件

select: 选中表情时会触发此事件，事件参数为选中的表情对应的图片
hide: 触发隐藏事件，当发生这个事件后，需要在父组件中对弹窗进行关闭, 含有一个事件对象，表示点击的元素。

方法

`appendTo`

这个方法需要在父组件mounted的是时候进行调用，以便初始化参数。
至少需要传递两个参数area以及btn, area表示需要将表情插入的地方， btn表示触发表情弹窗显示的按钮。
可选的position选项用于设置表情框的位置，默认为top center, 表示在位于按钮的上方，居中显示。当第一个参数不为top的时候，将会置于按钮下方。第二个参数表示弹窗相对于按钮的位置，可选的有left, center, right三个选项。

`calcPosition`

用于重新计算弹窗的位置，当[contenteditable]内容增加的情况下，通常其高度也会变化，这个时候需要重新进行计算以更新弹窗的位置。遗憾的是，我没能找到一种自动监听其变化的方法，所以需要手动监听，然后再进行调用。

app.vue

watch: {
  showEmoji (value) { // showEmoji 为控制弹窗隐藏显示的属性。
    if (value) {
      this.$refs.emoji.calcPosition();
    }
  }
}

`getImgPathByUnicode`

该方法接收一个表情编码，如果能够找到对应的图片，则会返回基于前面设定的路径的图片，如果没有找到，则会返回null。

<vue-emoji
  v-show = 'showEmoji'
  ref = 'emoji'
  :unicode='true'
  @select = 'handleSelect'
  @hide = 'hide()'
></vue-emoji>

handleSelect (img) {
  if (img.nodeType === 3) {
    var $img = new Image();
    $img.src =  this.$refs.emoji.getImgPathByUnicode(img.textContent);
    $app1.appendChild($img);
  }
  this.hide();
}

`getUnicodeByImgPath`

该方法接受一个图片地址，返回对应的unicode编码的表情

`setPath`

用于指定所需使用的图片的地址路径。默认为当前根目录下的images/，推荐使用CDN.

属性

`unicode`

默认情况下当选中一个表情的时候会以图片的方式插入对应区域。你可以通过配置unicode选项来开启Unicode支持，也就是说，在这种情况下，选中一个表情的时候，会插入对应的Unicode字符。需要注意的是，相比于图片模式，使用Unicode的时候会缺少一些表情。

<vue-emoji
  v-show = 'showEmoji'
  ref = 'emoji'
  :unicode='true'
  @select = 'hide()'
  @hide = 'hide()'
></vue-emoji>

`captions`

默认情况下，会使用表情、自然、物品、地点、符号来作为每个emoji栏目的标题，可以通过使用组件的时候传入captions参数，来改变标题文字。

<vue-emoji
  v-show = 'showEmoji'
  ref = 'emoji'
  :captions = 'captions'
  @select = 'showEmoji = false'
  @hide = 'handleHide'
></vue-emoji>

data () {
  return {
    captions: ['Expressions', 'Nature', 'Goods', 'Lacation', 'Symbol']
  }
}

开发

git clone git@github.com:rishiqing/vue-emoji.git
cd vue-emoji
yarn
npm start

一些小问题

因为接触Vue的时间比较短，仓促之下做的这个东西也有太多不完善的地方。比如我希望的是，能够在template中就将元素的一些属性传递过去，从而取代在mounted方法里面手动调用appendTo
的方式，因为在我看来我现在的这种实现就是一个丑陋的hack, 然而当我多次尝试之后，也没有找到一个能够在父组件中渲染子组件的时候，向子组件里面传递父组件其他DOM节点的引用的方法。
当然，也许更大的原因还是在于我设计上的失误。所以，如果你有更好的方法，欢迎告诉我，在下不胜感激。

vue-emoji

安装

使用示例

在webpack中引入

选项

事件

方法

appendTo

calcPosition

getImgPathByUnicode

getUnicodeByImgPath

setPath

属性

unicode

captions

开发