增加表情图片

static/css/common.css

@@ -68,5 +68,17 @@
     display: none;
 }
 .faceBoxList{
-
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.faceBoxList li{
+    cursor: pointer;
+    float: left;
+    border: 1px solid #e8e8e8;
+    width: 28px;
+    overflow: hidden;
+    margin: -1px 0 0 -1px;
+    padding: 4px 2px;
+    text-align: center;
 }

static/html/chat_page.html

@@ -113,8 +113,9 @@
             <el-input type="textarea" class="chatArea" v-model="messageContent" v-on:keyup.enter.native="chatToUser"></el-input>
             <div class="faceBox">
                 <ul class="faceBoxList">
-                    <li title="[微笑]"><img src="/static/images/face/0.gif"></li>
+                    <li class="faceIcon" v-for="v in face"  :title="v.name"><img :src="'/static/images/face/'+v.path"></li>
                 </ul>
+                <div class="clear"></div>
             </div>
             <div class="faceBtn"></div>
             <el-button type="primary" class="chatBoxSendBtn" size="small" v-on:click="chatToUser">{{.SendBtn}}</el-button>
@@ -146,6 +147,7 @@
             messageContent:"",
             chatTitle:"正在连接...",
             visitor:{},
+            face:[],
         },
         methods: {
             //初始化websocket
@@ -370,11 +372,32 @@
 
             },
             initCss(){
+                var _this=this;
                 $(function () {
                     $(".chatBox").css("max-height",$(window).height());
                     if (top.location != location){
                         $(".chatBox").css("max-height",$(window).height()-65);
                     }
+                    //展示表情
+                    var alt = ["[微笑]", "[嘻嘻]", "[哈哈]", "[可爱]", "[可怜]", "[挖鼻]", "[吃惊]", "[害羞]", "[挤眼]", "[闭嘴]", "[鄙视]", "[爱你]", "[泪]", "[偷笑]", "[亲亲]", "[生病]", "[太开心]", "[白眼]", "[右哼哼]", "[左哼哼]", "[嘘]", "[衰]", "[委屈]", "[吐]", "[哈欠]", "[抱抱]", "[怒]", "[疑问]", "[馋嘴]", "[拜拜]", "[思考]", "[汗]", "[困]", "[睡]", "[钱]", "[失望]", "[酷]", "[色]", "[哼]", "[鼓掌]", "[晕]", "[悲伤]", "[抓狂]", "[黑线]", "[阴险]", "[怒骂]", "[互粉]", "[心]", "[伤心]", "[猪头]", "[熊猫]", "[兔子]", "[ok]", "[耶]", "[good]", "[NO]", "[赞]", "[来]", "[弱]", "[草泥马]", "[神马]", "[囧]", "[浮云]", "[给力]", "[围观]", "[威武]", "[奥特曼]", "[礼物]", "[钟]", "[话筒]", "[蜡烛]", "[蛋糕]"], arr = {};
+                    $.each(alt, function (index, item) {
+                        _this.face.push({"name":item,"path":index + '.gif'});
+                    });
+                    $(".faceBtn").click(function(){
+                        var status=$('.faceBox').css("display");
+                        if(status=="block"){
+                            $('.faceBox').hide();
+                        }else{
+                            $('.faceBox').show();
+                        }
+                    });
+                    $(".faceIcon").click(function(){
+                        debugger;
+
+                        var title=$(this).attr("title");
+                        _this.messageContent+="face"+title;
+                        $('.faceBox').hide();
+                    });
                 });
             },
             //心跳
@@ -398,7 +421,10 @@
                     document.title = originTitle;
                 };
             },
+            //表情点击事件
+            showFace(){
 
+            }
         },
         created: function () {
             this.init();

static/js/functions.js

@@ -53,3 +53,7 @@ function flashTitle() {
     }
     titleTimer = setTimeout("flashTitle()", 500);
 }
+
+function replaceContent (content) {// 转义聊天内容中的特殊字符
+
+}