基于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中有一个新功能:已知用户微信号,可点击直接跳转到当前用户微信聊天窗口页面. 当时第一想法是使用无障碍来做,并且觉得应该不难,只是逻辑有点复杂.没想到最终踩了好多坑,特地把踩过的坑 ...
随机推荐
- Linux防火墙之iptables常用扩展匹配条件（一）
上一篇博文讲了iptables的基本匹配条件和隐式匹配条件,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12269717.html:今天在来说说iptabel ...
- css的选择器及它的种类特性？
今天主要说的是选择器的基础, 首先看,选择器的优先级:!important > 行间样式 > id选择器 > class 选择器 == 属性选择器 > 标签选择器 > 通 ...
- 微信小程序框架分析小练手（三）——仿香哈菜谱小程序制作
香哈菜谱是一款围绕美食而成的小程序,在这里可以查看各式各样的菜谱. 一.打开微信开发者工具,新建一个项目:xhcp.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标.美食轮播图片.宫格导航图 ...
- LR中解决接口请求中包含中文字符，服务器不识别的问题
在LR中,直接写的接口请求,如果请求字段包含中文字段,服务器会不识别,这个时候就要用到lr_convert_string_encoding这个函数: 具体用法: lr_convert_string_e ...
- Linux之时间同步操作
Linux之时间同步操作 时间同步操作应用的命令 yum进行软件安装,软件安装过程中如遇到询问,一律选择y,ntp是时间同步命令 [root@localhost ~]# yum -y install ...
- [python之路]学习路线
python基础 #为什么要学python?python在知名公司广泛应用,谷歌.cia.nasa.youtobe.dropbox.instagram.facebook.redhat.豆瓣.知乎.搜狐 ...
- BZOJ 1601 [Usaco2008 Oct]灌水 (建图+mst)
题意: 300个坑,每个坑能从别的坑引水,或者自己出水,i从j饮水有个代价,每个坑自己饮水也有代价,问让所有坑都有谁的最少代价 思路: 先建一个n的完全图,然后建一个超级汇点,对每个点连w[i],跑m ...
- （二）MyBatis延迟加载,一级缓存，二级缓存
延迟加载配置: 什么时候用延迟加载?比如现在有班级和学生表,一对多关系,你可能只需要班级的信息,而不需要该班级学生的信息,这时候可以进行配置,让查询时先查询到班级的信息,在之后需要学生信息时候,再进行 ...
- 青石巷-小L的爸爸
小L有一个和谐的家. 爸爸具体职业不明,在统战部工作,刚开始和妈妈在一起工作. 妈妈是个会跳舞的语文老师. 奶奶之前也是个老师. 爷爷是个建筑师. 爸爸是最有文采的一个.在小L看来,他的一言一行,一举 ...
- 解决Python2.7的UnicodeEncodeError: 'ascii' codec can't encode异常错误
UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-2: ordinal not in range(128) ...