基於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="18" :offset="3" 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="10" :offset="10">
                      <span style="font-size: 16px;color: #f5f5f5;background-color: #dadada;">
                        {{ item.customerTime }}
                      </span>
                    </el-col>
                  </el-row>
                  <el-col :span="20" :offset="3">
                    <span class="aa">
                      {{ item.customerSen }}
                    </span>
                  </el-col>
                  <el-col :span="1">
                    <span>
                      <el-popover
                        placement="bottom"
                        :title="customer"
                        width="200"
                        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="10" :offset="10">
                      <span style="font-size: 16px;color: #f5f5f5;background-color: #dadada;margin-bottom: 10px">
                        {{ item.robotTime }}
                      </span>
                      <br>
                    </el-col>
                  </el-row>
                  <el-col :span="1">
                    <span>
                      <el-popover
                        placement="bottom"
                        title="專屬客服"
                        width="200"
                        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="20">
                    <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="22" :offset="1">
                  <el-input
                    id="condition"
                    v-model="condition"
                    type="textarea"
                    autofocus
                    clearable
                    maxlength="100"
                    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() < 9 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1))) +
          '-' + (d.getDate() < 10 ? '0' + d.getDate() : d.getDate()) + ' ' + (d.getHours() < 10 ? '0' + d.getHours() : d.getHours()) +
          ':' + (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()) + ':' + (d.getSeconds() < 10 ? '0' + 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') > -1 // 判斷是否Opera瀏覽器
      var isIE = userAgent.indexOf('compatible') > -1 &&
        userAgent.indexOf('MSIE') > -1 && !isOpera // 判斷是否IE瀏覽器
      var isEdge = userAgent.indexOf('Edge') > -1 // 判斷是否IE的Edge瀏覽器
      var isFF = userAgent.indexOf('Firefox') > -1 // 判斷是否Firefox瀏覽器
      var isSafari = userAgent.indexOf('Safari') > -1 &&
        userAgent.indexOf('Chrome') === -1 // 判斷是否Safari瀏覽器
      var isChrome = userAgent.indexOf('Chrome') > -1 &&
        userAgent.indexOf('Safari') > -1 // 判斷Chrome瀏覽器

      if (isIE) {
        var reIE = new RegExp('MSIE (\\d+\\.\\d+);')
        reIE.test(userAgent)
        var fIEVersion = parseFloat(RegExp['$1'])
        if (fIEVersion === 7) {
          return 'IE7'
        } else if (fIEVersion === 8) {
          return 'IE8'
        } else if (fIEVersion === 9) {
          return 'IE9'
        } else if (fIEVersion === 10) {
          return 'IE10'
        } else if (fIEVersion === 11) {
          return 'IE11'
        } else {
          return '0'
        }// 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(40%);
    line-height: 2.1;
    min-height: 35px;
    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%;

  }
  #condition{
       border:1px solid #f4c08a;
     }
  #submit{
    border:0px solid #000;
    float: right;
  }
  #start{
    border:0px solid #000;
  }
</style>