小程序输入框带表情的组件(彩色版)
原创
©著作权归作者所有:来自51CTO博客作者reg183的原创作品,请联系作者获取转载授权,否则将追究法律责任
index.wxml
<emoji-picker emoji-list="{{emojiKeys}}" bindpick="bindEmojiPick"></emoji-picker>
<textarea value="{{msg}}" bindinput="onInputTextarea"></textarea>
<!-- 注:emoji-list为可选参数,可以不传,会使用默认的表情列表 -->
<view class='preview'>
所点击的表情:<emoji-text text="{{msg}}"></emoji-text>
</view>
index.js
const app = getApp()
const emojiList = require('../components/emoji-parser/wechat_emotion.js')
const emojiKeys = Object.keys(emojiList)
Page({
data: {
emojiKeys,
msg:''
},
onLoad: function () {
wx.setNavigationBarTitle({
title: '表情选择器组件',
})
},
onInputTextarea: function(e) {
const {
detail: {
value
}
} = e;
this.setData({
msg: value
})
},
bindEmojiPick(e){
const emojiCode = e.detail.emojiCode
console.log('点击了表情,组件传回',emojiCode)
this.setData({
msg:this.data.msg + emojiCode
})
}
})
index.json
{
"usingComponents": {
"emoji-text": "/components/emoji-parser/emoji-parser",
"emoji-picker": "/components/emoji-picker/emoji-picker"
}
}
组件及图片代码见我上传附件。
点击查看附加代码