踩坑

post 请求

参数 data 如果直接写 参数会在请求体 以 JOSN

export function orderList(data) {
  return request({
    url: 'xxx',
    method: 'post',
    data
  })
}
// 如果写成parms:data 参数会跟在请求后面 类似get请求
export function orderList(data) {
  return request({
    url: 'xxx',
    method: 'post',
    parms: data
  })
}

前后端 sse 通讯

if (window.EventSource) {
  window.source = new EventSource('message')
  window.source.addEventListener('open', () => {})
  // 监听服务器发来的消息 或用source.onmessage=()=>{}
  window.source.addEventListener('message', () => {})
  // 监听异常
  window.source.addEventListener('error', () => {})
}
window.soure.close() // 关闭并发请求

css 实现盒子固定宽度外左右滑动

display: -webkit-box; overflow-x: scroll

将 px 单位转为 rem

1、安装 postcss-px2rem

npm i postcss-px2rem --save -dev

2、进入 vue.config.js 配置

const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 10 //基准大小 baseSize，需要下方html除后的数字相同
})
module.exports = {
  /* 注意sass，scss，less的配置 */
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss]
      }
    }
  }
}

3、进入 publci 的 index.html

function getHtmlFontSize() {
  //获取设备宽度
  let deviceWidth = document.documentElement.clientWidth || window.innerWidth
  console.log('[设备宽度]', deviceWidth)
  if (deviceWidth >= 750) {
    deviceWidth = 750
  } else if (deviceWidth <= 320) {
    deviceWidth = 320
  }
  //设置html的字体大小
  document.documentElement.style.fontSize = deviceWidth / 37.5 + 'px'
}
getHtmlFontSize()
window.addEventListener('resize', getHtmlFontSize)

滚动至容器底部

<div ref='chatMain'><div>

scrollEnd(){
  this.$nextTick(()=>{
     const chat = this.$refs.chatMain
     chat.scrollTop = chat.scrollHeight-chat.clientHeight
  })
}

获取 url 上的参数

const geturl = window.location.href
// http://localhost:8081/#/pages/index/index?id=1001&name=zs
const info = geturl.split('?')[1] //id=1001&name=zs   截取到参数部分
const getqys = new URLSearchParams('?' + info) //将参数放在URLSearchParams函数中
const id = getqys.get('id') // 1001
const name = getqys.get('name') // zs

设置容器为可编辑并可添加表情及 placehodler

1、添加 placehodler

<div class="editable-div" contenteditable="true" placegolder='请输入'>

<style>
.editable-div:empty:before {
  position: absolute;
  content: attr(placegolder);
  background-color: transparent;
  color: #4d4d4d;
}
</style>

2、添加图片

const insertImage = () => {
  const editableDiv = document.getElementById('editableDiv')
  const imgSrc = 'https://via.placeholder.com/150' // 这里替换为你要插入的图片的 URL

  // 创建一个新的 img 元素
  const img = document.createElement('img')
  img.src = imgSrc

  // 添加 data-src 属性
  img.setAttribute('data-src', 'xxxxx')

  // 保存当前光标位置
  const sel = window.getSelection()
  const range = sel.getRangeAt(0)

  // 在光标位置插入 img 元素
  range.insertNode(img)
  range.setStartAfter(img)

  // 恢复光标位置
  sel.removeAllRanges()
  sel.addRange(range)

  // 使 div 重新聚焦
  editableDiv.focus()
}

3、data-src 为图片内容传给后端的字段 需要对 div 的内容进行处理

const dealMsg = () => {
  const element = document.getElementById('editableDiv')
  const content = element.innerHTML
  // inputValue 为传给后端的字段
  this.inputValue = content
  // 如果有图片
  if (element.querySelector('img')) {
    this.inputValue = content.replace(/<img.*?(?:>|\/>)/gi, text => {
      const dataSrc = text.match(/data-src="(.+)"/)
      return dataSrc[1] ? dataSrc[1] : ''
    })
  }
}