基于element-ui 模仿微信聊天页面以及滚动条隐藏在chrome和其他浏览器的处理
1、效果图
2、代码
<template>
<div style=" overflow: hidden;">
<el-row>
<el-col :span="18" :offset="3">
<div
id="dataShow"
onmouseover="this.style.overflow='overlay'"
onmouseout="this.style.overflow='hidden'"
class="dataShow"
>
<div
v-for="(item,index) in radioInfoList"
:key="index"
style="background-color: #f5f5f5; padding:24px;"
>
<el-row>
<el-col :span="20" :offset="3">
<span class="aa">
{{ item.message1 }}
</span>
</el-col>
<el-col :span="1">
<span>
<svg-icon slot="reference" icon-class="girl" style="font-size: 40px" /> <!--对应头像-->
</span>
</el-col>
</el-row>
<br>
<el-row>
<el-col :span="1">
<span>
<svg-icon slot="reference" icon-class="person" style="font-size: 40px" />
</span>
</el-col>
<el-col :span="20">
<span class="bb">
{{ item.message2 }}
</span>
</el-col>
</el-row>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
js
radioInfoList: [{
user: '周先生',
robot: '专属客服小美',
message1: '您好，周先生，我是你的专属客服',
message2: '你好，有什么事情',
time1: '2019-11-19 09:05:55',
time2: '2019-11-19 09:06:55'
}, {
user: '周先生',
robot: '专属客服小美',
message1: '好的，我们稍后会把账单以短信的形式发给您，请您务必按照承诺在今晚六点之前还款，以免对您的账户及个人信用产生不良影响。我行会持续跟踪您的还款情况，如未按时到账将再次与您联系',
message2: '这个，最近手头有点近，能缓两天吗，届时一定本息还完',
time1: '2019-11-19 09:07:55',
time2: '2019-11-19 09:08:55'
},
{
user: '周先生',
robot: '专属客服小美',
message1: ' 我能理解您的情况，我建议您想办法通知家人、朋友或同事周转一下，在今晚六点之前周转，避免给您的账户和个人信用带来不良影响，可以吗？\n',
message2: '那好吧，我去筹钱',
time1: '2019-11-19 09:10:33',
time2: '2019-11-19 09:10:55'
}, {
user: '周先生',
robot: '专属客服小美',
message1: ' 好的,周先生，你满意本次服务的话请给个好评？\n',
message2: '好的',
time1: '2019-11-19 09:11:03',
time2: '2019-11-19 09:11:26'
}, {
user: '周先生',
robot: '专属客服小美',
message1: '好的，周先生，再见，祝您生活愉快',
message2: '再见',
time1: '2019-11-19 09:11:40',
time2: '2019-11-19 09:11:55'
}],
visible: false,
// 滚动到底部
scrollToBottom() {
this.$nextTick(() => {
const div = document.getElementById('dataShow')
div.scrollTop = div.scrollHeight
})
},
css
<style>
.font{
font-size: 16px;
font-weight: bold;
font-family: "微软雅黑 Light";
}
.dataShow{
overflow-y: hidden;
overflow-x: hidden;
margin-bottom: -24px;
margin-top: -24px;
height:600px;
margin-bottom: 5%;
margin-top: 5%;
}
.aa{
float: right;
position: relative;
display: inline-block;
max-width: calc(40%);
min-height: 35px;
line-height: 2.1;
font-size: 15px;
padding: 6px 10px;
text-align: left;
word-break: break-all;
background-color: #9eea6a;
color: #000;
border-radius: 4px;
box-shadow: 0px 1px 7px -5px #000;
border:0px solid #000;
margin-top: 0;
margin-right: 10px;
}
.aa:after {
content: "";
border-top: solid 5px #00800000;
border-left: solid 10px #9eea6a;
border-right: solid 10px #00800000;
border-bottom: solid 5px #00800000;
position: absolute;
top: 10px;
left: 100%;
}
.bb{
display: inline-block;
line-height:30px;
font-style: normal;
background-color: white;
letter-spacing: 2px;
position: relative;
max-width: calc(40%);
min-height: 35px;
line-height: 2.1;
font-size: 15px;
padding: 6px 10px;
text-align: left;
word-break: break-all;
border-radius: 4px;
color: #000;
box-shadow: 0px 1px 7px -5px #000;
border:0px solid #000;
margin-top: 0;
margin-left: 10px;
}
.bb:after {
content: "";
border-top: solid 5px #00800000;
border-left: solid 10px #00800000;
border-right: solid 10px white;
border-bottom: solid 5px #00800000;
position: absolute;
top: 10px;
right: 100%; } </style>
3、关于滚动条的问题（Chrome 和 其他浏览器 做不同的处理）
<template>
<div class="app-container">
<el-row style=" overflow: hidden;">
<el-col :span="" :offset="" style="margin-top: 3px">
<div
id="dataShow"
onmouseover="this.style.overflow='scroll'"
onmouseout="this.style.overflow='hidden'"
:class="[browser==='Chrome'? 'dataShowCM': 'dataShowFF']"
>
<div
v-for="(item,index) in radioInfoList"
:key="index"
style="background-color: #f5f5f5; padding:24px;"
>
<el-row v-if="!(item.customerSen==null || item.customerSen =='')">
<el-row style="margin-bottom: 5px">
<el-col :span="" :offset="">
<span style="font-size: 16px;color: #f5f5f5;background-color: #dadada;">
{{ item.customerTime }}
</span>
</el-col>
</el-row>
<el-col :span="" :offset="">
<span class="aa">
{{ item.customerSen }}
</span>
</el-col>
<el-col :span="">
<span>
<el-popover
placement="bottom"
:title="customer"
width=""
trigger="hover"
content=""
>
<div class="block">
<el-tooltip placement="top" content="点击查看大图">
<el-image
:src="userSrc"
style="height: 120px"
:preview-src-list="srcList"
/></el-tooltip>
</div>
<svg-icon slot="reference" icon-class="person" style="font-size: 40px" />
</el-popover>
</span>
</el-col>
</el-row>
<el-row v-if="!(item.robotSen==null || item.robotSen== '')">
<el-row style="margin-bottom: 5px">
<el-col :span="" :offset="">
<span style="font-size: 16px;color: #f5f5f5;background-color: #dadada;margin-bottom: 10px">
{{ item.robotTime }}
</span>
<br>
</el-col>
</el-row>
<el-col :span="">
<span>
<el-popover
placement="bottom"
title="专属客服"
width=""
trigger="hover"
:content="item.user"
>
<div class="block">
<el-tooltip placement="top" content="点击查看大图">
<el-image
style="height: 120px"
:src="robotSrc"
:preview-src-list="robotList"
/>
</el-tooltip>
</div>
<svg-icon slot="reference" icon-class="girl" style="font-size: 40px" />
</el-popover>
</span>
</el-col>
<el-col :span="">
<span class="bb">
{{ item.robotSen }}
</span>
</el-col>
</el-row>
</div>
</div>
<div style="background-color: white;">
<el-divider/>
<el-divider content-position="left">
<el-tooltip content="文字对话正在进行中。。。" placement="top">
<el-button
v-if="isButton"
id="start"
type="success"
plain
@click="start"
><svg-icon icon-class="click" />对话已建立</el-button>
</el-tooltip>
<el-tooltip content="点击开始对话。。。" placement="top">
<el-button
v-if="!isButton"
id="start"
type="danger"
plain
@click="start"
><svg-icon icon-class="stop" />开始对话</el-button>
</el-tooltip>
<el-tooltip content="操作记录" placement="top">
<el-button
id="start"
type="warning"
plain
@click="toRadioTalk"
><svg-icon icon-class="editor" />操作记录</el-button>
</el-tooltip>
</el-divider>
<el-row>
<el-col :span="" :offset="">
<el-input
id="condition"
v-model="condition"
type="textarea"
autofocus
clearable
maxlength=""
show-word-limit
:autosize="{minRows:3,maxRows:6}"
resize="none"
placeholder="在这里输入..."
@keyup.enter.native="submitSearch"
/>
</el-col>
</el-row>
<el-row style="margin: 4px 4px">
<el-button
id="submit"
onmouseover="this.style.backgroundColor='#129611';this.style.color='#f5f5f5'"
onmouseout="this.style.backgroundColor='#f5f5f5';this.style.color='#606060'"
@click="submitSearch"
>
<svg-icon icon-class="enter" />发送
</el-button>
</el-row>
</div>
</el-col>
</el-row>
</div>
</template> <script>
export default {
name: 'Index', data() {
return {
isShow: true,
isButton: false,
radioTxt: '',
condition: '',
startRow: {
dialogueId: '',
robotSen: '',
robotTime: '',
customerSen: '',
customerTime: ''
},
dialogueId: '',
endRow: {},
dataList: [], // 单次对话的信息
radioInfoList: [], // 信息列表
visible: false,
customer: '',
userSrc: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
robotSrc: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
robotList: [
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
],
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
],
browser: 'Chrome'
}
},
created() {
this.browser = this.myBrowser()
console.log('当前浏览器：' + this.browser)
this.startRow = {}
this.customer = '王先生' + '\n' + '地区：浙江杭州'
},
methods: {
// 滚动到底部
scrollToBottom() {
this.$nextTick(() => {
const div = document.getElementById('dataShow')
div.scrollTop = div.scrollHeight
})
},
toRadioTalk() {
this.$router.push({
path: '/talkTest/talkList'
})
},
start() {
this.condition = ''
this.endRow = {}
this.dataList = []
const data = {
sysMap: {
features: '开始对话'
},
parameterList:
[]
}
this.$request({
url: '/talk/start',
method: 'post',
data
}).then(res => {
this.isButton = true
this.endRow = res.retMap.talk
this.radioInfoList.push(this.endRow)
this.dataList.push(this.endRow)
// Cookies.set('dialogueId', res.retMap.talk.dialogueId)
this.dialogueId = res.retMap.talk.dialogueId
// Cookies.set('talkRecord', this.radioInfoList)
console.log(this.dialogueId)
this.scrollToBottom()
}).catch(e => {
console.log(e)
this.$message.error('未知错误，请联系开发人员...')
this.isButton = false
})
},
saveToTxt(id, list) {
const data = {
sysMap: {
features: '写入txt'
},
parameterList:
[
id,
list,
this.$store.getters.name
]
}
this.$request({
url: '/talk/writeToTxt',
method: 'post',
data
}).then(res => {
console.log(res.retCode)
if (res.retCode === 'IF0000') {
console.log('记录已保存')
} else {
console.log('记录保存失败')
}
})
},
// 去掉回车换行符
clearBr(key) {
key = key.replace(/<\/?.+?>/g, '')
key = key.replace(/[\r\n]/g, '')
return key
},
/* keySubmit() {
var test = this.condition
console.log('---' + test)
var tt = this.clearBr(test)
console.log('-tt--' + tt)
if (tt === '' || tt === undefined || tt === null) {
this.$message.error('当前没有输入。。。')
this.scrollToBottom()
}
},*/
submitSearch() {
this.condition = this.clearBr(this.condition)
console.log('对话id' + this.dialogueId)
if (this.condition === '' || this.condition === undefined || this.condition === null) {
this.$message.error('当前没有输入。。。')
this.scrollToBottom()
} else if (this.dialogueId === undefined || this.dialogueId === '') {
this.$message.error('请先start')
this.condition = ''
} else {
console.log('id' + this.dialogueId)
this.startRow = {}
this.startRow.robotSen = null
this.startRow.robotTime = null
this.startRow.customerSen = this.condition
this.startRow.dialogueId = this.dialogueId
var d = new Date()
this.startRow.customerTime = d.getFullYear() + '-' + ((d.getMonth() < ? '' + (d.getMonth() + ) : (d.getMonth() + ))) +
'-' + (d.getDate() < ? '' + d.getDate() : d.getDate()) + ' ' + (d.getHours() < ? '' + d.getHours() : d.getHours()) +
':' + (d.getMinutes() < ? '' + d.getMinutes() : d.getMinutes()) + ':' + (d.getSeconds() < ? '' + d.getSeconds() : d.getSeconds())
// this.startRow.dialogueId = Cookies.get('dialogueId')
this.radioInfoList.push(this.startRow)
this.dataList.push(this.startRow)
const data = {
sysMap: {
features: '对话细节'
},
parameterList:
[
this.startRow.dialogueId,
this.startRow.customerSen,
this.startRow.customerTime
]
}
this.$request({
url: '/talk/talking',
method: 'post',
data
}).then(res => {
this.endRow = res.retMap.talk
this.radioInfoList.push(this.endRow)
this.dataList.push(this.endRow)
this.scrollToBottom()
this.condition = ''
if (res.retCode === 'IF0002') {
// this.$message.error('对话结束，记录已保存')
this.saveToTxt(this.startRow.dialogueId, this.dataList)
this.isButton = false
this.startRow.dialogueId = ''
}
})
}
},
myBrowser() {
var userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf('Opera') > - // 判断是否Opera浏览器
var isIE = userAgent.indexOf('compatible') > - &&
userAgent.indexOf('MSIE') > - && !isOpera // 判断是否IE浏览器
var isEdge = userAgent.indexOf('Edge') > - // 判断是否IE的Edge浏览器
var isFF = userAgent.indexOf('Firefox') > - // 判断是否Firefox浏览器
var isSafari = userAgent.indexOf('Safari') > - &&
userAgent.indexOf('Chrome') === - // 判断是否Safari浏览器
var isChrome = userAgent.indexOf('Chrome') > - &&
userAgent.indexOf('Safari') > - // 判断Chrome浏览器 if (isIE) {
var reIE = new RegExp('MSIE (\\d+\\.\\d+);')
reIE.test(userAgent)
var fIEVersion = parseFloat(RegExp['$1'])
if (fIEVersion === ) {
return 'IE7'
} else if (fIEVersion === ) {
return 'IE8'
} else if (fIEVersion === ) {
return 'IE9'
} else if (fIEVersion === ) {
return 'IE10'
} else if (fIEVersion === ) {
return 'IE11'
} else {
return ''
}// IE版本过低
// eslint-disable-next-line no-unreachable
return 'IE'
}
if (isOpera) {
return 'Opera'
}
if (isEdge) {
return 'Edge'
}
if (isFF) {
return 'FF'
}
if (isSafari) {
return 'Safari'
}
if (isChrome) {
return 'Chrome'
}
}
}
}
</script> <style>
.font{
font-size: 16px;
font-weight: bold;
font-family: "微软雅黑 Light";
}
/* <!--非Chrome 隐藏滚动条-->*/
.dataShowFF{
height:600px;
overflow-y: hidden;
overflow-x: hidden;
margin-bottom: -14px;
margin-top: 0px;
background-color: #f5f5f5;
scrollbar-width: none;
}
/* <!--Chrome 隐藏滚动条-->*/
.dataShowCM{
height:600px;
overflow-y: hidden;
overflow-x: hidden;
margin-bottom: -14px;
margin-top: 0px;
background-color: #f5f5f5;
}::-webkit-scrollbar {
display: none;
}
.aa{
float: right;
position: relative;
display: inline-block;
max-width: calc(%);
line-height: 2.1;
min-height: 35px;
font-size: 15px;
padding: 6px 10px;
text-align: left;
word-break: break-all;
background-color: #9eea6a;
color: #;
border-radius: 4px;
box-shadow: 0px 1px 7px -5px #;
border:0px solid #;
margin-top: ;
margin-right: 10px;
}
.aa:after {
content: "";
border-top: solid 5px #;
border-left: solid 10px #9eea6a;
border-right: solid 10px #;
border-bottom: solid 5px #;
position: absolute;
top: 10px;
left: %;
}
.bb{
display: inline-block;
line-height:30px;
font-style: normal;
background-color: white;
letter-spacing: 2px;
position: relative;
max-width: calc(%);
min-height: 35px;
line-height: 2.1;
font-size: 15px;
padding: 6px 10px;
text-align: left;
word-break: break-all;
border-radius: 4px;
color: #;
box-shadow: 0px 1px 7px -5px #;
border:0px solid #;
margin-top: ;
margin-left: 10px;
}
.bb:after {
content: "";
border-top: solid 5px #;
border-left: solid 10px #;
border-right: solid 10px white;
border-bottom: solid 5px #;
position: absolute;
top: 10px;
right: %; }
#condition{
border:1px solid #f4c08a;
}
#submit{
border:0px solid #;
float: right;
}
#start{
border:0px solid #;
}
</style>
基于element-ui 模仿微信聊天页面以及滚动条隐藏在chrome和其他浏览器的处理的更多相关文章
- iOS开发之微信聊天页面实现
在上篇博客(iOS开发之微信聊天工具栏的封装)中对微信聊天页面下方的工具栏进行了封装,本篇博客中就使用之前封装的工具栏来进行聊天页面的编写.在聊天页面中主要用到了TableView的知识,还有如何在俩 ...
- 基于element UI 的上传插件
为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...
- 基于element ui的图片预览插件
写插件很简单,满足两个条件即可,一.基本的逻辑思路,二.熟悉插件语法要求.本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图: 项目采用的是vue-element-admi ...
- 基于element ui的级联选择器组件实现的分类后台接口
今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持. 这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...
- vue的ui库使用Element UI，纯html页面，不使用webpack那玩意
使用手册访问:https://cloud.tencent.com/developer/doc/1270 第一步:在head添加样式 <link rel="stylesheet" ...
- vue基于 element ui 的按钮点击节流
vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...
- 基于element ui 实现七牛云自定义key上传文件，并监听更新上传进度
借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload&quo ...
- javascript 禁止页面选取-兼容IE、Chrome和firefox浏览器
在做到一个页面需要禁止网页内容被选取的时候,碰到浏览器兼容的问题,解决方法如下 1.单独使用适用于IE.Chrome浏览器,主要是在head的<script>标签里面加上如下代码 docu ...
- 从APP跳转到微信指定联系人聊天页面功能的实现与采坑之旅
起因: 最近做的APP中有一个新功能:已知用户微信号,可点击直接跳转到当前用户微信聊天窗口页面. 当时第一想法是使用无障碍来做,并且觉得应该不难,只是逻辑有点复杂.没想到最终踩了好多坑,特地把踩过的坑 ...
随机推荐
- Git 初级使用 windows & Ubuntu
目的:有一段代码要进行几个人同时维护,但是传来传去不方便,所以希望在github上实现,前提是每台机器都有git 在github 上新建一个项目 然后会看到,大体上就按这执行就可以 在Windows系 ...
- e.detail.value 获取input的值
inputId(e) { this.setData({ inputId: e.detail.value }) },
- 把"重试"抽象出来做个工具类吧
背景介绍 我们在工作中难免会写一些重复性的代码,所以需要我们具备一定的抽象能力,比如把共同的逻辑抽取到抽象类中,也可以通过一些工具类来避免冗余代码 今天这篇文章就是把一个调用服务的重试功能抽取出一个工 ...
- Codeforces_733_D
http://codeforces.com/problemset/problem/733/D 先给边排序,然后按3条边排序,只要判断相邻是否能组成长方体. #include<iostream&g ...
- 2019icpc南京网络赛 A The beautiful values of the palace(离线+树状数组)
题意: (假设所有的点对应的值已经求出)给你一个1e6*1e6的矩阵,有m<=1e5个点有值,其余都为0 q<=1e5个询问,求子矩阵的权值和 思路: 根据二维差分,对于询问左下角(x1, ...
- UVA5913 Dictionary Sizes(字典树)(转载)
题目大意:给出n个旧单词,要从这n个旧单词中构造新单词.构造条件是 S = Sa + Sb,其中Sa为某个旧单词的非空前缀,Sb为某个单词的非空后缀.求所有的新单词和旧单词中有多少个不同的单词. 思路 ...
- ELK：日志收集分析平台
简介 ELK是一个日志收集分析的平台,它能收集海量的日志,并将其根据字段切割.一来方便供开发查看日志,定位问题:二来可以根据日志进行统计分析,通过其强大的呈现能力,挖掘数据的潜在价值,分析重要指标的趋 ...
- Go语言实现：【剑指offer】机器人的运动范围
该题目来源于牛客网<剑指offer>专题. 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之 ...
- 强烈推荐 10 款珍藏的 Chrome 浏览器插件
Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览 ...
- Wannafly挑战赛5 A珂朵莉与宇宙 前缀和+枚举平方数
Wannafly挑战赛5 A珂朵莉与宇宙 前缀和+枚举平方数 题目描述 给你一个长为n的序列a,有n*(n+1)/2个子区间,问这些子区间里面和为完全平方数的子区间个数 输入描述: 第一行一个数n 第 ...