工作中实用工具或代码段总结

2024无限可能！

已于 2023-06-30 11:36:08 修改

阅读量291

点赞数

文章标签：前端

于 2022-11-29 17:04:08 首次发布

本文链接：https://blog.csdn.net/hbmern/article/details/128101335

版权

仅个人工作笔记，用于记录！

1、Vscode匹配中文进行全局搜索：

搜索框中写入：[\u4e00-\u9fa5]+，使用正则表达式搜索，就可以匹配页面中的中文

2、element-UI表格排序：

<el-table
   ref="multipleTable"
   stripe
   :data="pageList"
   :header-cell-style="tableHeaderCellStyle"
   style="width: 100%; text-align: center"
   @selection-change="handleSelectionChange"
   @sort-change="sortChange"
>
...
</el-table>

设置列为：sortable="custom"

  /**
     * @description 排序功能
     */
    sortChange(column) {
      const { prop, order } = column
      if (order === null) {
        this.queryParams.sortField = undefined
        this.queryParams.sortOrder = undefined
      } else {
        this.queryParams.sortField = prop
        this.queryParams.sortOrder = order.slice(0, -6)
      }
      this.handleQuery(this.code, this.type) //具体的查询方法
    },

3、通过正则表达式截取页面文字内容：

截取IP后的文字:
 downName: item.replace(/^http:\/\/[^/]+/, ''),

4、获取两次滚动的高度差：

let t1 = 0;
let t2 = 0;
let timer = null; // 定时器
 
// scroll监听
document.onscroll = function() {
  clearTimeout(timer);
  timer = setTimeout(isScrollEnd, 500);
  t1 = document.documentElement.scrollTop || document.body.scrollTop;
}
 
function isScrollEnd() {
  t2 = document.documentElement.scrollTop || document.body.scrollTop;
  if(t2 == t1){
    console.log('滚动结束了')
  }
}

5、获取GPU ：

function getGPU() {
  const canvas = document.createElement('canvas')
  const gl = canvas.getContext('experimental-webgl')
  const debugInfo = gl.getExtension('WEBGL_debug_renderer_info')
  const info = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL)
  console.warn(info)
  return info
}
getGPU()

6、解决编程式路由往同一地址跳转时会报错的情况

// 解决编程式路由往同一地址跳转时会报错的情况
const originalPush = VueRouter.prototype.push;
const originalReplace = VueRouter.prototype.replace;
// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) {
    return originalPush.call(this, location, onResolve, onReject);
  }
  return originalPush.call(this, location).catch((err) => err);
};

// replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
  if (onResolve || onReject) {
    return originalReplace.call(this, location, onResolve, onReject);
  }
  return originalReplace.call(this, location).catch((err) => err);
};

7、捕获async 、await的错误

// 处理async、await的错误
export const awaitWrap = promise => {
  return promise.then(data => [null, data]).catch(err => [err, null])
}
//使用
const [err, data] = await awaitWrap(fetchData())

8、解决el-tab和el-table一起使时，表头先会挤在一起，然后再撑开至100%的问题

<el-tabs v-if="listVisible" v-model="activeName" class="planTask-container" @tab-click="handleClick">
      <el-tab-pane :label="$t('PlanTask.planTask')" name="plantask">
        <PlanTaskList v-if="activeName == 'plantask'" @add="handleAdd" @update="handleUpdate" />
      </el-tab-pane>
      <el-tab-pane :label="$t('PlanTask.yarnPlan')" name="yearPlan">
        <YearPlanList v-if="activeName == 'yearPlan'" @add="handleAdd" @update="handleUpdate" />
      </el-tab-pane>
      <el-tab-pane :label="$t('PlanTask.devicePlan')" name="devicePlan">
        <DevicePlan v-if="activeName == 'devicePlan'" />
      </el-tab-pane>
    </el-tabs>

说明：YearPlanList /PlanTaskList 是表格组件，使用v-if="activeName == 'yearPlan'"多一层判断，就可以解决这个问题

9、如果子组件想用父组件里边的值，可以这样子去用

10、切记，console.log打印是异步的！！！！

11、如果在某个组件内执行某个方法无法执行的时候，可以尝试在外包一层div

例如：

12、 vue项目图片无法正常显示解决方案参考：

方案一：将图片转成Base64格式，通过引用base64编码，可实现图片显示。（推荐解决方案）

方案二：将图片放到服务器中，通过绝对绝对路径引用图片的地址。

方案三：将图片放到public目录下，这样图片不会参与打包，引用图片相对路径，实现图片显示。

方案四：将background-img显示图片的方式，用img显示，这样每次都加载图片的静态资源；

方案五：（针对图片不更新的情况）：可以给图片加个时间戳

13、el-input框无法清空、输入的问题解决：

场景：今天在改一个bug，一个表单中有2个字段（v-model绑定），el-input框，设置了clearable，但是无法清空、也没有办法输入。

原因分析：点击新增的时候，首先要执行resetForm的操作，对表单一些数据进行初始化，但是初始化的时候，并没有对这2个字符初始化，这2个字段，要调用另一个接口来赋值，即使后面再赋值，form里边是没有这2个字段的。感觉这个算是Vue的bug？

具体的看下错误代码吧：

 HTML:
<el-col :span="12">
   <el-form-item label="SIP服务国标编码" prop="serverGBId">
      <el-input clearable v-model="gbform.serverGBId" placeholder="请输入"></el-input>
   </el-form-item>
</el-col>
<el-col :span="12">
     <el-form-item label="SIP认证用户名" prop="username">
         <el-input v-model="gbform.username" placeholder="请输入" clearable></el-input>
     </el-form-item>
</el-col>

  // 新增平台
    async handleAdd() {
      this.resetDialogForm()
      const res = await getServerConfig()
      this.gbform.deviceIp = res.data.deviceIp
      this.gbform.devicePort = res.data.devicePort
      this.gbform.username = res.data.username
      this.gbform.deviceGBId = res.data.username
      this.gbdialog = {
        title: '新增',
        visible: true
      }
    },
    resetDialogForm() {
      this.gbform = {
        administrativeDivision: '340200', // 行政区划
        expires: 300, // 注册周期
        keepTimeout: 60, // 心跳周期
        transport: 'UDP', // 信令传输
        catalogGroup: '1', // 目录分组
        treeType: 'BusinessGrou', // 目录结构
        characterSet: 'GB2312', // 字符集
        elseChoose: ['1', '2'] // 其他选项（启用，云台控制）
      }
      if (this.$refs.gbFormRef) {
        this.$refs.gbFormRef.resetFields()
      }
    }

解决方案：

方案一：

resetDialogForm的时候，把username、deviceGBId置空

方案二、

在el-input中加上@input="change($event)“

change(){

this.$forceUpdate() //重新执行一遍data中的数据

}