- 博客(36)
- 收藏
- 关注
RSS订阅原创 React父组件怎么调用子组件的方法
父组件调子组件函数有两种情况子组件无HOC嵌套：推荐使用ref直接调用有HOC嵌套：推荐使用自定义props的方式。
2023-11-15 20:54:46
2112
转载 前端大屏项目思路-如何缩放
想必近几年前端的数据可视化越来越重要了，很多甲方爸爸都喜欢那种炫酷的大屏幕设计，类似如下这种：遇到的这样的项目，二话不说，echarts或者antv，再搭配各种mvvm框架（react，vue），找二次封装过的组件，然后开始埋头开始写了，写着写着你会发现，如何适配不同屏幕呢？css媒体查询吧，用vw吧，哪个好点呢。其实写到最后，我觉得都不好对于这种拿不定主意的情况呢，最好还是参考大厂的做法，于是去找了网易有数，百度suger等，他们是如何写这样的页面的提供2个他们的案例链接：百度.
2021-07-27 17:09:22
3114
1
原创 在npm安装依赖失败时，特别是echart容易失败，切换为淘宝镜像
Node注意 Node 的版本应大于等于 12，而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本，注意 1.8 版本官方也直接称 8 版本）。安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具）。# 使用nrm工具切换淘宝源npx nrm use taobao# 如果之后需要切换回官方源可使用npx nrm use npmYarnYarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。np
2021-07-01 10:31:40
1089
原创 package.json中^,~的详细说明
package.json中^,~的详细说明在package.json这个文件中，我们经常可以看见这样的信息但是我们很少注意的是版本前面的 ^ 到底是什么意思今天我们就来讲一下(端好小板凳) "dependencies": { "axios": "0.21.0", "core-js": "~3.6.5", "echarts": "^4.9.0", "antd": "^3.1.4" "quill-image-drop-module": "^1.0.3",
2021-07-01 10:26:33
1194
原创 小程序中使用vant
1打开终端，初始化项目，生成pack.json文件2、通过 npm 安装 npm i @vant/weapp -S --production3、微信开发者工具点击右上角详情--本地设置--勾选使用npm模块4、构建npm5、修改 project.config.json官方解释：官方修改npm包位置{ ... "setting": { ... "packNpmManually": true, "packNpmRel
2021-06-23 17:00:40
305
原创 解决react-native中页面不刷新，再次进入页面，不走componentdidmount的问题
方法一：使用navigation的didFocus函数 componentDidMount() { const { navigation } = this.props; this.focusListener = navigation.addListener('didFocus', () => { this.pageInit(); //处理自己进入路由的逻辑 }); }方法二：使用react-native的DeviceEventEmit.
2021-05-06 18:01:03
3266
原创 react-native-video中加载中loading的使用
一、简介react-native-video是一个可以播放视频的组件，它的用法简单，功能完备，是React native项目中很好用的一个Video播放的组件。本文较多的功能并没有使用，只是简单地让视频在APP中展示，因为是点小图标然后再弹框中播放视频，所以需要加loading主要用到以下支持定制样式，比如设置宽高 主要在onLoadStart，onReadyForDisplay 这两个视频加载周期中展示loading，给用户反馈在视频加载初始，给一个loading提示 二、使用.
2021-03-03 14:28:40
1751
原创 js同源视频下载
fetch('https://internalgw-test.mottuum.com/group1/M00/00/50/rBLlJWAOlXyAEp6hABkAAApXoVw632.mp4?token=3423911b3b4f5c519a9cade07a32554f&ts=1611643549').then(res => res.blob()).then(blob => { const a = document.createElement('a'); document.body..
2021-01-26 14:48:59
185
原创 js匹配文件类型
/* * 根据文件名的尾缀 返回文件类型 * @param {any} fileName 文件名 * dzl * 2020年5月9日 */function getFileType(fileName) { // 后缀获取 let suffix = ""; // 获取类型结果 let result = ""; try { const flieArr = fileName.split("."); suffix = flieArr[flieArr.length - .
2021-01-26 13:52:12
512
原创 a，fetch 标签下载excel文件
handleExport = () => { const { dispatch, form } = this.props; const { paginationProps } = this.state; let forPage = { curPage: 1, pageSize: 999999, }; let options = {}; form.validateFields((err, fieldsValue) => ...
2021-01-13 18:12:50
384
原创 右键添加cmd命令快捷键，右键cmd快捷键丢失
第一步：用记事本编辑一个下面内容的文件，文件名就叫“右键添加cmd.txt”Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\folder\shell\cmd] @="cmd Here""Icon"="cmd.exe" [HKEY_CLASSES_ROOT\folder\shell\cmd\command] @="cmd.exe /k cd %1""Icon"="cmd.exe"第二步：把文件名的后缀改成 .re
2020-05-14 16:29:30
267
原创 pc签名插件 react-signature-canvas 的使用
import React, { Component } from 'react'import ReactDOM from 'react-dom'import SignaturePad from 'react-signature-canvas'import styles from './styles.module.css'class App extends Component { ...
2020-05-07 10:25:31
1488
原创 vue快速项目模板
快速生成项目首选https://panjiachen.github.io/vue-element-admin-site/#/带有后端逻辑的https://github.com/lin-xin/vue-manage-system
2020-04-27 23:12:57
425
原创 react中盒子内平滑滚动，监测盒子滚动条状态
Html <div className="content-layer"> <div className="module0 module-base"> <CarRegister pageQuery={pageQuery} jumpModule={this.handleStep} /&...
2020-03-25 19:55:30
802
原创 react-native init时报错
An unexpected error occurred: "https://registry.npmjs.org/react-native: self signed certificate in certificate chain". React-native安装时报错，说没有自签证证书解决方法：您正在尝试将SSL与未加密的端点进行通信。通常，这是由于代理配置错误（另请...
2020-01-20 17:30:52
500
原创 简单vue导航切换
<!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-Co...
2019-12-13 16:48:43
166
原创 数组去重的方法比较
JavaScript 高性能数组去重中午和同事吃饭，席间讨论到数组去重这一问题我立刻就分享了我常用的一个去重方法，随即被老大指出这个方法效率不高回家后我自己测试了一下，发现那个方法确实很慢于是就有了这一次的高性能数组去重研究一、测试模版数组去重是一个老生常谈的问题，网上流传着有各种各样的解法为了测试这些解法的性能，我写了一个测试模版，用来计算数组去重的耗时...
2019-12-11 11:21:50
111
原创 利用sort() 和 localeCompare()函数来排序
目的是为了实现英文的首字母进行排序。函数代码：var arr1 = [{ name: 'DaLin' }, { name: 'HaLin' }, { name: 'VaLin' }, { name: 'SaLin' }, { name: 'WaL...
2019-10-24 10:46:26
632
转载 不用循环，es6创建一个长度为100的数组
问题描述：在不使用循环的条件下，如何创建一个长度为100的数组，并且数组的每一个元素是该元素的下标？结果为：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, ...
2019-07-28 01:59:25
3738
原创 实现锚点-scroll平滑滚动
a链接锚点定位太生硬？试试自己让滚动条平滑滚动把 scroll2 =(target)=>{ console.log('alb') console.log('滚动拉') target = target?target:'aaa'; //className const scrollPart = document.querySelector('.' + targ...
2019-07-22 21:13:02
1265
转载 利用sort 对json数据对象内的属性排序
举例，对数据中的id排序，经常会忽略sort()函数内的参数，重点是理解传给sort的函数 var result=[ {id:1,name:'中国银行'}, {id:3,name:'北京银行'}, {id:2,name:'河北银行'}, {id:10,name:'保定银行'}, {id:7,name:'涞水银行'} ]...
2019-06-24 10:30:46
1065
转载 vue全局使用axios 的方法（设置代理跨域）
在vue项目开发中，我们使用axios进行ajax请求，很多人一开始使用axios的方式，会当成vue-resoure的使用方式来用，即在主入口文件引入import VueResource from 'vue-resource'之后，直接使用Vue.use(VueResource)之后即可将该插件全局引用了，所以axios这样使用的时候就报错了，很懵逼。仔细看看文档，就知道axios 是一个基...
2019-06-20 12:37:26
7910
转载 eslint初体验--通过一步步配置来看变化
本文是转载：原链接https://www.cnblogs.com/y896926473/articles/6959627.htmlJavaScript是一门神奇的动态语言，它在带给我们编程的灵活性的同时也悄悄埋下了一些地雷。除了基本的语法错误能在程序一启动的时候被检测到之外，很多隐含的错误都是在运行的时候才突然地蹦出来。除非你的程序有着100%的测试覆盖率，否则说不定哪天就会因为一个xxx i...
2019-06-19 12:06:13
1967
转载 在代码提交之前使用esLint校验代码
引言这个需求主要是组内成员用的编辑器不统一，代码风格也各异，所以在修改代码时，如果格式化了代码，在code review阶段很难分辨修改了的代码。当然，代码风格统一还有其他好处，这里就不不多废话了。先看效果源文件可以看到有很多红线，这个是因为不符合prettier的规则，这种情况下会使用eslint进行报错，就是你看到的红线了。具体如何配置之后再讲。下面来看看提交时的...
2019-06-19 12:01:53
5792
原创 react-router 2.4.0 js 路由跳转问题
使用的react-router 2.4.0import { Link , History} from 'react-router';//分页点击跳转onChange (index) { this.setState({ index }); let Id = this.state.Id; this.props.history.pushState(null,'li...
2019-06-11 20:45:03
588
原创 flex 布局平均分布又能换行，子元素之间还要有空隙
用flex-wrap: wrap;来换行，用justify-content:space-between;来平分，在父元素末尾加上after伪元素，让其自动添补最后一个位置，高度设为0 便不影响后面的元素举例我们需要3个元素为一行，并且平分布局当元素不满足3个的的时候刚好有九元素的时候...
2019-05-27 11:08:26
17749
1
原创 input的type=file上传文件时限制各种文件格式accept属性值整理
<form> <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg, application/vnd.ms-excel" /></form>可选项.xml text/xml， application/xml Extensible Marku...
2019-05-14 16:24:35
4180
1
原创 解决神烦的扩展宿主意外终止（简单粗暴）
最近vscode总是报扩展宿主意外终止的问题，导致各种扩展插件都失效，无数次的重启，然后用了不到两分钟又意外终止，一直没有抽出时间来搞它（其实是搞过一次，艰难的一层层文件去找，删除git配置文件，结果删了也没效果，卸载重装也没用），近期实在是刚写两行代码就 爆出这个提示，那心情实在难受），认真想了想出现这个问题之前的操作，应该是我更新之后，又装了一些插件，但是卸载重装无用，所以结论应该是插件之间冲...
2019-05-08 11:11:03
9466
原创 Eslint中 报错 Dependency cycle detected import/no-cycle 错误解决
引起上述错误的主要原因是 两个util文件中 依赖循环了，A依赖的B中的内容，B中也依赖的A中的内容，不要循环依赖，把其中一个依赖项摘出来，就解决问题了...
2019-04-19 10:42:43
24185
1
原创 OS系统下 使用MAMP站点配置详解
对MAMP熟悉操作流程的请看：1、找到 /Applications/MAMP/conf/apache/httpd.conf 搜索httpd-vhosts.conf 找到：#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf将#去掉，使虚拟地址的配置文件生效。2、找到/Applications/MAMP...
2019-04-14 12:47:28
4943
3
转载 解决redux刷新数据丢失，
为什么要存储react-redux中的数据？当页面刷新之后，redux中的数据会回到初始值，之前存储到redux中的数据也就不复存在了。废话不多说，直接上代码：在reducer文件中：let shopDetailInfo = sessionStorage.getItem('shopDetailInfo')?JSON.parse(sessionStorage.getItem('shopD...
2019-02-20 17:19:35
7470
1
转载 SourceTree跳过注册安装使用(window . && . mac)
下载链接 https://www.sourcetreeapp.com/window这个时候会要求注册账号,这个时候关掉就可以了我们进入%LocalAppData%\Atlassian\SourceTree\目录创建一个accounts.json文件,写入以下内容[ { "$id": "1", "$type": "SourceTree.Api.Host....
2019-02-19 14:23:27
761
原创 js 跨域下载图片解决方法
同源可以直接使用a标签，跨域时神烦，测试成功的代码如下，可直接复制测试 function ddd(){ console.log(22222) // 创建隐藏的可下载链接 // let blob = 'http://pic.c-ctrip.com/VacationH5Pic/mice/wechat/ewm01.png'; ...
2018-11-28 13:59:05
19065
7
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人