vue-emoji
基于 Vue2.0 的emoji插件
安装
yarn add rui-vue-emoji
使用示例
Vue-Emoji emoji
el: '#app' components: VueEmoji { return showEmoji : false } { this$refsemoji; } methods: { thisshowEmoji = false; } { this; } ;
webpack
中引入
在// styles.js;
你也可以考虑将雪碧图和单个图标上传到CDN
, 那么需要改动一下js
和css
文件。
[
{ this$refsemoji;}
需要注意的是, 在css
中控制雪碧图的路径, 在js
中控制最后引用的单个表情图片的路径。
选项
事件
select
: 选中表情时会触发此事件, 事件参数为选中的表情对应的图片hide
: 触发隐藏事件, 当发生这个事件后, 需要在父组件中对弹窗进行关闭, 含有一个事件对象, 表示点击的元素。
方法
appendTo
这个方法需要在父组件mounted
的是时候进行调用, 以便初始化参数。
至少需要传递两个参数area
以及btn
, area表示需要将表情插入的地方, btn
表示触发表情弹窗显示的按钮。
可选的position
选项用于设置表情框的位置, 默认为top center
, 表示在位于按钮的上方, 居中显示。 当第一个参数不为top的时候, 将会置于按钮下方。 第二个参数表示弹窗相对于按钮的位置, 可选的有left
, center
, right
三个选项。
calcPosition
用于重新计算弹窗的位置, 当[contenteditable]
内容增加的情况下, 通常其高度也会变化, 这个时候需要重新进行计算以更新弹窗的位置。 遗憾的是, 我没能找到一种自动监听其变化的方法, 所以需要手动监听, 然后再进行调用。
app.vue
watch: { // showEmoji 为控制弹窗隐藏显示的属性。 if value this$refsemoji; }
getImgPathByUnicode
该方法接收一个表情编码, 如果能够找到对应的图片, 则会返回基于前面设定的路径的图片, 如果没有找到, 则会返回null。
{ if imgnodeType === 3 var $img = ; $imgsrc = this$refsemoji; $app1; this;}
getUnicodeByImgPath
该方法接受一个图片地址, 返回对应的unicode编码的表情
setPath
用于指定所需使用的图片的地址路径。 默认为当前根目录下的images/
, 推荐使用CDN.
属性
unicode
默认情况下当选中一个表情的时候会以图片的方式插入对应区域。你可以通过配置unicode
选项来开启Unicode
支持, 也就是说, 在这种情况下, 选中一个表情的时候, 会插入对应的Unicode
字符。需要注意的是, 相比于图片模式, 使用Unicode
的时候会缺少一些表情。
captions
默认情况下, 会使用表情、自然、物品、地点、符号
来作为每个emoji栏目的标题, 可以通过使用组件的时候传入captions
参数, 来改变标题文字。
{ 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节点的引用的方法。
当然, 也许更大的原因还是在于我设计上的失误。所以, 如果你有更好的方法, 欢迎告诉我, 在下不胜感激。