vue实现在线客服功能（附完整代码）

公司需要在网站实现一个在线客服的功能，开始是用的jq实现的，但是！！！把代码拿到vue里使用的时候，Jq的事件一直没有办法触发，各种百度都没有结果然后就放弃了，最后找到一种很好的解决方法，完美实现了功能！！！还有感谢我的外援，哈哈哈哈哈，一直是我的后盾！！！！！！！！哈哈哈哈哈

 

以下为vue部分

主要是循环info里的数据，通过type来判断显示机器人还是用户。

用户发送消息后直接push进数组里即可

原生部分。对比之下还是vue更舒服一点。

  
  
  
  
  
  
  
  





  


  

  

    

      

        
        
      
      
      

        

          
          

            

              您好，欢迎使用网上营业厅，为保证账户安全，
              在会话过程中请勿透露您的账号、密码等信息。
            
            
1
            
2
            
3
          
        

        

      
      
      

        
        
          
          发 送
        
      
    
  






样式
.main {
  width: 100vw;
  height: 100vh;
  background:linear-gradient(180deg,rgba(149,179,212,1) 0%,rgba(74,131,194,1) 100%);
  overflow: hidden;
}
.box {
  width: 58%;
  /* width: 680px; */
  height: 500px;
  background-color: #FAFAFA;
  border-radius:10px;
  margin:10vh auto;
  position: relative;
}
.title{
  width: 100%;
  height: 10vh;
  background-color: #FFFFFF;
  border-radius:10px 10px 0 0 ;
}
.logo{
  width: 50px;
  height: 40px;
  margin: 11px 0 0 25px;
}
.title .title-hn {
  font-size: 25px;
  color: #3F5267;
  vertical-align: 10px;
}
.setproblem{
  width: 80%;
  height: 68px;
  background-color: #FFFFFF;
  border:1px solid rgba(221,221,221,1);
  border-radius:2px;
  position: absolute;
  bottom: 10%;
  left: 10%;
}
.setproblem textarea {
  color:#999999;
  padding: 10px;
  box-sizing: border-box;
}
.setproblem button {
  width:53px;
  height:23px;
  line-height: 23px;
  background:rgba(28,136,255,1);
  opacity:1;
  border-radius:2px;
  font-size: 10px;
  color: #FFFFFF;
  position: absolute;
  right: 5%;
  top: 30%;
  cursor: pointer;
}
.content {
  height: 300px;
  overflow-y:scroll;
  font-size: 14px;
}
.content .circle {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #EFF1F3;
}
.content .circle_r {
  position: absolute;
  left: 0%;
}
 .content .circle_l {
  vertical-align: -10px;
} 

.content .info_r .pic_r{
  width: 17px;
  height: 17px;
  margin: 8px;
}
.content .info_l .pic_l{
  width: 13px;
  height: 17px;
  margin: 8px 10px;
}
.content .info_r{
  margin-left: 20px;
  margin-top: 15px;
  position: relative;
}
.content .info_l{
  text-align: right;
  margin-right: 20px;
  color: #FFFFFF;
  margin-top: 10px;
}

.content .con_r{
  display: inline-block;
  /* max-width: 253px; */
  width: 253px;
  min-height: 55px;
  /* min-height: 20px; */
  background-color: #E3EAF2;
  border-radius: 6px;
  padding: 10px;
  margin-left: 40px;
}
.content .con_text {
  color: #333;
  margin-bottom: 5px;
}
.content .con_que {
  color: #1C88FF;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}

.content .con_l {
  display: inline-block;
  width: 253px;
  /* min-height: 20px; */
  min-height: 51px;
  background-color: #1C88FF;
  border-radius: 6px;
  padding: 10px;
  text-align: left;
  color: #fff;
  margin-right: 5px;
}
.content .time_r {
  margin-left: 45px;
  color: #999999;
  font-size: 12px;
}
.content .time_l {
  margin-right: 45px;
  color: #999999;
  font-size: 12px;
  margin-top: 5px;
}
#question {
  cursor: pointer;
}
.czkj-item-title {
  line-height: 25px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.czkj-item-question {
  cursor: pointer;
  display: block;
  padding: 8px;
  position: relative;
  border-bottom: 1px dashed #ccc;
  line-height: 20px;
  min-height: 20px;
  overflow: hidden;
}

.czkj-question-msg {
  float: left;
  font-size: 14px;
  color: #4aa4eb;
}