- 博客(108)
- 资源 (4)
- 收藏
- 关注
原创 原生js快速查找指定元素
虽然已经很少有原生js写项目,不过有些组件任然使用js,原生js有一个非常麻烦的问题就是查找元素,写class怕准确度底,id总不不能写一大堆,又不想引用jquery。只需要通过父元素缩小范围,在元素队列中通过自定义属性锁定想要查找的元素,不需要定义一堆id,定义class有时候就觉得烦,更别说一堆id了。:id,class,tag支持父元素指向下级的子元素。:通过自定义属性筛选。
2023-04-19 14:51:06 1041 1
原创 原生js颜色选择器取色器组件
如果不是为了组件支持的范围考虑,我肯定不会用原生js写,头疼,也不能使用ts。组件参考腾讯云文档的颜色选择器样子写,当然不是完全一样,取色的工具那个是在canvas上完成的,比较特殊,未加入该功能
2023-04-11 17:29:32 946
原创 canvas图片裁剪
通过canvas来对图片进行裁剪,这次做的用于裁剪头像类型,本来是按react的语法糖写的,但是突然想用class的方式写组件应该比较有意思。
2023-03-24 11:03:18 282
原创 自定义滚动条+无限加载
通过外套div溢出隐藏原滚动条,在使用div+css实现想要的滚动条效果,配合js模拟滚动,滚动条就可以玩出花了,之前用了一个三方插件,有bug,懒得看他源码自己写一个比较方便
2023-03-09 14:39:19 299
原创 js/react取色器/颜色选择器
【代码】取色器/颜色选择器。react+ts+less,手搓的一个react组件,代码简单易懂,方便读写
2023-01-30 16:39:24 1125 1
原创 手搓富文本编辑器组件
左边是我写的其他东西,右边是效果图,图标是项目里面的,你们直接用组件的话可以自己整一套图标,也可以不要,不显示图标而已,图片/视频当然最好是自己去改成自己服务器地址,直接填充url,不然直接是base编码很大,存到数据库不好。这里是用react语法写的,如果你是用于vue的,自己改一下就行了,反正是手搓的,一劳永逸。组件的资源包已上传,审核后会补上地址。index.tsx主文件代码展示。
2023-01-04 17:39:12 401
原创 树形组件Tree附带选择check选择框
Tree组件,携带check多选框,闲着的时候就写了一个放在这里,三方组件库的东西总是跟UI会冲突,改起来不方便,数据交互的逻辑也算是轻便易懂,基本上项目需要用的组件都自己写一个,后面即使有其他项目用起来非常方便
2022-09-30 14:24:52 1057 2
原创 敲了这么久js/ts代码居然不知道这个函数eval
eval能够将字符串生成语句执行,和SQL的exec()相似,将字符解析转化城js语句执行,这就离谱了,安全威胁程度极高eval的使用场合:预先不知道要执行什么语句,只有当条件和参数给时才知道执行什么语句,这时候eval就派上用场了。eval=window.eval;活到老学到老...
2022-05-12 15:55:55 456
原创 react中实现系统公告-左右循环滚动(首尾衔接)
组件名称:系统公告描述:悬浮的公告栏,作用于一条消息,长度不定,公告栏宽度自适应屏幕代码场景:react,hooks,tsx,less功能介绍:1.内容根据宽度自适应,无法显示完整将自动滚动,如果满足显示则居中不动2.左右滚动,首尾衔接模式滚动,(尾部只有可视化区域一半,首部将衔接从右边显示)注:初品,未做过多的封装功能与扩展功能,个人喜好一般自己有能力写出来的组件尽量不用插件,长远角度对维护项目/自己都有好处,有好的优化或者不明白的在下方评论留言index.tsx/* * @Autho.
2022-02-08 15:27:54 2932 6
原创 react中url变化监听以及清理/修改url的参数
这里记录一下写react项目遇到的url问题:我在页面有一行代码处理:window.history.replaceState({ path: ‘/#/home’ }, ‘’, ‘/#/home’);因为hash模式中,这是不会刷新页面的,清理url参数,然后处理参数触发事件在地址栏中复制粘贴两次一模一样的地址,后面一次不会触发react项目监听,就无法正常运转,window.addEventListener(‘hashchange’, this.checkUrlFn.bind(this));通过
2022-02-07 09:48:52 3437
原创 react 重定向继承url参数
这里踩到一个隐性问题,先描述问题:问题:/home,跳转到/details,然后home有代码设定home?id=123456,会获取id,执行请求并跳转到/details,(你们不需提出流程问题,项目相关业务与场景不便解释说明),问题来了,我在home的index.tsx下面有是处理以前的地址正确跳转项目新地址,导致在其他页面输入home?id=123456,触发了重定向,就id丢失了,导致我在home怎么都拿不到id,因为地址输入正常,完全没想到会触发重定向处理:在重定向继承url参数即可<
2022-01-18 11:21:16 1003
原创 react日期组件DatePicker自定义
组件介绍:1.支持按键上下左右配合enter选择号数(天),年份/月份/小时/分钟暂未开放2.左右按钮切换年份/月份,选中的day会随着更改3.可开启限制功能,当前版本是限制分钟为底限最新时间,开启后不能选之前的时间4.支持选秒,但未开放,5.小时/分钟/秒-可显示配置暂无6.safari适配暂无已上传文件
2022-01-04 17:27:46 2216
原创 react-custom-scrollbars滚动组件
react-custom-scrollbars,是一款滚动区域组件,为了美化兼容各大浏览器,很遗憾,这个组件有个隐藏的兼容问题,并且我现在无法处理,出现异常:没有满足滚动条件,出现底部,侧边滚动条,导致无法滚动的假滚动条,这是属于底层js/ts代码控制的,没办法在客户端处理,异常场景:edg浏览器(部分电脑上必定出现,),很奇怪,我的电脑上edg同版本就没有,建议还是别用了,我正打算自己写一个组件出来...
2021-12-14 17:48:01 2271
原创 配置阿里云矢量图标2021
由于阿里云矢量图标库升级,默认不生成配置,下载后直接引入将无法正常使用,第一方案,直接修改配置,前提是你有权限第二方案:1.先下载到本地2.https://transfonter.org/打开这个地址去生成配置文件3.如图所示勾选上,蓝色按钮打开选择文件iconfont.ttf,4.最后点击生成(Convert),下载即可,5.下载下来的文件只需要.eot .svg .ttf三个文件复制到你前面在阿里下载的文件夹中使用就跟以前一样,不需要改动...
2021-08-30 18:09:15 524
原创 css元素变形,定位错乱
2.在设置一个元素几像素的时候,做出不同的元素定位,或者平移元素的时候,可能导致元素像素错位,原本的正方形可能变成长方形,定位也显得奇怪产生错位,可设置该元素为高宽1px,通过tranform:scale(7);加上rotate旋转1度,圆形就会恢复,而且圆形旋转1度无影响。但是有特殊样式的就会看到轻微的变形,比如圆形样式,平移后会变偏椭圆,1.在使用css平移时会导致元素变形,一般的元素看不出变化,
2021-07-09 23:30:25 488
原创 真机h5开启调试模式/开发者调试vconsole
开发手机端网页,存在真机与模拟器的差异,例如ios中微信浏览器,比较特殊,上次开发遇到只有在ios微信内置浏览器打开是白屏,这模拟器打开是正常的,这时候如果没有调试工具,根本不清楚报错信息,vconsole这项工具,提供页面一个vconsole的绿色按钮,可以打开控制面板,进行查看在index.html中最优先的位置引入,防止其他js先引入报错<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script
2021-07-05 13:50:06 3292
原创 React 项目开发优化项
React 项目开发优化项,部分标题提供代码链接跳转虽然使用react开发的经验不是非常多,但还是记录一下自己开发时觉得可行的优化项
2021-06-08 10:47:39 107
原创 react 路由配置
这是一套react路由配置使用的方案展示,若有不详细明确的地方/或者缺陷可以留言提醒,此方案有路由权限,组件内部权限,菜单导航权限,懒加载,拦截等多种配置化灵活使用
2021-06-08 10:46:09 4345 1
原创 登录注册同一页面使用浏览器回退功能
现在的登录页一般会有多个状态,页面会有按钮提供给用户切换,但是产品要求使用浏览器回退时也要让界面回退,对于浏览器来说,页面没有历史,所以不会改变,所以我们要手动添加来达到效果let historyArr = []; // 本地记录historyconst ERROR_MESSAGE_TEXT = "网络不给力,请稍候重试!";class LoginDj extends React.Component {//验证码登录/扫描登录/注册切换时 shiftLoginType(type) { this
2021-06-07 16:53:41 242
原创 自定义消息提示message
这个组件,antd是有的,因为项目要求的两个原因自定义1:antd的message即使你设定消失时间1秒,鼠标悬浮在消息上,消息就不会消失2:ts模式下,antd组件库的message组件的type(填任意一项就会有图标)为必填项,本项目不需要图标Message.ts/* * @Name:自定义消息提示-会议中黑色版 * @Author: 刘强 * @Date: 2021-05-26 15:06:32 * @LastEditors: 刘强 * @LastEditTime: 2021-05.
2021-05-31 17:04:39 2791
原创 文字溢出解决宽度不定的场景
文字溢出显示规则,一般溢出通过css就完成了,但是宽度如果不确定那么将无法使用,普通的就使用js过滤,显示几个字符,但是中文与符号,英文占位不同,这样处理出来的效果显然不理想
2021-05-25 17:17:55 207
原创 vue优化开发速度项目配置
1.表单自定义配置优势:复用性,代码少,易维护,直观性强2.表格二次封装优势:复用性,代码少,可维护,统一性3.弹框二次封装优势:复用性,统一性,代码微减4.样式配置通过全局less文件配置公用的变量,统一性,可维护性大大提升{ test: /\.less$/, use: [ config.isProduct ? MiniCssExtractPlugin.loader : "vue-style-loader",
2021-04-20 11:30:12 102
原创 mock前端测试开发
使用mock搭建服务,本地测试开发,脱离后端开发,根据后端的接口文档(接口虽然没写完,但提供了接口文档),配置接口参数,后续直接改为接口联调就行了,这样可以避免前面等接口,后面忙着调1.安装配置文件npm i mocker-api mockjs --dev2.搭建服务server.jsvar path = require('path')var fs = require('fs')var mock = require('mockjs')var app = require('express')
2021-04-20 11:04:51 273
原创 braft_editor富文本
富文本编辑器也用过不少了,这次提供一个功能算是齐全,好用的braft_editor我使用的react接入,大同小异,这里采用多媒体文件上传到七牛云,回调链接至标签的src上效果图我就懒得搞了,截取的别人的,代码是我自己写的import React from "react";import BraftEditor from "braft-editor";// 引入编辑器样式import "braft-editor/dist/index.css";import api from "../../ap
2021-04-19 15:38:12 1911
原创 vue自定义表单生成
表单生成文字发得算比较晚吧,因为最近又开始使用vue开发项目,管理系统用表单表格相当多,还是简单写了一个使用vue+element-ui,提高开发速度,增加可维护性,减少页面代码量,使用json串的方式管理表单更方便,react的也写过,思路差不多,有不清晰的地方还请指出,完整版代码没必要放太多了index.vue归纳需要的表单组件接收一个数组,返回一个form对象(表单值)<!-- * @name:自定义表单生成 * @Author: 刘强 * @Date: 2021-04-13 14
2021-04-14 13:41:25 896
原创 算法逻辑题整理-中级(1)
中级算法中,多循环解题思路多数优化会应用到指针算法,经典就是双指针(vue的diff也采用了双指针对比),注意中级算法题不提倡双for无优化处理-经不住测试用例方案给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合。答案可以按 任意顺序 返回。给出数字到字母的映射如下(与电话按键相同)。注意 1 不对应任何字母
2021-04-12 10:08:40 323
原创 算法逻辑题整理-初级(1)
算法题不分语言,只是实现方式不同,逻辑思维大同小异,因为我是前端主js,所以解法都是js语言根据解析使用双指针的方式来对比[1,8,6,2,5,4,8,3,7]左右各取出元素计算面积,然后再对比两个元素哪个小,左边1小那么左指针向中间移动一位,右指针不动,依次循环计算并移动指针
2021-03-20 17:43:16 374 1
原创 前端常备知识点(二)
1.js事件的绑定原生js绑定事件三种情况,原生使用中推荐第三种类型一 是直接在dom上绑定,如果加上(),第一次将会直接执行,不友好<div οnclick="fun()"></div>二 是通过通过js获取元素,赋值事件var oBox = document.getElementById("container");oBox.onclick = function() {}三 通过addEventListener绑定事件,参数一是事件类型,参数2是函数,参数3捕获/
2021-03-06 21:06:06 390
原创 前端常见布局问题
如何使用flex布局,解决间距,最后一行左对齐,怎样设置0.5px边框,有其他布局/样式问题欢迎提供一起解决/或者分享你的解决方案/分享你的问题-谢谢
2021-02-26 11:29:21 186
原创 mobx数据更新,组件未刷新问题(含处理方案)
在这里我不得不吐槽一下我遇到的这个问题我上一个测试项目使用mobx完全没问题,结果我正式项目一上mobx,出毛病了,代码流程都是一样,但他操作成功,数据更新,就是不刷新组件我真是服气了,网上找了好久都没找到有用的文章,我真的自闭了,但是mobx也不能放弃,我硬着头皮看啊,搜索文章,看api,完全摸不着头脑,最后我想到一个点,我去看了一下mobx版本,发现问题这是不能正常使用的情况,版本6.0了我第一次使用这玩意儿哪知道啊,"mobx": "^6.0.1","mobx-react
2020-10-17 17:17:17 7167 9
原创 h5中打开app与app中打开的H5
这里主要是解决h5开发配合app时遇到的问题,如何判断在app中打开了我们的项目在vue开发中npm install ua-device -D装好后在App.vue中import UA from "ua-device";isApp(){ let str="Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en) AppleWebKit/534.46.0 (KHTML, like Gecko) CriOS/19.0.
2020-09-28 13:58:17 1522
原创 react +mobx刷新页面数据恢复默认值问题
说实话之前我去百度一堆,就只看到一种方式,实在不好用,并且可用的博文又少,都是粘贴复制的文章,我都懒得看了,我就自己写了一套方案出来,觉得还不错在这里分享一下首先主要是者两个文件home.js是我们要用的store,server.js是附加的保存数据的关键文件home.jsimport { observable,action} from "mobx"import { getVal,setVal} from "./server"//新增的配置class HomeStore { @obs
2020-09-27 15:20:02 2003 1
原创 flutter打包安卓问题
**1.SDK location onment variable..not found. Define lcaton Mit sak.drn in the local popertes file or width an ANDROID HONE envir**因为没在环境变量中配置安卓sdk解决:打开环境变量,在用户变量中新建如下ANDROID _HOME :C:\Users\EDZ\AppData\Local\Android\Sdk(请输入你自己的安卓sdk位置)
2020-08-29 15:19:20 433
树形组件Tree附带选择check选择框
2023-03-30
富文本编辑器手搓一个,react
2023-01-04
地址离线数据JSON(js,前端)area.js
2020-04-13
unity脚本生成预制体的对象,box Collider2D触发器失效
2022-08-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人