发际线高过海岸线-优快云博客

原创【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