h666000的博客

原创 react memo判断刷新机制 自定义的比较函数 避免重复渲染

导致后续当我更新currentWeekNumber的值的时候发现CourseListELement组件根本更新不了（因为后续我触发给swiper参数current的值就是初始值） 明明自定义的比较函数arePropsEqual 一直在返回false 通知CourseListELement组件重新渲染 调试才发现swiper的参数从一开始初始化后一直没有更新。一开始实现了我上面指定的问题需要的函数，后面发现怎么都刷新不了，

原创 NextJS设置Tailwind CSS

打开 tailwind.config.js 文件并根据项目需要自定义 Tailwind CSS。要在您的 Next.js 项目中使用 Tailwind CSS 样式，请将样式导入到您的 pages/_app.js 文件中。此配置设置 Tailwind CSS，添加必要的 PostCSS 插件，并包括 PurgeCSS 以删除生产构建中未使用的 CSS。这会导入已编译的 Tailwind CSS 样式并将它们应用于您的整个应用程序。这将在项目的根目录中创建一个 tailwind.config.js 文件。

原创 nextjs 明文数据加密

nextjs 明文数据加密。

原创 react 超出高度自动滚动组件

react 超出高度自动滚动组件 鼠标放入暂停 鼠标放出自动滚动

原创 antd 组件css的浏览器兼容性解决方案

最近写了几个后台管理，用的antd5最新版。开始都一切正常，直到测试提到360浏览器的样式有问题。才发现antd5的样式全部添加了css新语法，360浏览器完全不认识。详情请戳：https://ant.design/docs/react/compatible-style-cn以上是用where的兼容解决情况。

原创 vscode格式化配置

④ 复制下面代码修改配置文件 setting.json （注意下面是个人所有的vs code配置）目标任务: 基于vscode配置格式化工具，提高开发效率。② 按下Ctrl+Shift+P，查找settings。2.修改配置文件 setting.json。③点击右上角【打开设置】图标。vscode格式化配置。

原创 gojs v2.3.5去水印

在node_modules/gojs/release/go-module.js里搜索String.fromCharCode(a.charCodeAt(g)^b[(b[c]+b[d])%256]);

转载 pointer-event属性详解 元素穿透点击

元素穿透点果设置了pointer-event:none 并不意味着父元素上的事件侦听器永远不会被触发，当子元素上设置pointer-event值不是none,那么都可以通过事件传播机制来触发父元素上的事件。3、 当很多元素需要定位在一个地图层上面，需用到绝对定位、相对定位的元素，这样的话，这些元素就会盖住下面的地图层，元素不会成为鼠标事件的target。了，可以再给需要操作的元素区域设置为 pointer-events:auto。一、pointer-event属性可以指定在什么情况下元素可以成为鼠标事件。

原创 js 元素距离电脑设备的坐标位置

【代码】js 元素距离电脑设备的坐标位置。

原创 http请求被307到https

一个网址既可以用http又可以用https，如果访问了一次https，重复访问时浏览器会搜索缓存是否有https网址；如果有会被默认307（临时重定向）至https，我们想让https跳回访问http需要做跨域处理， 例如这种 用户 -> https -> nginx -> http -> 服务器。那就是你曾经访问过该网址的 https 链接(当然可以通过清除浏览器历史记录来骗过浏览器，但你的用户可能不知道这个操作)一切能通过 https 访问的网址，都用 https 来访问。

原创 antd4.x版本 react DatePicker 日期选择框 自定义按钮弹出日期弹窗

自定义按钮弹出日期弹窗 react DatePicker 日期选择框

原创 axios简易封装

代码】axios简易封装。

原创 Mapbox1.x transform:scale 缩放坐标偏移bug修复方案

以上的canvas元素如果进行缩小那rect.left和el.clientLeft中间会有空出空白空间没法计算得到的point坐标是错误的。把point变成鼠标指针相对于目标节点内边位置的X和Y坐标。修复mapbox地图源码-计算事件坐标添加位置的函数。一张图描述以上代码返回的坐标计算。用Unfull进行反缩放。用iframe进行嵌入。......

原创 react 为什么onClick里要写箭头函数

原创 loadsh 函数后缀 By和With的区别和理解

原创 JavaScript业务代码---连续按Enter按钮，聚焦下一个input

连续按Enter按钮，聚焦下一个input // input键盘事件 moveCursor(ev, col, row) { // console.log(this.cardInfo ,"this.cardInfoooooo=============") console.log(this.consumeTable,col,row ,'键盘事件') let Newindex = row * 19 + col; //计算是要选中哪个input，通过inputAl

原创 electron 缩略图实现

用到了nativeImage引用import { nativeImage} from 'electron' const imagebuff = nativeImage.createFromPath(path) //等比缩放到特定大小 let sizeContent = imagebuff.getSize() let calibration = sizeContent.width > sizeContent.height ? 'width' : 'height' const

原创 缩略图前端electron正常版本，（图片处理库sharp,同步缩小处理）

import fs from 'fs';import Promise from 'bluebird';import sharp from 'sharp';Promise.promisify(fs.readFile)('./a.png') .then(buffer => { sharp(buffer) .resize(100, 100,{ fit: 'inside' }) .toFile('output.webp', (err,

原创 # node、imagemin实现缩略图的过程

安装库import imagemin from "imagemin";import bluebird from "bluebird";import imageminMozjpeg from "imagemin-mozjpeg";import imageminPngquant from "imagemin-pngquant";//版本"imagemin": "^7.0.1","imagemin-mozjpeg": "^8.0.0","imagemin-pngquant": "^6.0.1",

原创 记录一次a标签＜a＞+this.$router.push(‘‘)跳转2次的bug

//bug代码<a :data-category1Id="item.categoryId" href="#" @click="jumpEvents">{{ item.categoryName }}</a>this.$router.push(localtions)会出现跳转2次的情况//第一次http://localhost:8080/#/search?category3id=165&categoryName=LED%E7%81%AF//第二次http://

原创 请求api加载进度条插件 nprogress的使用

关于请求api加载进度条插件 nprogress的使用// 使用地方：在路由拦截器使用npm i --save nprogress//导入模块import nprogress from 'nprogress'//导入样式import 'nprogress/nprogress.css'//插件使用方法nprogress.start();nprogress.done();效果图...

原创 axios 二次封装

import axios from ‘axios’axios.defaults.baseURL = ‘https://cnodejs.org/api/v1’axios.defaults.timeout = 10000axios.defaults.headers.post[‘Content-Type’] = ‘application/json;charset=UTF-8’// 请求拦截器axios.interceptors.request.use((config) => {return co

原创 vue2.0 关闭eslint

根目录创建vue.config.jsmodule.exports = { lintOnSave: false}

原创 axios基于常见业务场景的二次封装_JavaScript

原创 vue的$parent $refs 和 $attrs $listener

vue的$parent $refs 和 $attrs $listener$parent ：获取父对象的实例$refs：获取子组件的数据以及方法$attrs：获取父组件的传的数据 prop接收$listener：获取父组件的事件监听器

原创 vue关于滚动事件 v-on:scroll

vue关于滚动页面全局监听滚动created() {var _this = this; window.addEventListener('scroll',()=>{//触发事件},true);}局部监听<!--添加ref--><div class="headcol" ref="viewBox"> <table> <thead> <tr >

原创 css深度作用选择器 (修改element样式)

css深度作用选择器 (修改element样式)有效 ::v-deep 案例：.rightEdgeImage { margin: 0 20px; ::v-deep .el-image__inner { max-width: 100%; max-height: 100%; width: auto; height: auto; }}其他方案这是 vue-loader 提供的一种写法，如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响

原创 关于调用组件里的元素 $listeners

关于调用组件里的元素调用根组件 直接在添加.native<base-input v-on:focus.native="onFocus"></base-input>调用组件里的特定元素:// 子组件Vue.component('component-input',{ template: ` <div><span>你好</span><input type="text" v-on="memefoc

原创 关于javascript简单的防抖代码

关于javascript简单的防抖代码data(){ return{ vrII: "", vrIIisative: true, }}() => { if(this.vrII) clearTimeout(this.vrII); if(this.vrIIisative) { //被防抖的代码 this.$message.warning("这是最后一张"); } this.vrII = setTimeout(() => { tha

原创 vue Normalize.css的使用

添加日期时间%DATE% %TIME%npm run normalize.css// 在main.js中引用import 'normalize.css/normalize.css' // A modern alternative to CSS resets作用：Normalize.css只是一个很小的css文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset，Normalize.css是一种现代的，为HTML5准备的优质替代方案。Normaliz

原创 vue项目 watch之 $route

添加日期时间%DATE% %TIME%// A:代码 $route: { handler: function(route) { this.redirect = route.query && route.query.redirect console.log("redirect",this.redirect) }, immediate: true }// B:代码this.$router.push({

原创 js+electron代码混淆 asarmor的应用

npm i asarmor 下载混淆插件在package文件build里添加"afterPack": “./myAfterPackHook.js”编写myAfterPackHook.js文件myAfterPackHook.js 文件const { Asarmor, Trashify } = require('asarmor');const { join } = require("path");exports.default = async ({ appOutDir, packager })

原创 关于高逼格VUE导入import from的来源 省略后缀与加载文件夹

查看Vue-Element-Admin的源码，其中有个Layout.vue：里面调用import导入了3个组件：import { Navbar, Sidebar, AppMain } from ‘./components’这里，from的路径’./components’就是个文件夹。于是，按照前面的规则，首先查看文件夹下是否有package.json：并没有package.json。package.json不存在，那么查找index.js。index.js是存在的，于是加载。打开index

原创 javascript 回调函数数字一直加1

cutt_x(Arr = {}, param = {}, current = 0){ current++; that.cutt_x(Arr, param, current);}

原创 javascript 图片推拽到图片上覆盖

思路：图片设置z-index为最底部，再添加一个div模板设置为z-index: 999 这样拖拽文件会触发新建的div，然后在drop事件修改图片的dom <el-image :src="URL" v-if="isShowImg" style="width: 770px; height: 433px" :preview-src-list="[URL]" > <div id=

原创 vue 拖拽文件上传图片

<div id="dragDropDiv" ref="allimg"></div> mounted() { setTimeout(() => { var that = this; let allimg = document.getElementById("dragDropDiv"); allimg.ondragenter = allimg.ondragover = allimg.ondraglea

原创 关于Error in callback for watcher “items“: “ReferenceError: items is not defined“

写代码时，name是一个[0,1]的数组 通过深拷贝传进来的参数解决问题 configureAssignment(state, name) { // debugger // var _obj = JSON.stringify(name); // name = JSON.parse(_obj); if (name[0] == null){ state.uploadparameter.epoch = "16" state.u

原创 解决在vue中axios请求超时的问题

自从使用Vue2之后，就使用官方推荐的axios的插件来调用API，在使用过程中，如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。具体原因最近公司在做一个项目, 服务端数据接口用的是java输出的API, 有时候在调用的过程中会失败, 在谷歌浏览器里边显示Provisional headers are shown。按照搜索引擎给出来的解决方案，解决不了我的问题.最近在研究AOP这个开发编程的概念，axios开发说明里边提到的栏截器(axios.Intercepto

原创 js传输图片路径

js传输图片路径数据库中存储数据/commons/img/***.jpg格式的图片路径。 "<a onclick=\"showImg(\'"+dataEle.imgPath.replace(/\\/g,'\\\\')+"\')\">查看图片 "显示时要.replace(/\/g,’\\’)，将所有\替换为\才能传输路径否则会报错。...

原创 this.$refs 与 v-if 的冲突解决方法

this.$refs 与 v-if 的冲突解决方法因为if渲染的原因，所以refs还没挂载上去，所以打印这个this.$refs == undefined解决方法： console.log(this.$refs) //无 setTimeout(() => { console.log(this.$refs) //有 }, 0);...