开发过程遇到的小问题

D__W

已于 2023-09-12 09:34:11 修改

阅读量350

点赞数

分类专栏：问题记录文章标签： vue.js 前端 javascript

于 2022-06-16 11:16:42 首次发布

本文链接：https://blog.csdn.net/D_JOY_W/article/details/125312324

版权

问题记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

uniapp uni.navigateTo 传值传对象

uni.navigateTo({
url: '/pages/details?obj='+ encodeURIComponent(JSON.stringify(item))
});
接收：

onLoad(option) {
this.item=JSON.parse(decodeURIComponent(option.obj));
}

uni-app 动态改变 navigationBarTitleText 导航标题

1、改导航文字

uni.setNavigationBarTitle({ title: 'xx' });

2、改 tabBar 文字
uni.setTabBarItem({
index: 0,
text: 'xx'
});

使用ts后，vue文件中字段出现波浪线

文件——首选项——设置——拓展——vetur
关闭Validation: Interpolation

Syntax Error: TypeError: this.getOptions is not a function

装的 scss-loader 版本太高，卸载安装低版本即可

npm uninstall --save sass-loader // 卸载

npm i -D sass-loader@8.x // 安装

npm uninstall --save node-sass // 卸载

npm i node-sass@4.14.1 // 安装

如果node-sass安装失败，也可以直接在package.json中写上版本号，删除node_modules文件夹，重新npm i即可

同一个文件切换tab渲染不同的table失效

给table 加上一个key.

不允许输入中文正则

/[\u4E00-\u9FA5]/g

文件下载

 const blob = new Blob([res]);
 const blob = new Blob([res], { type: 'application/ms-excel' });
 const a = document.createElement('a');
 //此处文件名称和文件后缀根据项目情况而定
 a.download = '巡查管理.xlsx';
 a.style.display = 'none';
 a.href = URL.createObjectURL(blob);
 document.body.appendChild(a);
 a.click();
 URL.revokeObjectURL(a.href);
 document.body.removeChild(a);

vw适配

//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math"; 
//默认设计稿的宽度
$designWidth:1920;
//默认设计稿的高度
$designHeight:1080;
//px转为vw的函数
@function vw($px) {
  @return math.div($px , $designWidth) * 100vw;
}
//px转为vh的函数
@function vh($px) {
  @return math.div($px , $designHeight) * 100vh;
}
//字体转vw
@function font($px) {
  @return math.div($px, $designWidth) * 100vw;
}
//字体转vw
@function min($px) {
  @return Math.min( $designWidth, $designHeight) * 100vw;
}

具体使用：

文件流转换base64

// 假设 res 是接口返回的文件流
const reader = new FileReader();
reader.readAsDataURL(res);
reader.onloadend = function() {
  const base64data = reader.result;
  const img = document.createElement("img");
  img.src = base64data;
  document.body.appendChild(img);
}

小程序文件流转换

wx.request({
  url: 'your-api-url',
  responseType: 'arraybuffer', // 指定响应类型为 ArrayBuffer
  success(res) {
    const base64 = wx.arrayBufferToBase64(res.data); // 将 ArrayBuffer 转为 base64 字符串
    const imageUrl = 'data:image/png;base64,' + base64; // 拼接图片的 data URI
    const img = wx.createImage(); // 创建图片对象
    img.src = imageUrl; // 设置图片的 src 属性
    img.onload = function() {
      // 图片加载完成后将其渲染到页面上
      const ctx = wx.createCanvasContext('canvas');
      ctx.drawImage(img, 0, 0, 100, 100); // 绘制图片
      ctx.draw();
    }
  }
})

el-date-picker设置未来时间不可以选择

 :picker-options="expireTimeOption"
  expireTimeOption: {
    disabledDate (date) {
      return date.getTime() >= Date.now()
    }
  }

flex的理解