丶酸酸-CSDN博客

原创 react 实现自定义拖拽hook

前沿最近发现公司的产品好几个模块用到了拖拽功能，之前拖拽组件是通过Html5 drag Api 实现的但体验并不是很好,顺便将原来的拖拽组建稍做修改，写一个自定义hook，方便大家使用拖拽功能。正文拖拽功能原理：拖拽元素通过addEventListener监听器添加鼠标按下，鼠标移动，以及鼠标抬起事件。再通过getBoundingClientRect() 得到拖拽元素四周相对于可拖拽区域边界的距离。鼠标移动时计算x轴和y轴的移动偏移量。通过element.style.transform 设置

2022-03-12 00:08:41 1824 3

原创让你一次吃透ES6 Proxy

我们总是在各种前端面试题中发现Proxy,那么这个Proxy到底是什么呢？今天带你一篇文章吃透Proxy。Proxy概述Proxy对象用于创建一个对象的代理，从而实现基本操作和拦截和自定义(如属性查找、赋值、枚举、函数调用等)。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。术语handler包含捕捉器(trap)的占位符对象，可译为处理器对象。traps提供属性访问的方法。这类似于

2022-03-07 22:40:59 753

原创 useState实现回调

useState实现"回调"团队最近从类组件转向函数式组件，遇到了一个问题就是无法在useState中设置回调方法。react hook，官方将setState移除了回调方法，由于setState是异步方法，没办法直接在set后拿到最新的数据，所以我们可以通过以下两种方式来拿到更新后的值。useEffect实现const [count, setCount] = useState(0);const addCount = () => { setCount(count+1);};

2022-03-07 22:35:06 6368

原创 antd form表单处理自定义组件

使用 antd 中的 Form 组件时，若使用自定义组件时，保存的时候获取不到自定义组件中的值。以下是从antd找到的解决思路：被设置了 name 属性的 Form.Item 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性）我们可以通过表单控件自动添加的onChage，来做数据收集同步。父组件：import React, { Fragment, useState, useEffect, for.

2021-05-17 16:13:26 5796

原创 react高频面试题（http&&浏览器篇）

react篇前言正文1.cookies、sessionStorage和localStorage的区别？2.你知道那些HTTP状态码？（说具有代表性的即可）3.讲一下https。4.浏览器缓存？5.什么是跨域？跨域的解决方案有哪些？前言网上的React面试题文章有非常多，但很多题都过时了。有的文章只包含了react相关题目，但是真正面试不只考react问题，js，css，http，es6都会涉及的到。此片文章，针对以上几点，整理了一些时下高频的react前端面试题，并且做出相应的解析。其他篇：re

2021-04-04 17:20:26 613

原创 react高频面试题（css篇）

css篇前言正文1.水平垂直居中？2.BFC概念？触发条件？常用场景？3.实现1px边框？4.Flex？flex：1含义？5.盒模型概念，如何切换盒模型？6.什么是less？前言网上的React面试题文章有非常多，但很多题都过时了。有的文章只包含了react相关题目，但是真正面试不只考react问题，js，css，http，es6都会涉及的到。此片文章，针对以上几点，整理了一些时下高频的react前端面试题，并且做出相应的解析。其他篇：react高频面试题（JavaScript篇）.react

2021-04-04 17:17:46 470

原创 react高频面试题（react篇）

react篇前言正文React篇1.什么是JSX？2.讲一下虚拟Dom？3.类组件和函数组件之间的区别是什么？4.hooks出现的意义？5.了解React Fiber吗？6.requestIdleCallback了解多少？7.setState 同步还是异步？（比较常问）8.React-router路由模式？前言网上的React面试题文章有非常多，但很多题都过时了。有的文章只包含了react相关题目，但是真正面试不只考react问题，js，css，http，es6都会涉及的到。此片文章，针对以上几点，

2021-04-04 17:13:22 6548 1

原创 react高频面试题（JavaScript篇）

react高频面试题前言正文JavaScript篇1.var/let/const区别？什么是块状作用域？const a ={}; a.x=1能不能修改？2.call、apply、bind区别？实现bind。3.闭包概念，最主要的还是问闭包的场景？前言网上的React面试题文章有非常多，但很多题都过时了。有的文章只包含了react相关题目，但是真正面试不只考react问题，js，css，http，es6都会涉及的到。此片文章，针对以上几点，整理了一些时下高频的react前端面试题，并且做出相应的解析。

2021-04-04 17:02:08 1157 2

原创 moment格式转string

Ant Design moment对象转字符串方法：moment.format(); console.log(moment(this.state.value).format('YYYY-MM-DD hh:mm:ss'),666556)

2021-03-02 14:32:35 6314 2

原创 css设置元素的隐藏与显示

react中实现列表动态显隐解决思路代码效果图：解决思路通过transform的scale缩放元素从0-1，配合transiton实现动画效果。transition: transform 0.5s;//设置过渡属性以及过渡时间transform:scale(1);//设置缩放比例transform-origin: top right; // 设置缩放顶点代码 let { eventShow} = this.state;<div className={eventShow?st

2021-02-19 13:42:42 344

原创 react简单使用websocket

简单使用：import React from 'react';import Socket from '@/components/WebSocket/Socket';class MessageList extends React.Component { constructor(props) { super(props); this.state = {}; this.socket = null; } //渲染前调用

2020-11-16 11:04:05 2057 1

原创 react鼠标移入移出样式修改

解决react鼠标移入移出样式修改的问题。效果截图：代码实现：js代码：<div className={styles.listStyle}> <Menu onClick={this.listClick} style={{ width: '100%', height: '100%' }}

2020-11-09 16:15:41 5987

原创 React 漂亮的table模板

表格页效果：代码实现：js代码：import React from 'react';import styles from './styles.less';import { connect } from 'dva';import { Input, Button, Modal, DatePicker, Table, Divider, Popconfirm, message } from 'antd';import { DownOutlined } from '@ant-design/icons'

2020-10-28 10:13:16 1496 2

原创 react消息显示器

效果代码实现完整代码：import React from 'react';import styles from './styles.less';import badgeImg from '@/assets/leftmenu/badgeImg.png';import router from 'umi/router';import { connect } from 'dva';import { Popover, Badge, Button, Modal } from 'antd';fun

2020-10-28 09:59:48 246

原创 vue与react的区别

vue与react的区别1.开发时2.编译时3.运行时4.渲染1.开发时1.写法：react（jsx）：calss App extends Component{ makeJSX(){ return <div></div>; } render(){ return <div></div>; }}vue:<template> <div class="App"> </div></tem

2020-10-14 11:03:02 248

原创 vue省市县三级联动

效果图:一、template代码<a-row :gutter="18" type="flex" justify="center"> <a-col :span="20" :style="{ textAlign: 'center' }"> <a-divider orientation="left">位置信息</a-divider> </a-col></a-row>&

2020-09-14 16:02:19 768

原创 mapbox点击图片弹出对话框

一、前言在上篇文章中介绍了如何在mapbox上添加图片层。(感兴趣的同学可以点击前面的链接查看原文)主要任务：我们在上篇文章的基础上，实现点击图片弹出对话框功能。效果图:二、弹出窗口apipopup一个弹出组件。三、对话框功能完整HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con

2020-09-10 17:49:49 2832 2

原创 Mapbox添加图片层

一、前言上篇文章简单的介绍并使用了mapbox地图组件。这次我们在地图上添加图片。效果图：二、添加图片api官方文档将图像添加到样式。完整HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2020-09-10 17:22:22 3921 7

原创 Mapbox地图使用

一、简介：Mapbox 是一个可以创建各种自定义地图的网站。Mapbox地图使用130多个经过验证的来源，以在全球范围内提供全面，精确的地图。使用最新的OpenGL技术，这将产生高性能的地图，用户可以根据自定义数据动态设置样式并优化地图。二、直接使用：1.引入js与css依赖文件：<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script><link href='

2020-09-10 16:48:59 2010

原创 vue接口封装

提示：在之前的文档中，我们已经解决了跨域问题。Vue解决跨域问题.文章目录一、为什么要封装接口？二、封装步骤1.创建request.js2.配置api文件3.vue文件中引用请求接口总结一、为什么要封装接口？因为从开发到最终上线的过程中，API是需要经常更换的，为了我们更好的统一管理，所以需要将API封装起来。二、封装步骤1.创建request.js在主目录下创建utils文件夹，并在其中新建request.js文件用于封装请求。代码如下（示例）：import axios from 'a

2020-09-04 09:08:03 2300 1

原创 proxyTable解决跨域

proxyTable是vue-cli提供的解决vue开发环境下跨域问题的方法。其所处位置在根目录下config文件夹下的index.js文件中。它是http代理中间件，基本原理是用服务端代理解决浏览器跨域：只需要将接口地址写在该位置即可。调用的时候直接在请求方法名前加上/api即可效果。使用这种请求方式能成功的解决跨域问题。...

2020-08-31 08:33:26 548 1

原创嵌套在iframe页面打印去掉页眉页尾

通过iframe打印局部页面时，去掉页眉页尾：//确认打印 printOk() { const el = document.getElementById('printDiv'); const iframe = document.createElement('IFRAME'); let doc = null; iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;to

2020-08-21 17:25:45 922

原创在react中实现局部页面打印功能

最近遇到了打印页面的问题。使用window.print()打印，取消打印页面，页面会出现bug，需要用window.reload()重新加载一下页面，用户体验很差。1.为了解决该问题，可以使用iframe的方式解决：（但是设置打印区域样式是个问题，只能写行内样式）代码：//确认打印 printOk() { //获取打印区域 const printDiv= document.getElementById('printDiv'); const iframe = document.

2020-08-21 17:19:34 2243 2

原创 vue+AntDesign导航菜单问题汇总

最近在使用antDesign的menu导航菜单时，遇到了一些小问题，这篇文章来总结一下。一、左侧菜单缩起时显示异常问题描述：左侧图标换成了本地的图片后，antDesign 的组件库找不到icon，不能给它设置样式，所以我们只要给我们自定义的图标赋值上antDesign菜单中icon的class即可。问题效果图：解决：在antdesign官网中找到的menu菜单组件，使用F12开发人员调试器，选中图标查看代码：发现该图标的class为anticon，于是给自定义图标设置class为anticon

2020-08-21 14:58:02 7279

原创 deck.gl实现多边形图层绘制

最近在项目中需要用到地图，并且需要在上面绘制图层，这篇文章来记录如何利用deck.gl实现图层的绘制功能。代码参考deck.gl官网api写的主要代码：在创建多边形图层前，需要先将多边形图层的数据转换成geoJson格式的数据//geoJson格式的多边形import DeckGL from '@deck.gl/react';import {PolygonLayer} from '@deck.gl/layers';function App() { let listData= [

2020-08-18 17:10:21 1494

原创 React实现打印功能，实现打印ECharts图表功能。

写在前面：由于echarts图表是动态的数据，直接打印会丢失图表数据，所以打印echarts时会先将echarts图表转换成img图片，再进行打印。*当多次循环调用echarts图表时，请注意要动态的修改绑定div的id，不要让多个echarts图表div的id相同。一、先创建打印页面创建PrintBox文件夹，在其中新建index.js文件以及styles.less文件，BarChart与PieChart是自己写的图表组件。（一会给你们看这俩页面的代码）index.js页面小伙伴们，我这里是已

2020-08-14 17:58:27 865

原创 React项目中使用Echarts图表库

最近在项目中使用到Echarts图表库，今天来分享一下我是如何使用Echarts图表库的。Echarts官网地址: https://echarts.apache.org/zh/index.html.1.通过npm获取 ECharts：npm install echarts --save2.引入Echarts// 引入 ECharts 主模块import echarts from 'echarts';3.创建一个柱状图import React from 'react';import s

2020-08-12 09:35:00 1114

原创 Vue+AntDesign实现登陆页面

先给大家看页面效果：1.使用 npm 或 yarn 安装ant-design-vuenpm install ant-design-vue --saveyarn add ant-design-vue2.在main.js中引用3.页面代码<template> <div class="login-container"> <h2 class="login-title"><img :src="log" alt=""></h2&gt

2020-08-11 15:17:51 9878 6

原创上传本地文件到github仓库

1.在github创建存放代码的仓库2.打开自己项目的目录在地址栏中输入cmd，打开命令提示符3.输入git init在当前目录新建一个Git代码库4.输入git add. 添加当前目录的所有文件到暂存区（由于我刚才就已经添加了所此处没有显示添加信息）5.输入命令 git commit -m “提交信息” 将刚刚添加到暂存区的内容正式提交到本地仓库6.将本地的仓库关联到GitHub此处地址就是gitHub的远程仓库地址通过输入git remote add origin htt

2020-08-07 15:56:40 432

原创 vue路由模块化

在我们开发vue项目的时候，项目刚启动的时候通常会将所有的路由，写在一个路由文件下，但当我们开发的页面数量增多时，路由放在同一个路由文件下，此时路由文件就特别难以维护，路由文件看着也会错综复杂，不利于我们管理。这时路由模块化就显得特别关键。main.js设置mian.js中引用路由routerimport Vue from 'vue'import App from './App'import router from './router'import Antd from 'ant-design-v

2020-08-07 10:17:38 360

原创项目遇到Uncaught (in promise) TypeError: Converting circular structure to JSON

在编写完代码后，测试的时候遇到该问题，错误提示指的是对象存在循环引用，于是开始排查代码，查找代码格式存在问题的地方。最后在这里发现了，代码的问题。正确代码应该如下：修改完再运行，就没有错误提示了。这是典型的敲代码，不注意细节的小问题，希望大家在开发的时候要多检查代码，少出现这样低级的小问题。...

2020-08-07 09:38:09 8090 1

原创实现Select与输入框的数据联动

效果如下：1.假数据实现效果<a-row :gutter="24" type="flex" justify="center"> <a-col :span="10" :style="{ textAlign: 'center' }"> <a-form-item label="跨径类型" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"> &

2020-08-04 14:52:13 1587

原创 vue 省市区选择插件v-distpicker设置初值与选择后触发方法

一、安装npm install v-distpicker --save二、引用（main.js）import Distpicker from 'v-distpicker'Vue.component('v-distpicker', Distpicker)三、使用<a-form-item label="所属辖区" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }"> <v-distpicker :province="

2020-07-31 17:20:00 1979 3

原创 EShop系统部署安装文档

EShop系统部署安装文档1、安装jdk(1) 按照步骤一步一步安装。接受条款->点击下一步按钮直到安装成功。(2) 配置系统环境变量鼠标右键点击我的电脑选择属性，找到高级系统设置打开配置环境变量，新建一个用户变量，变量名为JAVA_HOME，变量值为放置jdk的目录。然后新建一个系统变量，变量名设置为CLASSPATH，在系统变量中找到path在其中加入,%JAVA_HOME%\bin这段话。(3)然后验证jdk安装是否成功。2、复制网站项目(1) 把EShop.ra

2020-07-30 16:23:20 639

原创 React文件预览,React实现在线预览docx，xslx，pdf格式文件

一、前言由于项目需要实现文件的预览功能，通过查询百度找到了一个组件，就是react-file-viewer，其官方API中描述可支持文件格式有以下格式：图片：png，jpeg，gif，bmp，包括360度图片pdf格式CSVxslxdocx视频：mp4，webm音频：mp3但是经过我的测试发现它可以打开docx，xslx格式的文件，pdf格式的文件有时能打开有时打不开的（我刚开始测试的时候pdf格式的文件就一直打不开，但是当项目写完测试的时候发现又能打开pdf格式的文件了）。所以当时开发的

2020-07-30 13:28:08 15466 36

原创 Ant Design Upload 文件上传功能

Ant Design （vue，react）Upload文件上传功能一、Ant Design Vue文件上传功能二、Ant Design React文件上传功能一、Ant Design Vue文件上传功能文件上传选项框 <a-modal title="上传文件" :footer="null"//不显示底部按钮 :visible="visible"//是否显示 :confirmLoading="confirmLoading"//确定按钮 load

2020-07-29 15:29:10 11881

原创 Ant DesignVue表单预设初值以及获取表单数据

Ant DesignVue表单预设初值以及获取表单数据一、方法setFieldsValue与validateFields二、setFieldsValue方法使用三、validateFields方法使用一、方法setFieldsValue与validateFieldsAnt DesignVue官网，查看form的API，方法setFieldsValue 用给来设置输入控件的值。方法validateFields来获取一组输入域的值与校验全部组件。二、setFieldsValue方法使用1.form表单

2020-07-29 11:03:40 5732

原创 AntDesingVue select下拉框中数据量过多，响应慢。

解决AntDesingVue select下拉框中数据量过多，响应慢问题一、问题描述二、解决方案三、代码实现一、问题描述在开发公司项目时，需要将行政区划名称与行政区划代码做联动，当选择行政区名称时自动填充行政区划码效果如下但是由于行政区名称数据过多（3500多条数据），导致点击下拉框时发生卡顿现象（点击下拉框5秒后才会有响应）。并且选择行政区名称时，也会发生卡顿现象。二、解决方案在这里插入代码片去Ant DesignVue官网，查看select的API，发现有下拉列表滚动时的回调方法，所以

2020-07-28 14:10:34 6978 4

cityData.js

xingZhengQu.js

空空如也