codecz6-优快云博客

原创 vue项目实现微信扫码登录流程梳理

微信官方文档：准备工作 | 微信开放文档由于这个项目对接微信开放平台都是在服务端进行的，所以前端只需要把需要的参数传到后端即可，后端通过一系列操作获取到微信开放平台的access_token，获取到用户信息后，返回项目的token到前端，前端进行登录操作。部分代码：实例：wxRedirect代码：实例：...

2022-06-27 11:45:32 5867

原创 vue项目 signature_pad实现签名手写板功能，base64转Blob

安装 signature_pad 插件npm install --save signature_pad根据api文档封装一个Sign组件<template> <div v-safeHeaderTop class="page"> <Header :isBack="false" title="手写签名"> </Header> <canvas ref="signaturePadCanvas" class="canvas".

2022-03-04 10:29:02 1891

原创 vue动态设置::before伪元素样式背景颜色

通过动态绑定style，声明css变量"--bgColor"，把变量”color”赋给“--bgColor” <div ref="chart-circle" class="chart-circle" :style="{ '--bgColor': color }"></div>在css中使用 var函数读取“--bgColor”变量.chart-circle { width: 80px; height: 80px; position: relative

2022-02-17 17:23:40 8106 1

原创在if判断中使用es6的 import 引入文件无效的解决方案

同一个页面需要通过判断来引入不同的文件时，发现 import 写在 if 中这种写法会导致加载不到文件，产生报错；const system = localStorage.getItem("system");if (system === "cmd") { import { WorkOrdersModule } from "@/store/modules/cmdWorkOrders";} else { import { WorkOrdersModule } from "@/store/modu

2022-01-17 15:32:58 1480

原创 vue项目中引入百度地图api，并根据经纬度坐标添加覆盖物

先上效果图：第一步：在 public的index.html中引入百度地图api，ak需要在百度开放平台申请第二步：定义一个构造函数用于批量创建地图遮盖物// ---------------------------- 1.定义自定义覆盖物的构造函数function SquareOverlay(this: any, center: any, data: any) { this._center = center; this._data = data;}SquareOverl.

2022-01-13 17:04:04 1204

原创 videojs播放m3u8格式的视频，处理 HLS 推流延时问题

HLS 直播协议的原理理解：把整个视频流分成一个个小的基于HTTP的视频ts文件，每个视频文件地址会在m3u8格式的链接里对应生成一个索引，在开始一个流媒体会话时，客户端通过m3u8文件的索引去寻找可用的媒体流，实现直播效果；分析延时原因：服务器端的编码器和流分割器生成TS视频文件需要时间，推流时也会受到带宽的影响，所以就产生了延时，分析视频组件工作流程：请求接口获取 hlsUrl ，此时服务器开始生成TS视频文件并推流；挂载视频组件，播放视频，...

2021-12-23 19:08:56 4701

原创 echarts无数据时显示暂无数据进行占位

效果：思路：提前在 data 中配置一个暂无数据的 option，然后在初始化 echarts 的时候判断接口返回数据是否未空，如果为空就 setOption 暂无数据的 option 渲染 dom，否则正常 setOption 接口数据渲染 dom //dataoption: { title: { text: "暂无数据", x: "center", y: "center", textS..

2021-12-21 18:03:57 6307

原创 js数组常用方法总结

目录数组扁平数组去重数组排序数组转字符串数组分割合并数组元素查找数组增删数组迭代数组扁平// flat(Infinity): 不论数组有多少层都拍成一维数组且不会改变原数组 es6const arr = [1, [2, 3, [4, 5], 6, [7, [8, [9, [10]]]]]]; // 多维数组const arr2 = [[1, 2, 3], [4, 5, 6]]; // 二维数组arr.flat(Infinity); // 结果 [1, ..

2021-12-16 18:27:42 292

原创 npm install 报错问题总结环境/版本匹配

npm install报错信息中发现有如下两行代码说明电脑没有python环境gyp verb check python checking for Python executable "python2" in the PATHgyp verb `which` failed Error: not found: python2先去官网下载 python2.7，然后配置好系统环境变量再执行以下命令设置confignpm install -g node-gypnpm confi...

2021-12-14 16:41:17 3450

原创 e-charts水球图，Liquid Fill Chart

echarts-liquidfill 是 Echarts 的一个插件，所以需要额外的npm引入npm install echarts-liquidfill页面中导入：import "echarts-liquidfill";全部代码：<template> <div v-allSafeArea class="page"> <Header :isBack="false" /> <div ref="container" cl.

2021-12-10 18:57:35 1178

原创 van-popup弹出层在ios被遮挡问题

适配 ios 遇坑，van-popup 弹出层中组件内容被覆盖，而且键盘弹起时 header 被顶出屏幕，通过调整样式层级可以解决部分覆盖问题，但是 header 被顶出屏幕一直没解决；后来仔细翻看文档，发现官方预留了 get-container 属性，可以把弹出层挂载到指定元素上，设置get-container="body"，把组件挂载到最外层boby上问题解决。...

2021-12-03 19:35:08 7200

原创 ios键盘遮挡输入框问题

/** * @description: 输入框焦点 * @param {*} * @return {*} */ focusField() { const activeElement = document.activeElement; let offsetTop = activeElement.offsetTop; let offsetParent = activeElement.offsetParent; if.

2021-12-03 14:18:49 3263

原创 e-charts柱状图，区间段不同颜色渲染显示

给data里的value一个索引，去对应Y轴，categories里的数据效果图如下：以下全部代码：<template> <div class="custom"> <div class="status-view"> <div class="item"> <SvgIcon icon="icon_1"></SvgIcon> <div class="name...

2021-12-02 21:09:18 1655

原创 vue+ts实现手机通讯录，左右联动，吸顶效果

效果图如下：以下是全部代码：<template> <div v-allSafeArea class="page">  <div class="wrap-view"> <div ref="container" class="container"> <div ref="content"> .

2021-11-26 11:36:45 1333

原创 input formData文件上传，处理同一文件不能二次上传问题

<input type="file" @change="onFileChange" />input change事件的机制只有 value 发生改变的时候触发，因为第二次上传相同文件 value不变所有不会触发 change 事件，这时就要想办法在第一次上传时把value 值赋空，应该在拿到上传所需数据后把 input 的 value 值赋空，这样第二次上传的时候 change事件就会触发； /** * @description: 新增 */ as...

2021-11-25 20:25:55 820

原创 echarts雷达图，标签name触发鼠标事件，实现自定义弹窗显示数据

早上收到产品需求，说要把弹框显示改到鼠标放在标签文字上触发，翻了一遍 e-charts 的文档看到有个 triggerEvent 属性可以控制标签鼠标事件的响应，我们可以配置这个属性让标签触发鼠标事件，然后通过 e-charts 的 event 事件来控制弹窗的显隐。效果图如下：以下是全部代码：<template> <div class="radar"> <div class="chart-view" ref="dynamicRadar".

2021-11-22 16:29:35 5416

原创 e-charts雷达图，tooltip显示单轴下的所有数据

效果图如下：以下是全部代码：<template> <div class="radar"> <div class="chart-view" ref="dynamicRadar"></div> </div></template><script>import * as echarts from "echarts";import { getDeviceTypeList } from "@...

2021-11-11 19:06:36 3252

原创 e-charts经纬度渲染map图，tooltip中异步请求数据进行渲染

效果图：全部代码： <template> <div class="maps-container"> <div class="chart-view" ref="mainMap"></div> </div></template><script>import "echarts/map/js/province/hunan.js";import * as echarts from ...

2021-11-11 17:08:22 1173

原创前端proxy代理的方式解决跨域

主要思路：配置代理后发送的请求都是给本地服务器发送的，不会出现跨域的问题，但是我们最终目的是给后端服务器发请求，所以我们要通过代理把发送给本地服务器的请求映射到后端地址上1：把 baseURL 配置的后端接口改为 "/api"2：配置代理proxy，此时 proxy 会监听拦截所有请求接口中有 "/api" 的接口 => 重写接口路径把接口中的 "/api" 写为 " " => 发送给本地服务器的请求映射到 target 中设置的后端接口地址上，最后http://local...

2021-11-10 16:45:55 11175 10

原创 vue中导出excel表格

vue中导出文件的方法 handleExportList() { this.$confirm("导出数据较大,请耐心等待1~3分钟", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }).then(() => { const setParams = Object.keys(this.listQuery) .map((k

2021-10-22 14:18:14 242

原创 async-await

async关键字放到函数前面，表示函数是一个异步函数，async函数返回一个promise对象，返回值将隐式地包装在Promise.resolve中。 async function foo() { return 1 } // function foo() { // return Promise.resolve(1) // } console.log(foo());//Promise{<fulfilled>: 1}aw..

2021-10-04 15:56:19 236

cczz66的博客