You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
16 KiB
31 lines
16 KiB
<template>
|
|
<view class="wxface-dialog" id="facedialog"><scroll-view class="wxface-face" scroll-y="true"><view class="wxface-face-item" @tap="selectface" data-face="[微笑]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/0.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[撇嘴]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/1.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[色]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/2.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[发呆]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/3.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[得意]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/4.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[流泪]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/5.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[害羞]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/6.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[闭嘴]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/7.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[睡]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/8.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[大哭]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/9.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[尴尬]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/10.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[发怒]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/11.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[调皮]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/12.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[呲牙]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/13.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[惊讶]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/14.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[难过]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/15.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[酷]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/16.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[囧]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/17.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[抓狂]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/18.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[吐]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/19.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[偷笑]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/20.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[愉快]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/21.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[白眼]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/22.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[傲慢]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/23.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[困]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/25.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[惊恐]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/26.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[流汗]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/27.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[憨笑]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/28.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[悠闲]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/29.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[奋斗]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/30.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[咒骂]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/31.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[疑问]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/32.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[嘘]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/33.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[晕]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/34.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[衰]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/36.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[骷髅]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/37.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[敲打]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/38.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[再见]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/39.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[擦汗]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/40.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[抠鼻]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/41.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[鼓掌]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/42.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[糗大了]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/43.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[坏笑]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/44.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[左哼哼]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/45.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[右哼哼]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/46.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[哈欠]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/47.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[鄙视]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/48.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[委屈]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/49.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[快哭了]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/50.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[阴险]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/51.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[亲亲]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/52.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[吓]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/53.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[可怜]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/54.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[菜刀]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/55.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[西瓜]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/56.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[啤酒]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/57.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[篮球]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/58.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[乒乓]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/59.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[咖啡]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/60.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[饭]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/61.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[猪头]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/62.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[玫瑰]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/63.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[凋谢]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/64.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[嘴唇]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/65.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[爱心]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/66.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[心碎]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/67.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[蛋糕]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/68.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[闪电]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/69.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[炸弹]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/70.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[刀]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/71.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[足球]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/72.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[瓢虫]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/73.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[便便]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/74.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[月亮]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/75.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[太阳]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/76.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[礼物]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/77.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[拥抱]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/78.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[强]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/79.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[弱]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/80.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[握手]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/81.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[胜利]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/82.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[抱拳]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/83.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[勾引]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/84.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[拳头]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/85.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[差劲]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/86.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[爱你]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/87.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[NO]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/88.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[OK]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/89.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[跳跳]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/90.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[发抖]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/91.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[怄火]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/92.png'"></image></view><view class="wxface-face-item" @tap="selectface" data-face="[转圈]"><image class="wxface-face-image" :src="pre_url + '/static/chat/wxface/93.png'"></image></view></scroll-view></view>
|
|
</template>
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
data(){
|
|
return {
|
|
pre_url:app.globalData.pre_url
|
|
}
|
|
},
|
|
props: {
|
|
params:{},
|
|
data:{}
|
|
},
|
|
methods:{
|
|
selectface:function(e){
|
|
var face = e.currentTarget.dataset.face
|
|
this.$emit('selectface',face);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
|
|
.wxface-dialog{border: 1px solid #f4f4f4; width:750rpx;position: fixed; bottom:100rpx; left:0rpx; right: 0rpx; margin: 0 auto;background:#fff;z-index:9;height:400rpx}
|
|
.wxface-face{width:750rpx;position:relative; max-height:400rpx; overflow: auto; padding: 20rpx; font-size: 0;display:flex;flex-direction:row;flex-wrap:wrap}
|
|
.wxface-face-item{cursor: pointer; display: inline-block; vertical-align: bottom; padding:10rpx 4rpx; text-align: center; width:70rpx; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}
|
|
.wxface-face-image{width:44rpx; height: 44rpx;}
|
|
|
|
</style>
|