- 博客(95)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 这种鼠标悬浮，图片放大，鼠标移出，图片变回原来的大小，是如何实现的？
不是 JavaScript 或 Vue 的函数，它是 CSS 中的一个变换函数，用于对元素进行缩放操作。具体来说，它会将元素按照指定的比例进行放大。要了解更多有关 CSS 变换函数的信息，您可以查阅 CSS 变换（Transform）的文档。在Vue中实现鼠标悬浮时图片放大效果，以及鼠标移出时图片恢复原来大小，可以使用Vue的事件绑定和样式绑定功能来完成。时，图片会按照比例 1.2 进行放大。的状态来设置图片的放大效果。是应用于图片元素的样式，当。，图片会恢复原来的大小。在前面的代码示例中，
2023-08-10 15:33:05
1259
原创 iframe跨域解决方案
在 Web 开发中，跨域是指在一个域（例如，https://www.example.com）的页面中请求了另一个域（例如，https://api.example.com）的资源，浏览器出于安全考虑会阻止这样的请求。：在父页面的同域下创建一个代理页面，该页面与 iframe 的目标域同源，然后在代理页面中请求目标资源，并将请求结果传递回父页面。这样可以绕过跨域限制，但需要后端协助。：如果想在当前系统里嵌入其他系统链接，可以在nginx中，将请求的接口代理到对应的服务器下，实现接口的正常调用。
2023-08-03 17:15:09
13177
6
原创 微信小程序分享只能通过微信自带的右上角三个点分享吗
在微信小程序中，用户可以通过**右上角的三个点（更多按钮）**来进行分享，这是微信小程序提供的默认分享入口。用户点击右上角的三个点后，会弹出分享菜单，包含了分享到微信好友、朋友圈等选项。自定义分享通过onShareAppMessage生命周期函数来实现。当用户点击右上角的分享按钮时，该函数会被调用，并可以返回一个自定义的分享配置，包括分享的标题、图片、路径等。除了使用右上角的三个点进行分享，微信小程序还提供了一种。允许开发者在小程序中自定义分享的内容和分享入口。
2023-08-01 14:45:04
1677
原创 子组件因多次监听导致重复调用接口问题
发现每次监听时打印出来的对比值都是三个，因为有三个tab，说明就是一次tab点击，会对比三次，每次对比都会触发相应的接口。有多个tab切换页面，因为内容一致，写了一个公共组件，这个组件我每次监听当前tab点击的index值，因为有3个tab，就会监听三次，所以每个tab里对应的接口就会相应的调用3次接口，造成渲染变慢影响性能。使用vuex进行存储，但如果不是大型项目，用vuex纯属为了用而用，代码就会变得不轻量，冗余。要在父组件每次切换tab时直接调用相应的接口，把值传递给子组件，即可解决此问题。
2023-07-31 21:18:55
313
原创 前端部署项目，经常会出现下载完 node 或者 npm 运行时候发现，提示找不到
1. 首先要在下载时候选择要下载的路径，不能下载完后，再拖拽到其他文件夹，那样就会因为下载路径和当前路径不一致，导致找不到相关变量。2. 所以一开始就要在下载时候确定要存放的路径，然后如果运行报错，就去检查环境变量path里是否有相关路径，3. 如果有，重启再进行尝试，基本就可以了。4. 但是如果不小心挪动位置了，也不要担心，删了重新下载，重新选择路径。重复步骤2、3即可
2023-07-15 10:35:12
573
原创 js 异步请求内函数还没执行完，就需要用到上一个参数
我们可以在异步请求内返回一个 Promise 对象，然后在需要使用上一个参数的代码中使用 Promise 对象的 then 方法来处理异步操作的结果。因此，在异步请求内函数还没有执行完的情况下，需要使用上一个参数的值，可以使用回调函数或者 Promise 对象来解决这个问题。在异步请求内，我们可以将需要使用上一个参数的代码放在回调函数中，等待请求返回后再执行。无论是使用回调函数还是 Promise 对象，都可以解决在异步请求内函数还没有执行完的情况下，需要使用上一个参数的问题。
2023-03-27 09:24:35
162
原创 用flv.js播放多路视频
要添加多个视频流，您需要创建多个FLV实例，并将它们附加到不同的video元素上。您可以使用CSS来调整多个video元素的位置和大小，以适应您的布局需求。2.创建一个video标签。1.引入flv.js库。
2023-03-22 17:37:21
1387
原创 vue 父组件给子组件传值，在 dom 树上直接判断导致报错问题解决
初始写法报错问题原因dom 树加载之初，还没拿到数据，就加载了，因此在上边判断取不到值，导致页面构建不出来解决方案开始我放在$nextTick里也不行，原因可以参考这篇文章：然后使用计算属性解决了问题，修改后的代码 <vue-seamless-scroll v-if="getodayAlarmTypeNum.length >= 10" :data="getodayAlarmTypeNum" :class-option
2022-03-10 11:11:59
989
原创 vue 在一个页面跳转到另外一个页面，选中的导航没有变解决方案
效果：即在配置页面跳到管理页后，没有选中管理，还是跳转前的选中状态解决思路：1.定位：路由和默认选中菜单的监听问题2.方案：去菜单组件中，通过监听路由变化，改变选中值具体代码实现：<el-aside :class="navBarWidth"> <el-menu @select="handleSelect" :default-active="defaultActive" class="el-menu-vertical-d
2022-02-10 10:44:25
3710
原创 关于函数的封装和引用
方式一、common.js规范的封装封装//accDiv.js 文件module.exports = { accDiv: function(num1, num2) { var t1, t2, r1, r2; try { t1 = num1.toString().split(".")[1].length; } catch (e) { t1 = 0; } try { t2 = num2.toString().split("."
2022-01-28 14:54:49
988
原创 数据转化——echarts堆叠柱状图，返回数据转化为echarts 所需数据
效果如图//返回数据let result = { 6: [ { name: "人员", value: "8" }, { name: "驴头", value: "20" } ], 8: [ { name: "人员", value: "10" }, { name: "驴头", value: "15" } ] };
2022-01-14 17:36:31
744
原创 async await在项目中的使用
最近发现了一个异步导致的先后加载的问题，AB两个函数里都有异步操作，导致有时候A函数先加载，有时候B先加载，所以需要用 async await 解决这个问题，在异步函数async内，每次都会等待A函数执行完，再做其他函数操作。drawAlarmBoxBase(row) { this.bigCanvas = true; this.$nextTick(async () => { var canvas = document.getElementById("alarm
2022-01-14 11:51:09
378
原创 地球绕着太阳转的小动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
2022-01-13 17:59:23
209
原创 给canvas中遍历出来的框，根据重心点/底边中心点连线，并标记两个框之间的距离
原理在画布上遍历数据画框，如果是两个有关系的数组，存一个 A 数组，遍历另一个的同时取之前存好的 A 数组的数据，根据 canvas api 画线。返回值示例具体实现drawAlarmBox(row) { //row是后端返回的值，是一组对象 this.bigCanvas = true; this.$nextTick(() => { var canvas = document.getElementById("alarmBigCanvas");
2022-01-13 16:16:49
455
原创 周期动画——利用取小数部分画出加载循环的动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>周期动
2022-01-04 16:40:24
259
原创 获取对象数组最大值及其索引
对象数组如下：封装函数getMaxIndex(arr = []) { if (arr.length == 0) return -1; var maxIndex = 0; var max = arr[maxIndex].value; arr.forEach((item, index) => { if (item.value > max) { max = item.value; maxInd
2021-12-29 16:24:03
553
原创 将数据滚动到指定位置
主要思路：通过id加.scrollTop和.offsetTop属性实现<div class="oil-list" id="scrollBody"> <ul v-for="(item, index) in dataTree[0].children && dataTree[0].children" :key="index" >
2021-12-23 18:01:54
253
原创 两个数组匹配方法
<p v-for="(one, index) in children" :id="'alarmId' + one.id" :key="index" :class="{ 'alarm-oil': alarmArr.includes(one.id) }" &
2021-12-23 17:28:34
1639
原创 echarts 网格线，坐标轴线，坐标轴文字的配置，不同柱子设置颜色
各种线的显隐xAxis: [ { type: "category", name: "名称", nameTextStyle: { color: "#fff", fontSize: 14 },
2021-12-22 15:24:55
686
转载 echarts 轮播柱图
转载自：https://www.programminghunter.com/article/97311635790/效果（自动轮播数据）第一种：通过timeline实现var areaList = [ "北京市昌平区", "北京石景万达","北京海淀区苏宁", " 北京朝阳区望京街", " 北京朝阳区太阳宫", " 北京东城王府井", " 北京丰台区蒲方路", " 上海市虹口区", " 上海市普陀区", "上海市静安区", " 上海市
2021-12-22 14:42:35
1947
原创 vue下载excel
封装下载jsimport axios from "axios";/* data: { url: '' // 请求路径 data: {} // 请求参数 name: '' // 文件名 }*/export default function(data) { axios({ method: "post", url: data.url, responseType: "blob", data: data.da
2021-12-03 16:28:20
687
转载 前端mqtt使用总结
本文转载自https://www.codenong.com/cs105863097/，主要解决了 mqtt 连接，重连，数据实时传递等问题简介MQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，是 TCP/IP 的再封装，由 IBM 在 1999 年发布。MQTT 最大优点在于，地开销，少流量实现网络通信协议原理mqtt 协议中有两种角色，客户端和服务端。服务.
2021-11-23 11:12:42
7334
1
原创 git 新建的分支，拉取原分支的某次提交，形成新老版本
步骤：首先在原分支上，切换到想要拉取的那次提交git checkout f45dd2940976506f5a51afd28642bb3659578c12，在第一步的基础上新建分支，git checkout -b qywxlogin1验证原分支代码和新建分支的代码，就是新老版本...
2021-09-23 11:20:21
303
原创 常用正则表达式整理
/^[A-Za-z0-9~!@#$%^&*()_+-=`\\|":;',./{}\[\]\?<>]{8,30}$/ 支持字母、数字，8-30个字符长度/^[a-zA-Z0-9\u4e00-\u9fa5]{0,100}$/ 客户名称长度<= 100，支持汉字、字母、数字/^[a-zA-Z0-9\u4e00-\u9fa5]{2,30}$/ 允许输入2-30个字符，支持中文、字母、数字、符号："-"、"_"，不允许输入空格、特殊符号/^[a-zA-z]{4}-\d{6}-
2021-09-15 15:32:40
385
原创 树图Tree和 四分屏视频做联动实现
效果图：我这里使用的是iview，element-ui道理是一样 <Tree ref="myTree" :data="tree" @on-check-change="treeChange" :multiple="multipleBoolean" show-checkbox :check-directly="true"> </Tree> <div class="r
2021-08-12 11:34:00
172
原创 vant 上传图片加百分比进度
功能给每个上传的图片加可实时展示的进度，方便在网络不好情况下，实时查看上传情况，提升用户使用友好度。代码实现upload.vue<van-uploader :after-read="afterReadAll" v-model="beforeArkList" multiple :max-count="10" :preview-full-image="previewFullImage"></van-uploader> da
2021-08-10 17:59:25
1513
原创 form表单校验，this.$refs[name].validate(valid）返回false，解决方案
1. 如果 rules 里有二次校验，校验成功需要加 callback()//比如：ruleValidate:{ deviceName: [ { required: true, message: "设备名称不能为空", trigger: "blur" } { validator: (rule, value, cb) => {
2021-06-07 18:19:22
4282
原创 给定一个整数数组，判断是否存在重复元素
如果任意一值在数组中出现至少两次，函数返回 true 。如果数组中每个元素都不相同，则返回false。 不能用对象方法 不能用es6特性方法一：思路，先排序，再循环对比 function getBoolean(arr){ let orderArr=arr.sort() for(let i =0;i<orderArr.length; i++){ if(arr[i]==arr[i+1]){ return true }else{
2021-06-03 11:07:09
469
原创 echarts 象形柱图
实现效果实现思路和常规柱图类似，配置项type: "bar" ，只有图片路径需要注意下。实现代码customBarCharts() { this.$api.dataDeck.manStructure().then(res => { var customBar = this.$echarts.init( document.getElementById("customBar") ); var img2 = {
2021-04-22 18:50:35
433
原创 element-ui table 展开行
实现效果实现代码 // 当 row 中包含 children 字段时，被视为树形数据。支持子节点数据异步加载。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。 <el-table :data="searchResult" style="width: 100%" height="385" :header-cell-style="{ 'background-color': '#2C2E
2021-04-22 15:14:32
593
原创 人脸/物体识别，用 canvas 给图片画框（vue实现）
图片识别少不了画框，前端画框就用canvas，后端返回画框数据点，图片可以是前端自己传的也可以是后端返回的。实现思路：1、算好比例尺2、确定上、左位置，确定宽高（后端如果给上下左右，前端自行计算宽高）3、图片预加载时画图4、注意 js 的乘除会有出入，所以要精确化处理效果图实现代码：<template> <div class="carDetect"> <div class="uploadImg"> <el-button ty
2021-04-13 18:43:26
4215
原创 js字符串转Boolean值
this.status = "true"JSON.parse(this.status) //truethis.status = "false"JSON.parse(this.status) //false
2021-03-15 17:23:57
345
原创 vue 自定义指令
使用场景要实现的功能没有复杂到需要使用组件，但是又不是一个表达式能解决的。使用方法官方文档示例：// 单独写在 n.js 文件 Vue.directive('n', { bind: function(el, binding){ el.textContent = Math.pow(binding.value, 2) }, update: function(el, binding){ el.textContent = Math.pow(binding.value, 2) }.
2021-02-18 14:09:56
63
原创 vue-router使用笔记--嵌套路由
对比以下两种路由配置方法的不同效果：<div class="home" ref="home"> <div class="btn"> <router-link class="route" to="/shopAnalyse/index">店铺</router-link> <router-link class="route" to="/cigareteAnalyse/index">卷烟</router-link&g
2021-01-30 16:30:39
83
原创 API规范
Create请求方法：POST请求参数：创建的对象示例： /pets/types响应Code：201响应体：完整对象，包括主键Update全量更新：PUT 未提供局部更新：PATCH请求参数：需要包含主键示例： /pets/types/{id}响应Code：200响应体：完整对象Delete请求方法：DELETE请求参数：主键，在链接中示例： /pets/types/{id}响应Code：204无响应体Research请求方法：GET请求参数:Query:
2021-01-04 16:12:57
122
原创 三部修改本地git账号
git config --global user.name “hq”git config --global user.email “159*****[email protected]”git config --list
2021-01-01 21:20:42
261
原创 echarts 折线图的线下颜色设置
areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'red' }, {
2020-12-25 17:39:23
1117
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人