- 博客(13)
- 收藏
- 关注
原创 【2022-03-08】Dragable组件 + Wheel组件
Dragable组件原理源码示例 原理 原生实现:监听鼠标的onMouseDown、onMouseMove、onMouseUp事件,对需要进行拖动的元素进行重新定位。 监听鼠标的滚轮事件onWheel,deltaY > 0向下滚动,deltaY < 0向上滚动。 源码 import React, { useRef } from 'react'; import { useReactive, useThrottleFn } from 'ahooks'; const Draggable = ({ c
2022-03-08 20:12:13
296
原创 【2022-02-11】自定义vue组件库脚手架指导
自定义组件库脚手架1、项目初始化创建项目创建项目结构2、配置webpack常规配置引入label配置浏览器兼容性引入样式引入文件引入vue3、md配置方式一:自定义loader(参考elementUI,可优化)方式二:使用vue-markdown-loader方式三:使用resourceQuery的方式4、md美化文档美化代码高亮3、配置样例 1、项目初始化 创建项目 mkdir 项目名 cd 项目名 npm init -y 创建项目结构 文件 作用 public/index.html 文
2022-02-17 10:27:29
1206
1
原创 2021-09-16 页面滚动条美化
页面滚动条美化 细节备注上都有,可自行调整 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width : 8px !important; height : 10px !important; background-color: transparent; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: in
2021-09-16 10:46:21
161
原创 2021-09-08 storage监听
storage监听单页面监听多个同源页面监听 单页面监听 let orignalSetItem = localStorage.setItem; localStorage.setItem = function (key, newValue) { let setItemEvent = new Event('setItemEvent'); setItemEvent.newValue = newValue; window.dispatchEvent(setItemEvent); origna
2021-09-08 10:20:43
201
原创 2021-08-18 全屏组件
全屏组件 import React from 'react'; import { Icon } from 'antd'; /* global ActiveXObject */ function reqFullScreen(e) { let requestMethod = e.requestFullScreen || e.webkitRequestFullScreen // 谷歌 || e.mozRequestFullScreen // 火狐 || e.msRequestFul
2021-08-18 21:30:17
96
原创 2021-08-18 超出隐藏同时添加tips的组件
基于antd的超出隐藏组件 基于antd制作的,可在超出后自动添加Tooltips import React, { useState, useRef, useCallback, memo } from 'react'; import { Tooltip } from 'antd'; // 超出隐藏样式 const ellipsisStyle = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } co
2021-08-18 21:26:39
266
原创 2021-07-27 antd 封装的可编辑表格
封装的可编辑表格封装的可编辑表格 封装的可编辑表格 /* index.jsx */ import './index.less'; import React, { Component } from 'react'; import { Table, Popconfirm, Form } from 'antd'; import { SwitchComponents } from './SwitchComponents'; const EditableContext = React.createContext()
2021-07-27 19:28:13
785
原创 2021-05-31 Vue嵌套组件实现
Vue嵌套组件嵌套组件ChildParent使用示例 嵌套组件 原理: 利用 &children 和 $parent 结合 slot 插槽 实现 Child <template> <div class="hello" @click="childClick" :class="{ active: name === this.$parent.active, }" > child <slot />
2021-05-31 19:11:07
137
原创 【TypeScript】学习总结
实现数组的every方法 Array.prototype.myEvery = function(fn, arr = this) { const self = this; for (let i = 0; i < arr.length; i++) { const it = arr[i]; if (!fn.call(self, it, i)) { return false; } } return true
2021-05-08 18:13:50
141
原创 【练练看】2021-01-26 用js实现数组方法
实现数组方法every方法some方法filter方法forEach方法map方法find方法reduce方法 every方法 对数组中的每一项进行判断,全部符合判断条件时返回true,任意一项不符合返回false Array.prototype.myEvery = function(fn, arr = this) { const self = this; for (let i = 0; i < arr.length; i++) { const it = arr[i]; if (!fn.call(
2021-01-26 10:48:56
209
原创 【练练看】2020-12-02 用call实现bind
练练看 题目: 使用 call 实现 bind 分析: call, bind, apply都是用作绑定第一个参数为执行作用域 call(this, …) 会使方法自动执行 apply(this, []) 绑定执行作用域 bind(this, …) 创建一个新的函数,在bind()被调用时,新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用 第一直觉:咩有第一直觉了… 实现: Function.prototype.myBind = function(context
2020-12-02 21:32:10
171
原创 【练练看】2020-12-01 防抖和节流
练练看 题目: 实现防抖和节流 分析: 防抖(debounce):触发后,等待一定时间后才执行,在等待期间再次触发将重新计算等待延时 节流(throttle):一定时间内,多次触发方法也只会执行一次 第一直觉,使用闭包和延时函数+时间戳实现 防抖: // 常规版 debounce = (fn, delay) => { var timer = null; return () => { if (timer) clearTimeout(timer); // 每次
2020-12-01 21:58:53
108
原创 【练练看】2020-11-30 查找树形列表
练练看 题目: 根据id,查询树状结构的数据,找到对应id的路径。 数据如下: const list1 = [ { id: "ab", children: [ { id: "cd", children: [ { id: "ef", children: [], }, ], }, { id: "fg",
2020-11-30 22:28:52
260
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人