- 博客(25)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 清除浮动的方式
浮动，清除浮动的方式方式一：使用after伪元素清除浮动<style>.clearfix:after{ content:''; display:block; height:0; clear:both; visibility:hidden;}</style><body> <div class="fahter clearfix"> <div class="big">big</div>
2022-07-04 11:00:56
187
原创 react开发常用的库和框架
ahooks特性：易学易用支持 SSR对输入输出函数做了特殊处理，避免闭包问题包含大量提炼自业务的高级 Hooks包含丰富的基础 Hooks使用 TypeScript 构建，提供完整的类型定义文件DvaJS特性：易学易用仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 APIelm 概念通过 reducers, effects 和 subscriptions 组织 model，简化 redux 和 redux-saga 引入的概念插件机制比
2022-05-23 23:33:56
402
1
原创 本地图片转base64
代码/*url, 本地路径ext, 图片后缀width, 图片宽度height, 图片高度callback 回调函数 用来取值*/ getUrlBase64(url, ext, width, height, callback) { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var img = new
2022-05-11 09:55:35
355
原创 react配置路由结合react-router-dom和react-router-config
一、安装依赖yarn add react-router-dom@5yarn add react-router-config注意：这里有个小坑，react-router-dom在v5版本升级到v6版本有一些变换。(1) Switch 重命名为 Routes(2) Route 的新特性变更 ,component/render被element替代所以安装react-router-dom需要安装5版本否则将会出现以下错误：二、配置路由import HYDiscover from "../page
2022-04-17 20:35:24
1831
原创 react无需eject 使用 craco配置webpack
一、安装cracoyarn add @craco/craco二、修改package.json旧："scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },改为："scripts": { "start": "craco start"
2022-04-17 19:27:32
1167
原创 前端js下载文件时后缀名多出一个下划线（已解决）
问题：前端js下载文件时后缀名多出一个下划线在打印的时候发现文件名啥啥啥的都没问题，创建的元素似乎也没问题。但是呢结果？多了个下划线。原因细心的你可能发现了a标签的dounload的内容是双层双引号。具体原因可能是谷歌浏览器做了安全处理吧（瞎猜的）。不过我在火狐是测试是正常的。解决方法将文件名称的双引号去掉即可fileName.replace(new RegExp(’"’, ‘g’), ‘’) exportFile(url, params = {}) { retu
2021-12-29 11:40:11
6293
12
原创 js面试题（不定期更新）
this面试题this面试题函数和变量的提升机制（TODO）运算符优先级运算符优先级正则表达式正则表达式==双等号和===三等号的区别以及一些常见的判断区别：==对比值，===对比类型和值== 操作符：① 判断类型是否相同？使用 === 操作符判断：下一步判断②是否为null与undefined的对比？返回true：下一步判断③是否为string类型与number类型的对比？将string隐式转换为number：下一步判断④是否为boolean类型与其他any类型的对比
2021-08-28 15:49:54
207
原创 git代码 vscode 本地分支合并远程分支，远程分支合并到本地分支
本地分支合并远程分支创建本地分支本地分支修改后commit切换到远程分支合并本地分支push代码远程分支合并到本地分支切换到本地分支合并远程分支
2021-08-26 23:14:39
7985
1
原创 前端存储cookie、session、localStorage、sessionStorage、IndexedDB
cookie定义： HTTP Cookie（也叫 Web Cookie或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。cookie使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。特点：①.大小受限制，cookie的大小被限制在4KB②.可以设置过期时间③.同一个域名下存放的cookie的数量是有限的，一般为20个，不同浏览器不
2021-08-16 17:38:32
1104
转载 vue crypto-js数据加密解密、密码加密解密
1、先在vue项目中安装crypto-js2、新建一个utils.js文件3、utils.js内容/** * 工具类 */import Vue from 'vue'import CryptoJS from 'crypto-js'export default {//加密 encrypt(word, keyStr){ keyStr = keyStr ? keyStr : 'abcdefgabcdefg12'; var key = CryptoJS.enc.Utf8.p
2021-08-04 14:22:34
1039
原创 react typescript配置vscode中css提示
一.安装插件npm install typescript-plugin-css-modules --save-dev二.配置tsconfig.json在compilerOptions对象中加一项"plugins": [{ "name": "typescript-plugin-css-modules" }]三.配置vscode在根目录中新建文件夹.vscode在文件夹中新建文件settings.json在文件中配置：{ "typescript.tsdk": "node_modules/typ
2021-07-17 16:18:39
1032
原创 react中使用less，不用手动配置webpack。并包含TypeError: this.getOptions is not a function错误解决方法
前言：我相信你们百度了很多教程叫你们去打开eject然后自己手动配置webpack，我试过很多次但最终还是失败了，不知道是我配错了还是咋地。后来发现了这个办法简单好用。注意： 文章中引用包我都是用的yarn,你们用npm也是可以的1.引入less和less-loaderyarn add less less-loader@5.0.0注意： 这里解释一下为什么要指定less-loader@5.0.0版本，因为直接安装的是最高版本，但是会存在不兼容和没效果的情况，这个会在下面进行解释。2.引入 re
2021-06-03 22:44:59
790
4
原创 vue前端对接Hikvision海康威视监控，pc端对接，插件模式
一.对比有无插件两种模式我之前已经把无插件对接的方式做了一篇文字有兴趣的可以去看看。有插件和无插件的区别：1.无插件的模式可以在pc和移动端运行，插件模式不能在移动端播放，因为电脑需要装一个插件，没用这个插件浏览器无法播放。2.插件模式相比无插件模式多了很多操作比如让摄像头旋转（前提是摄像头支持旋转）还有一些自带的操作。二.示例官方其实有几个demo...
2021-04-13 17:01:48
9889
17
原创 Hikvision海康威视监控前端对接，移动端对接，pc端对接，无插件模式
https://open.hikvision.com/docs/69d3d37a56ec4d24a6596c3e6ed436afhttps://open.hikvision.com/docs/9870ebc5fcd47a5cbc1811907787b1e7
2021-04-13 15:59:52
7371
原创 在vue中播放m3u8格式文件
html代码 <div> <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'> <source id="source" src="http://xxxxxx/openUrl/DIwGl32/live.m3u8"
2021-04-13 15:58:21
2260
原创 html中播放m3u8文件
更换有效src打开就行<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>播放m3u8格式</title> <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> <script src="https://unp
2021-04-13 15:14:52
11820
1
原创 前端实现word,excel,pdf文件预览
用法使用docx云服务的在线预览http://view.xdocin.com/xdoc?_xdoc=文件地址例子：fileUrl：是服务器的文件地址<iframe :src="'http://view.xdocin.com/xdoc?_xdoc='+fileUrl" width="100%" height="100%" frameborder="0"></iframe>预览效果预览效果除了pdf有点特别其他类型文件的预览基本差不多pdf文件预览效果：
2021-01-27 16:47:26
676
原创 鼠标移入元素和鼠标移出元素
1.mouseenter事件、mousemove事件和mouseover事件mouseenter：鼠标光标从元素外部首次移动到元素范围之内时触发，这个事件不冒泡，而且在光标移动到后代元素上不会重复触发。通常和mouseleave搭配使用。mousemove：鼠标光标在元素内部移动时重复地触发。mouseover：鼠标光标位于一个元素外部，首次移动到另一个元素边界之内（包括后代元素）时触发。2.mouseleave事件和mouseout事件mouseleave：位于元素上方的鼠标光标移动到元素范围之
2020-12-24 15:14:09
1921
原创 elementUI饿了么UI时间日期选择器限制只能选择当前时间后的日期
//html<el-date-picker v-model="forYouTime" //数据绑定 :picker-options="pickerOption" //控制时间范围 type="datetime" //空间类型 size="small" //控件大小 value-format="yyyy-MM-dd HH:mm:ss" //控件的时间格式设置 placeholder="选择日期时间" >//jsdata(){ return { //控制时间范围 p
2020-12-21 17:53:41
2243
原创 前端javaScript本地数组列表分页+新增+删除
<template> <div class="salesOutlet"> <search-bar> <template v-slot:title> <a-icon type="file-text" />销售出库 </template> <template v-slot:default> <a-button type="primary" icon="plus" @cli
2020-11-16 14:48:49
280
原创 v-chart 报错 Uncaught TypeError: Cannot read property ‘coordinateSystem‘ of undefined
错误提示：Uncaught TypeError: Cannot read property ‘coordinateSystem’ of undefinedat Object.layout (cartesianAxisHelper.js:54)at ExtendedClass.render (CartesianAxisView.js:74)at echarts.js:1427at Array.forEach ()at each (util.js:300)at renderComponents (
2020-10-13 19:52:08
3874
原创 项目安装sass时报错
这个坑我踩过几次了，目前遇到的是两种原因导致的报错1.版本太高原因：因为npm安装的sass默认是最高版本，然后安装完之后直接使用就会报错，具体报什么错当时忘记记录了，下次补上。下次一定，下次一定解决方法：去package.json中找到 sass-loader将版本改为"^7.3.1"或则其他低版本，然后重新install就ok了2.安装时网络不稳定原因：网络不稳定解决方法：换个稳定的网络重新安装就行...
2020-10-13 19:47:41
235
原创 element-ui按需引入踩坑
以下步骤都是element提供的按需引入的方法，那为什么会踩坑呢？坑就肯在步骤三需要新创建一个文件夹来存放需要按需引入的内容而官方文档并没有提示出来，这个地方我当时搞了半天，我一度怀疑是我代码写错了。1.安装 npm install babel-plugin-component -Dnpm install babel-plugin-component -D2.找到.babelrc文件，在plugins数组中添加[ "component", { "libraryNam
2020-10-13 19:37:07
1218
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人