1、效果图

2、代码

  1.  <template>
  2.  <div style=" overflow: hidden;">
  3.               <el-row>
  4.                 <el-col :span="18" :offset="3">
  5.                   <div
  6.                     id="dataShow"
  7.                     onmouseover="this.style.overflow='overlay'"
  8.                     onmouseout="this.style.overflow='hidden'"
  9.                     class="dataShow"
  10.                   >
  11.                     <div
  12.                       v-for="(item,index) in radioInfoList"
  13.                       :key="index"
  14.                       style="background-color: #f5f5f5; padding:24px;"
  15.                     >
  16.                       <el-row>
  17.                         <el-col :span="20" :offset="3">
  18.                           <span class="aa">
  19.                             {{ item.message1 }}
  20.                           </span>
  21.                         </el-col>
  22.                         <el-col :span="1">
  23.                           <span>
  24.                               <svg-icon slot="reference" icon-class="girl" style="font-size: 40px" />   <!--对应头像-->
  25.                           </span>
  26.                         </el-col>
  27.                       </el-row>
  28.                       <br>
  29.                       <el-row>
  30.                         <el-col :span="1">
  31.                           <span>
  32.                               <svg-icon slot="reference" icon-class="person" style="font-size: 40px" />
  33.                           </span>
  34.                         </el-col>
  35.                         <el-col :span="20">
  36.                           <span class="bb">
  37.                             {{ item.message2 }}
  38.                           </span>
  39.                         </el-col>
  40.                       </el-row>
  41.                     </div>
  42.                   </div>
  43.                 </el-col>
  44.               </el-row>
  45.             </div>
  46. </template>

　　js

  1. radioInfoList: [{
  2.         user: '周先生',
  3.         robot: '专属客服小美',
  4.         message1: '您好，周先生，我是你的专属客服',
  5.         message2: '你好，有什么事情',
  6.         time1: '2019-11-19 09:05:55',
  7.         time2: '2019-11-19 09:06:55'
  8.       }, {
  9.         user: '周先生',
  10.         robot: '专属客服小美',
  11.         message1: '好的，我们稍后会把账单以短信的形式发给您，请您务必按照承诺在今晚六点之前还款，以免对您的账户及个人信用产生不良影响。我行会持续跟踪您的还款情况，如未按时到账将再次与您联系',
  12.         message2: '这个，最近手头有点近，能缓两天吗，届时一定本息还完',
  13.         time1: '2019-11-19 09:07:55',
  14.         time2: '2019-11-19 09:08:55'
  15.       },
  16.       {
  17.         user: '周先生',
  18.         robot: '专属客服小美',
  19.         message1: ' 我能理解您的情况，我建议您想办法通知家人、朋友或同事周转一下，在今晚六点之前周转，避免给您的账户和个人信用带来不良影响，可以吗？\n',
  20.         message2: '那好吧，我去筹钱',
  21.         time1: '2019-11-19 09:10:33',
  22.         time2: '2019-11-19 09:10:55'
  23.       }, {
  24.         user: '周先生',
  25.         robot: '专属客服小美',
  26.         message1: ' 好的,周先生，你满意本次服务的话请给个好评？\n',
  27.         message2: '好的',
  28.         time1: '2019-11-19 09:11:03',
  29.         time2: '2019-11-19 09:11:26'
  30.       }, {
  31.         user: '周先生',
  32.         robot: '专属客服小美',
  33.         message1: '好的，周先生，再见，祝您生活愉快',
  34.         message2: '再见',
  35.         time1: '2019-11-19 09:11:40',
  36.         time2: '2019-11-19 09:11:55'
  37.       }],
  38.       visible: false,
  1. // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        const div = document.getElementById('dataShow')
        div.scrollTop = div.scrollHeight
      })
    },

　　css

  1. <style>
  2.   .font{
  3.     font-size: 16px;
  4.     font-weight: bold;
  5.     font-family: "微软雅黑 Light";
  6.   }
  7.   .dataShow{
  8.     overflow-y: hidden;
  9.     overflow-x: hidden;
  10.     margin-bottom: -24px;
  11.     margin-top: -24px;
  12.     height:600px;
  13.     margin-bottom: 5%;
  14.     margin-top: 5%;
  15.   }
  16.   .aa{
  17.     float: right;
  18.     position: relative;
  19.     display: inline-block;
  20.     max-width: calc(40%);
  21.     min-height: 35px;
  22.     line-height: 2.1;
  23.     font-size: 15px;
  24.     padding: 6px 10px;
  25.     text-align: left;
  26.     word-break: break-all;
  27.     background-color: #9eea6a;
  28.     color: #000;
  29.     border-radius: 4px;
  30.     box-shadow: 0px 1px 7px -5px #000;
  31.     border:0px solid #000;
  32.     margin-top: 0;
  33.     margin-right: 10px;
  34.   }
  35.   .aa:after {
  36.     content: "";
  37.     border-top: solid 5px #00800000;
  38.     border-left: solid 10px #9eea6a;
  39.     border-right: solid 10px #00800000;
  40.     border-bottom: solid 5px #00800000;
  41.     position: absolute;
  42.     top: 10px;
  43.     left: 100%;
  44.   }
  45.   .bb{
  46.     display: inline-block;
  47.     line-height:30px;
  48.     font-style: normal;
  49.     background-color: white;
  50.     letter-spacing: 2px;
  51.     position: relative;
  52.     max-width: calc(40%);
  53.     min-height: 35px;
  54.     line-height: 2.1;
  55.     font-size: 15px;
  56.     padding: 6px 10px;
  57.     text-align: left;
  58.     word-break: break-all;
  59.     border-radius: 4px;
  60.     color: #000;
  61.     box-shadow: 0px 1px 7px -5px #000;
  62.     border:0px solid #000;
  63.     margin-top: 0;
  64.     margin-left: 10px;
  65.   }
  66.   .bb:after {
  67.     content: "";
  68.     border-top: solid 5px #00800000;
  69.     border-left: solid 10px #00800000;
  70.     border-right: solid 10px white;
  71.     border-bottom: solid 5px #00800000;
  72.     position: absolute;
  73.     top: 10px;
  74.     right: 100%;
  75.  
  76.   }
  77.  
  78. </style>

　　3、关于滚动条的问题（Chrome 和 其他浏览器 做不同的处理）

  1. <template>
  2.   <div class="app-container">
  3.         <el-row style=" overflow: hidden;">
  4.           <el-col :span="" :offset="" style="margin-top: 3px">
  5.             <div
  6.               id="dataShow"
  7.               onmouseover="this.style.overflow='scroll'"
  8.               onmouseout="this.style.overflow='hidden'"
  9.               :class="[browser==='Chrome'? 'dataShowCM': 'dataShowFF']"
  10.             >
  11.               <div
  12.                 v-for="(item,index) in radioInfoList"
  13.                 :key="index"
  14.                 style="background-color: #f5f5f5; padding:24px;"
  15.               >
  16.                 <el-row v-if="!(item.customerSen==null || item.customerSen =='')">
  17.                   <el-row style="margin-bottom: 5px">
  18.                     <el-col :span="" :offset="">
  19.                       <span style="font-size: 16px;color: #f5f5f5;background-color: #dadada;">
  20.                         {{ item.customerTime }}
  21.                       </span>
  22.                     </el-col>
  23.                   </el-row>
  24.                   <el-col :span="" :offset="">
  25.                     <span class="aa">
  26.                       {{ item.customerSen }}
  27.                     </span>
  28.                   </el-col>
  29.                   <el-col :span="">
  30.                     <span>
  31.                       <el-popover
  32.                         placement="bottom"
  33.                         :title="customer"
  34.                         width=""
  35.                         trigger="hover"
  36.                         content=""
  37.                       >
  38.                         <div class="block">
  39.                           <el-tooltip placement="top" content="点击查看大图">
  40.                             <el-image
  41.                               :src="userSrc"
  42.                               style="height: 120px"
  43.                               :preview-src-list="srcList"
  44.                             /></el-tooltip>
  45.                         </div>
  46.                         <svg-icon slot="reference" icon-class="person" style="font-size: 40px" />
  47.                       </el-popover>
  48.                     </span>
  49.                   </el-col>
  50.                 </el-row>
  51.                 <el-row v-if="!(item.robotSen==null || item.robotSen== '')">
  52.                   <el-row style="margin-bottom: 5px">
  53.                     <el-col :span="" :offset="">
  54.                       <span style="font-size: 16px;color: #f5f5f5;background-color: #dadada;margin-bottom: 10px">
  55.                         {{ item.robotTime }}
  56.                       </span>
  57.                       <br>
  58.                     </el-col>
  59.                   </el-row>
  60.                   <el-col :span="">
  61.                     <span>
  62.                       <el-popover
  63.                         placement="bottom"
  64.                         title="专属客服"
  65.                         width=""
  66.                         trigger="hover"
  67.                         :content="item.user"
  68.                       >
  69.                         <div class="block">
  70.                           <el-tooltip placement="top" content="点击查看大图">
  71.                             <el-image
  72.                               style="height: 120px"
  73.                               :src="robotSrc"
  74.                               :preview-src-list="robotList"
  75.                             />
  76.                           </el-tooltip>
  77.                         </div>
  78.                         <svg-icon slot="reference" icon-class="girl" style="font-size: 40px" />
  79.                       </el-popover>
  80.                     </span>
  81.                   </el-col>
  82.                   <el-col :span="">
  83.                     <span class="bb">
  84.                       {{ item.robotSen }}
  85.                     </span>
  86.                   </el-col>
  87.                 </el-row>
  88.               </div>
  89.             </div>
  90.             <div style="background-color: white;">
  91.               <el-divider/>
  92.               <el-divider content-position="left">
  93.                 <el-tooltip content="文字对话正在进行中。。。" placement="top">
  94.                   <el-button
  95.                     v-if="isButton"
  96.                     id="start"
  97.                     type="success"
  98.                     plain
  99.                     @click="start"
  100.                   ><svg-icon icon-class="click" />对话已建立</el-button>
  101.                 </el-tooltip>
  102.                 <el-tooltip content="点击开始对话。。。" placement="top">
  103.                   <el-button
  104.                     v-if="!isButton"
  105.                     id="start"
  106.                     type="danger"
  107.                     plain
  108.                     @click="start"
  109.                   ><svg-icon icon-class="stop" />开始对话</el-button>
  110.                 </el-tooltip>
  111.                 <el-tooltip content="操作记录" placement="top">
  112.                   <el-button
  113.                     id="start"
  114.                     type="warning"
  115.                     plain
  116.                     @click="toRadioTalk"
  117.                   ><svg-icon icon-class="editor" />操作记录</el-button>
  118.                 </el-tooltip>
  119.               </el-divider>
  120.               <el-row>
  121.                 <el-col :span="" :offset="">
  122.                   <el-input
  123.                     id="condition"
  124.                     v-model="condition"
  125.                     type="textarea"
  126.                     autofocus
  127.                     clearable
  128.                     maxlength=""
  129.                     show-word-limit
  130.                     :autosize="{minRows:3,maxRows:6}"
  131.                     resize="none"
  132.                     placeholder="在这里输入..."
  133.                     @keyup.enter.native="submitSearch"
  134.                   />
  135.                 </el-col>
  136.               </el-row>
  137.               <el-row style="margin: 4px 4px">
  138.                 <el-button
  139.                   id="submit"
  140.                   onmouseover="this.style.backgroundColor='#129611';this.style.color='#f5f5f5'"
  141.                   onmouseout="this.style.backgroundColor='#f5f5f5';this.style.color='#606060'"
  142.                   @click="submitSearch"
  143.                 >
  144.                   <svg-icon icon-class="enter" />发送
  145.                 </el-button>
  146.               </el-row>
  147.             </div>
  148.           </el-col>
  149.         </el-row>
  150.       </div>
  151. </template>
  152.  
  153. <script>
  154. export default {
  155.   name: 'Index',
  156.  
  157.   data() {
  158.     return {
  159.       isShow: true,
  160.       isButton: false,
  161.       radioTxt: '',
  162.       condition: '',
  163.       startRow: {
  164.         dialogueId: '',
  165.         robotSen: '',
  166.         robotTime: '',
  167.         customerSen: '',
  168.         customerTime: ''
  169.       },
  170.       dialogueId: '',
  171.       endRow: {},
  172.       dataList: [], // 单次对话的信息
  173.       radioInfoList: [], // 信息列表
  174.       visible: false,
  175.       customer: '',
  176.       userSrc: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
  177.       robotSrc: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
  178.       robotList: [
  179.         'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
  180.       ],
  181.       srcList: [
  182.         'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
  183.       ],
  184.       browser: 'Chrome'
  185.     }
  186.   },
  187.   created() {
  188.     this.browser = this.myBrowser()
  189.     console.log('当前浏览器：' + this.browser)
  190.     this.startRow = {}
  191.     this.customer = '王先生' + '\n' + '地区：浙江杭州'
  192.   },
  193.   methods: {
  194.     // 滚动到底部
  195.     scrollToBottom() {
  196.       this.$nextTick(() => {
  197.         const div = document.getElementById('dataShow')
  198.         div.scrollTop = div.scrollHeight
  199.       })
  200.     },
  201.     toRadioTalk() {
  202.       this.$router.push({
  203.         path: '/talkTest/talkList'
  204.       })
  205.     },
  206.     start() {
  207.       this.condition = ''
  208.       this.endRow = {}
  209.       this.dataList = []
  210.       const data = {
  211.         sysMap: {
  212.           features: '开始对话'
  213.         },
  214.         parameterList:
  215.           []
  216.       }
  217.       this.$request({
  218.         url: '/talk/start',
  219.         method: 'post',
  220.         data
  221.       }).then(res => {
  222.         this.isButton = true
  223.         this.endRow = res.retMap.talk
  224.         this.radioInfoList.push(this.endRow)
  225.         this.dataList.push(this.endRow)
  226.         // Cookies.set('dialogueId', res.retMap.talk.dialogueId)
  227.         this.dialogueId = res.retMap.talk.dialogueId
  228.         // Cookies.set('talkRecord', this.radioInfoList)
  229.         console.log(this.dialogueId)
  230.         this.scrollToBottom()
  231.       }).catch(e => {
  232.         console.log(e)
  233.         this.$message.error('未知错误，请联系开发人员...')
  234.         this.isButton = false
  235.       })
  236.     },
  237.     saveToTxt(id, list) {
  238.       const data = {
  239.         sysMap: {
  240.           features: '写入txt'
  241.         },
  242.         parameterList:
  243.           [
  244.             id,
  245.             list,
  246.             this.$store.getters.name
  247.           ]
  248.       }
  249.       this.$request({
  250.         url: '/talk/writeToTxt',
  251.         method: 'post',
  252.         data
  253.       }).then(res => {
  254.         console.log(res.retCode)
  255.         if (res.retCode === 'IF0000') {
  256.           console.log('记录已保存')
  257.         } else {
  258.           console.log('记录保存失败')
  259.         }
  260.       })
  261.     },
  262.     // 去掉回车换行符
  263.     clearBr(key) {
  264.       key = key.replace(/<\/?.+?>/g, '')
  265.       key = key.replace(/[\r\n]/g, '')
  266.       return key
  267.     },
  268.     /*    keySubmit() {
  269.       var test = this.condition
  270.       console.log('---' + test)
  271.       var tt = this.clearBr(test)
  272.       console.log('-tt--' + tt)
  273.       if (tt === '' || tt === undefined || tt === null) {
  274.         this.$message.error('当前没有输入。。。')
  275.         this.scrollToBottom()
  276.       }
  277.     },*/
  278.     submitSearch() {
  279.       this.condition = this.clearBr(this.condition)
  280.       console.log('对话id' + this.dialogueId)
  281.       if (this.condition === '' || this.condition === undefined || this.condition === null) {
  282.         this.$message.error('当前没有输入。。。')
  283.         this.scrollToBottom()
  284.       } else if (this.dialogueId === undefined || this.dialogueId === '') {
  285.         this.$message.error('请先start')
  286.         this.condition = ''
  287.       } else {
  288.         console.log('id' + this.dialogueId)
  289.         this.startRow = {}
  290.         this.startRow.robotSen = null
  291.         this.startRow.robotTime = null
  292.         this.startRow.customerSen = this.condition
  293.         this.startRow.dialogueId = this.dialogueId
  294.         var d = new Date()
  295.         this.startRow.customerTime = d.getFullYear() + '-' + ((d.getMonth() <  ? '' + (d.getMonth() + ) : (d.getMonth() + ))) +
  296.           '-' + (d.getDate() <  ? '' + d.getDate() : d.getDate()) + ' ' + (d.getHours() <  ? '' + d.getHours() : d.getHours()) +
  297.           ':' + (d.getMinutes() <  ? '' + d.getMinutes() : d.getMinutes()) + ':' + (d.getSeconds() <  ? '' + d.getSeconds() : d.getSeconds())
  298.         // this.startRow.dialogueId = Cookies.get('dialogueId')
  299.         this.radioInfoList.push(this.startRow)
  300.         this.dataList.push(this.startRow)
  301.         const data = {
  302.           sysMap: {
  303.             features: '对话细节'
  304.           },
  305.           parameterList:
  306.             [
  307.               this.startRow.dialogueId,
  308.               this.startRow.customerSen,
  309.               this.startRow.customerTime
  310.             ]
  311.         }
  312.         this.$request({
  313.           url: '/talk/talking',
  314.           method: 'post',
  315.           data
  316.         }).then(res => {
  317.           this.endRow = res.retMap.talk
  318.           this.radioInfoList.push(this.endRow)
  319.           this.dataList.push(this.endRow)
  320.           this.scrollToBottom()
  321.           this.condition = ''
  322.           if (res.retCode === 'IF0002') {
  323.             // this.$message.error('对话结束，记录已保存')
  324.             this.saveToTxt(this.startRow.dialogueId, this.dataList)
  325.             this.isButton = false
  326.             this.startRow.dialogueId = ''
  327.           }
  328.         })
  329.       }
  330.     },
  331.     myBrowser() {
  332.       var userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
  333.       var isOpera = userAgent.indexOf('Opera') > - // 判断是否Opera浏览器
  334.       var isIE = userAgent.indexOf('compatible') > - &&
  335.         userAgent.indexOf('MSIE') > - && !isOpera // 判断是否IE浏览器
  336.       var isEdge = userAgent.indexOf('Edge') > - // 判断是否IE的Edge浏览器
  337.       var isFF = userAgent.indexOf('Firefox') > - // 判断是否Firefox浏览器
  338.       var isSafari = userAgent.indexOf('Safari') > - &&
  339.         userAgent.indexOf('Chrome') === - // 判断是否Safari浏览器
  340.       var isChrome = userAgent.indexOf('Chrome') > - &&
  341.         userAgent.indexOf('Safari') > - // 判断Chrome浏览器
  342.  
  343.       if (isIE) {
  344.         var reIE = new RegExp('MSIE (\\d+\\.\\d+);')
  345.         reIE.test(userAgent)
  346.         var fIEVersion = parseFloat(RegExp['$1'])
  347.         if (fIEVersion === ) {
  348.           return 'IE7'
  349.         } else if (fIEVersion === ) {
  350.           return 'IE8'
  351.         } else if (fIEVersion === ) {
  352.           return 'IE9'
  353.         } else if (fIEVersion === ) {
  354.           return 'IE10'
  355.         } else if (fIEVersion === ) {
  356.           return 'IE11'
  357.         } else {
  358.           return ''
  359.         }// IE版本过低
  360.         // eslint-disable-next-line no-unreachable
  361.         return 'IE'
  362.       }
  363.       if (isOpera) {
  364.         return 'Opera'
  365.       }
  366.       if (isEdge) {
  367.         return 'Edge'
  368.       }
  369.       if (isFF) {
  370.         return 'FF'
  371.       }
  372.       if (isSafari) {
  373.         return 'Safari'
  374.       }
  375.       if (isChrome) {
  376.         return 'Chrome'
  377.       }
  378.     }
  379.   }
  380. }
  381. </script>
  382.  
  383. <style>
  384.   .font{
  385.     font-size: 16px;
  386.     font-weight: bold;
  387.     font-family: "微软雅黑 Light";
  388.   }
  389. /*  <!--非Chrome 隐藏滚动条-->*/
  390.   .dataShowFF{
  391.     height:600px;
  392.     overflow-y: hidden;
  393.     overflow-x: hidden;
  394.     margin-bottom: -14px;
  395.     margin-top: 0px;
  396.     background-color: #f5f5f5;
  397.     scrollbar-width: none;
  398.   }
  399. /*  <!--Chrome 隐藏滚动条-->*/
  400.   .dataShowCM{
  401.     height:600px;
  402.     overflow-y: hidden;
  403.     overflow-x: hidden;
  404.     margin-bottom: -14px;
  405.     margin-top: 0px;
  406.     background-color: #f5f5f5;
  407.   }::-webkit-scrollbar {
  408.      display: none;
  409.    }
  410.   .aa{
  411.     float: right;
  412.     position: relative;
  413.     display: inline-block;
  414.     max-width: calc(%);
  415.     line-height: 2.1;
  416.     min-height: 35px;
  417.     font-size: 15px;
  418.     padding: 6px 10px;
  419.     text-align: left;
  420.     word-break: break-all;
  421.     background-color: #9eea6a;
  422.     color: #;
  423.     border-radius: 4px;
  424.     box-shadow: 0px 1px 7px -5px #;
  425.     border:0px solid #;
  426.     margin-top: ;
  427.     margin-right: 10px;
  428.   }
  429.   .aa:after {
  430.     content: "";
  431.     border-top: solid 5px #;
  432.     border-left: solid 10px #9eea6a;
  433.     border-right: solid 10px #;
  434.     border-bottom: solid 5px #;
  435.     position: absolute;
  436.     top: 10px;
  437.     left: %;
  438.   }
  439.   .bb{
  440.     display: inline-block;
  441.     line-height:30px;
  442.     font-style: normal;
  443.     background-color: white;
  444.     letter-spacing: 2px;
  445.     position: relative;
  446.     max-width: calc(%);
  447.     min-height: 35px;
  448.     line-height: 2.1;
  449.     font-size: 15px;
  450.     padding: 6px 10px;
  451.     text-align: left;
  452.     word-break: break-all;
  453.     border-radius: 4px;
  454.     color: #;
  455.     box-shadow: 0px 1px 7px -5px #;
  456.     border:0px solid #;
  457.     margin-top: ;
  458.     margin-left: 10px;
  459.   }
  460.   .bb:after {
  461.     content: "";
  462.     border-top: solid 5px #;
  463.     border-left: solid 10px #;
  464.     border-right: solid 10px white;
  465.     border-bottom: solid 5px #;
  466.     position: absolute;
  467.     top: 10px;
  468.     right: %;
  469.  
  470.   }
  471.   #condition{
  472.        border:1px solid #f4c08a;
  473.      }
  474.   #submit{
  475.     border:0px solid #;
  476.     float: right;
  477.   }
  478.   #start{
  479.     border:0px solid #;
  480.   }
  481. </style>

基于element-ui 模仿微信聊天页面以及滚动条隐藏在chrome和其他浏览器的处理的更多相关文章

  1. iOS开发之微信聊天页面实现

    在上篇博客(iOS开发之微信聊天工具栏的封装)中对微信聊天页面下方的工具栏进行了封装,本篇博客中就使用之前封装的工具栏来进行聊天页面的编写.在聊天页面中主要用到了TableView的知识,还有如何在俩 ...

  2. 基于element UI 的上传插件

    为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...

  3. 基于element ui的图片预览插件

    写插件很简单,满足两个条件即可,一.基本的逻辑思路,二.熟悉插件语法要求.本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图: 项目采用的是vue-element-admi ...

  4. 基于element ui的级联选择器组件实现的分类后台接口

    今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持.     这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...

  5. vue的ui库使用Element UI，纯html页面，不使用webpack那玩意

    使用手册访问:https://cloud.tencent.com/developer/doc/1270 第一步:在head添加样式 <link rel="stylesheet" ...

  6. vue基于 element ui 的按钮点击节流

    vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...

  7. 基于element ui 实现七牛云自定义key上传文件，并监听更新上传进度

    借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload&quo ...

  8. javascript 禁止页面选取-兼容IE、Chrome和firefox浏览器

    在做到一个页面需要禁止网页内容被选取的时候,碰到浏览器兼容的问题,解决方法如下 1.单独使用适用于IE.Chrome浏览器,主要是在head的<script>标签里面加上如下代码 docu ...

  9. 从APP跳转到微信指定联系人聊天页面功能的实现与采坑之旅

    起因: 最近做的APP中有一个新功能:已知用户微信号,可点击直接跳转到当前用户微信聊天窗口页面. 当时第一想法是使用无障碍来做,并且觉得应该不难,只是逻辑有点复杂.没想到最终踩了好多坑,特地把踩过的坑 ...

随机推荐

  1. 微信小程序 客户端时间 与 服务端时间

    服务端时间 db.serverDate(); 在操作数据库,上传数据的时候可以使用服务端时间 wx.cloud.init();//初始化云 const db = wx.cloud.database() ...

  2. 初探 Node.js 框架：eggjs （环境搭配篇）

    eggjs 是一个优秀的 Node.js 框架 概述:为什么标题上说 eggjs 是一个优秀的 Node.js 框架(可跳过)? 换言之,我们为什么选择 eggjs 进行开发而不是之前初学时使用的 E ...

  3. 如何高效地远程部署？自动化运维利器 Fabric 教程

    关于 Python 自动化的话题,在上一篇文章中,我介绍了 Invoke 库,它是 Fabric 的最重要组件之一.Fabric 也是一个被广泛应用的自动化工具库,是不得不提的自动化运维利器,所以,本 ...

  4. java架构之路-（微服务专题）feign的基本使用和nacos的配置中心

    上次回归: 上次我们说了ribbon的基本使用,包括里面的内部算法,算法的细粒度配置,还有我们自己如何实现我们自己的算法,主要还是一些基本使用的知识,还不会使用ribbon的小伙伴可以回去看一下上一篇 ...

  5. Rust学习--变量

    0x0 每种编程语言都有变量的概念,我们可以把变量理解为最简单的存储方式,它是编码过程中是必不可少的. Rust的变量很有特色.变量不可变的特性让人想起了Erlang.以及后面的模式匹配,我觉得作者应 ...

  6. 详解Net Core Web Api项目与在NginX下发布

    前言 本文将介绍Net Core的一些基础知识和如何NginX下发布Net Core的WebApi项目. 测试环境 操作系统:windows 10 开发工具:visual studio 2019 框架 ...

  7. 404 not found Webshell

    404 not found Webshell 克隆或下载项目: git clone https://github.com/CosasDePuma/SecurityNotFound.git Securi ...

  8. el-menu 菜单展示

    <template> <div class="tab-container"> <el-menu class="el-menu-vertica ...

  9. css权重导致的样式不生效问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 仅需60秒，使用k3s创建一个多节点K8S集群！

    作者: Dawid Ziolkowski丨Container Solution云原生工程师 最近,我一直在Kubernetes上进行各种测试和部署.因此,我不得不一次又一次创建和销毁Kubernete ...