utils
@时空旅人
你很懒。还没添加简介
展开
-
scale实现页面缩放自适应
使用注意事项代码中的所有的宽高是指正常视图下的宽高,我的项目是大屏,所以正常视图下是 1920 * 1080,普通 PC 项目,那应该是 1920 * 937由于缩放是对 #app 进行的操作,很多UI框架的全局弹窗无效,因为弹窗不包含在 #app 元素中,可查看框架是否有提供API指定弹窗位置,Element-ui 是有的/** * 需要有一个 #app 元素,并有如下样式 * width: 1920px; * height: 1080px; * position: absolute;原创 2022-04-29 17:25:01 · 2148 阅读 · 0 评论 -
rtsp 视频流 播放方案
后端将 rtsp 转 flv(转换方式多种,根据需求百度),前端使用 flv.js 播放原创 2021-08-31 14:17:08 · 128 阅读 · 0 评论 -
实现 websocket 带心跳重连
import { getWebsocketUrl } from '@/api/ajax'export default function (callback) { const path = getWebsocketUrl(); const jspCode = 100; let websocket; // 避免重复连接 let lockReconnect = false, tt; // 调用 createWebSocket(); /** * websocket启动原创 2021-06-08 10:00:34 · 104 阅读 · 0 评论 -
微信小程序配置多环境
版本要求 2.2.2以上API:getAccountInfoSync (获取应用信息)const accountInfo = wx.getAccountInfoSync();const env = accountInfo.miniProgram.envVersionlet baseUrl = "xxx";if (env == 'release') { baseUrl = "xxx" // 正式版} else if (env == 'trial') { baseUrl = "xxx";原创 2021-06-04 14:45:56 · 1184 阅读 · 0 评论 -
vue-cli 多环境配置
1、创建环境变量文件在 ./src 同级目录下创建 环境变量文件 .env.dev ,文件名称格式 .env.* , * 为环境名称。.env.dev 文件内容// 变量名必须以 VUE_APP 开头,否则无法获取到VUE_APP_ENV=dev2、命令行引用相关 环境文件在 package.json 文件中配置相关命令,使用 --mode 指定环境名称"scripts": { "dev": "vue-cli-service serve --mode dev",}3、获取配置的环原创 2021-06-04 09:47:47 · 263 阅读 · 0 评论 -
vue-cli 项目 循环读取文件夹内所有文件
require.context实现动态读取文件内容,主要依靠 webpack 的 require.context 方法,require.context 方法有三个参数:directory {String} - 读取文件的路径useSubdirectories {Boolean} - 是否遍历文件的子目录regExp {RegExp} - 匹配文件的正则语法:/** * require.context * @param {String} directory 读取文件的路径 * @par原创 2021-06-04 09:33:54 · 4816 阅读 · 0 评论 -
PC大屏幕rem自适应
1、先安装 px 转 rem 插件npm install postcss-px2rem px2rem-loader --save2、新建 rem.js 等比适配文件// rem等比适配配置文件// 基准大小const baseSize = 16// 设置 rem 函数function setRem () { // 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。 // 设计师给我的是 1920 * 1080 设计图,这里根据需要更改 const scaleX = d原创 2021-05-11 16:33:37 · 1438 阅读 · 2 评论 -
canvas AI智能识别画框
<template> <div class="app-container calendar-list-container"> <canvas id="canvas" @mousedown="handleMousedown" @mousemove="handleMousemove"></canvas> <div><el-button @click="init">清空画布</el-button>原创 2021-03-11 16:11:41 · 590 阅读 · 0 评论 -
el-time-picker 时间段交叉判断
const timeArr = [['10:00', '11:00'], ['12:00', '13:00'], ['10:30', '12:30']]const isStartThanEnd = timeArr.find(item => { return item[0] > item[1]})if (isStartThanEnd) { Error('开始时间不能大于结束时间!');}// 只有一条配置,不存在交叉的情况if (timeArr.length == 1) {原创 2021-03-09 17:14:49 · 653 阅读 · 1 评论