- 博客(108)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 原生js快速查找指定元素
虽然已经很少有原生js写项目，不过有些组件任然使用js，原生js有一个非常麻烦的问题就是查找元素，写class怕准确度底，id总不不能写一大堆，又不想引用jquery。只需要通过父元素缩小范围，在元素队列中通过自定义属性锁定想要查找的元素,不需要定义一堆id，定义class有时候就觉得烦，更别说一堆id了。：id，class，tag支持父元素指向下级的子元素。：通过自定义属性筛选。
2023-04-19 14:51:06
950
1
原创 原生js颜色选择器取色器组件
如果不是为了组件支持的范围考虑，我肯定不会用原生js写，头疼，也不能使用ts。组件参考腾讯云文档的颜色选择器样子写，当然不是完全一样，取色的工具那个是在canvas上完成的，比较特殊，未加入该功能
2023-04-11 17:29:32
825
原创 canvas图片裁剪
通过canvas来对图片进行裁剪，这次做的用于裁剪头像类型，本来是按react的语法糖写的，但是突然想用class的方式写组件应该比较有意思。
2023-03-24 11:03:18
240
原创 自定义滚动条+无限加载
通过外套div溢出隐藏原滚动条，在使用div+css实现想要的滚动条效果，配合js模拟滚动，滚动条就可以玩出花了，之前用了一个三方插件，有bug，懒得看他源码自己写一个比较方便
2023-03-09 14:39:19
263
原创 手搓富文本编辑器组件
左边是我写的其他东西，右边是效果图，图标是项目里面的，你们直接用组件的话可以自己整一套图标，也可以不要，不显示图标而已，图片/视频当然最好是自己去改成自己服务器地址，直接填充url，不然直接是base编码很大，存到数据库不好。这里是用react语法写的，如果你是用于vue的，自己改一下就行了，反正是手搓的，一劳永逸。组件的资源包已上传，审核后会补上地址。index.tsx主文件代码展示。
2023-01-04 17:39:12
330
原创 树形组件Tree附带选择check选择框
Tree组件，携带check多选框，闲着的时候就写了一个放在这里，三方组件库的东西总是跟UI会冲突，改起来不方便，数据交互的逻辑也算是轻便易懂，基本上项目需要用的组件都自己写一个，后面即使有其他项目用起来非常方便
2022-09-30 14:24:52
821
2
原创 敲了这么久js/ts代码居然不知道这个函数eval
eval能够将字符串生成语句执行，和SQL的exec()相似，将字符解析转化城js语句执行，这就离谱了，安全威胁程度极高eval的使用场合：预先不知道要执行什么语句，只有当条件和参数给时才知道执行什么语句，这时候eval就派上用场了。eval=window.eval;活到老学到老...
2022-05-12 15:55:55
405
原创 react中实现系统公告-左右循环滚动（首尾衔接）
组件名称：系统公告描述：悬浮的公告栏，作用于一条消息，长度不定，公告栏宽度自适应屏幕代码场景：react,hooks,tsx,less功能介绍:1.内容根据宽度自适应，无法显示完整将自动滚动，如果满足显示则居中不动2.左右滚动，首尾衔接模式滚动，（尾部只有可视化区域一半，首部将衔接从右边显示）注：初品，未做过多的封装功能与扩展功能,个人喜好一般自己有能力写出来的组件尽量不用插件，长远角度对维护项目/自己都有好处，有好的优化或者不明白的在下方评论留言index.tsx/* * @Autho.
2022-02-08 15:27:54
2657
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
3269
原创 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
916
原创 react日期组件DatePicker自定义
组件介绍:1.支持按键上下左右配合enter选择号数（天）,年份/月份/小时/分钟暂未开放2.左右按钮切换年份/月份，选中的day会随着更改3.可开启限制功能，当前版本是限制分钟为底限最新时间，开启后不能选之前的时间4.支持选秒，但未开放，5.小时/分钟/秒-可显示配置暂无6.safari适配暂无已上传文件
2022-01-04 17:27:46
2126
原创 react-custom-scrollbars滚动组件
react-custom-scrollbars，是一款滚动区域组件，为了美化兼容各大浏览器，很遗憾，这个组件有个隐藏的兼容问题，并且我现在无法处理，出现异常：没有满足滚动条件，出现底部，侧边滚动条，导致无法滚动的假滚动条，这是属于底层js/ts代码控制的，没办法在客户端处理，异常场景：edg浏览器（部分电脑上必定出现，），很奇怪，我的电脑上edg同版本就没有，建议还是别用了，我正打算自己写一个组件出来...
2021-12-14 17:48:01
2211
原创 配置阿里云矢量图标2021
由于阿里云矢量图标库升级，默认不生成配置，下载后直接引入将无法正常使用，第一方案，直接修改配置，前提是你有权限第二方案：1.先下载到本地2.https://transfonter.org/打开这个地址去生成配置文件3.如图所示勾选上，蓝色按钮打开选择文件iconfont.ttf,4.最后点击生成（Convert）,下载即可，5.下载下来的文件只需要.eot .svg .ttf三个文件复制到你前面在阿里下载的文件夹中使用就跟以前一样，不需要改动...
2021-08-30 18:09:15
498
原创 css元素变形，定位错乱
2.在设置一个元素几像素的时候，做出不同的元素定位，或者平移元素的时候，可能导致元素像素错位，原本的正方形可能变成长方形，定位也显得奇怪产生错位，可设置该元素为高宽1px，通过tranform:scale(7);加上rotate旋转1度，圆形就会恢复，而且圆形旋转1度无影响。但是有特殊样式的就会看到轻微的变形，比如圆形样式，平移后会变偏椭圆，1.在使用css平移时会导致元素变形，一般的元素看不出变化，
2021-07-09 23:30:25
428
原创 真机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
3221
原创 React 项目开发优化项
React 项目开发优化项，部分标题提供代码链接跳转虽然使用react开发的经验不是非常多，但还是记录一下自己开发时觉得可行的优化项
2021-06-08 10:47:39
97
原创 react 路由配置
这是一套react路由配置使用的方案展示，若有不详细明确的地方/或者缺陷可以留言提醒,此方案有路由权限，组件内部权限，菜单导航权限，懒加载，拦截等多种配置化灵活使用
2021-06-08 10:46:09
4271
1
原创 登录注册同一页面使用浏览器回退功能
现在的登录页一般会有多个状态，页面会有按钮提供给用户切换，但是产品要求使用浏览器回退时也要让界面回退，对于浏览器来说，页面没有历史，所以不会改变，所以我们要手动添加来达到效果let historyArr = []; // 本地记录historyconst ERROR_MESSAGE_TEXT = "网络不给力，请稍候重试！";class LoginDj extends React.Component {//验证码登录/扫描登录/注册切换时 shiftLoginType(type) { this
2021-06-07 16:53:41
221
原创 自定义消息提示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
2636
原创 文字溢出解决宽度不定的场景
文字溢出显示规则,一般溢出通过css就完成了，但是宽度如果不确定那么将无法使用,普通的就使用js过滤，显示几个字符，但是中文与符号，英文占位不同，这样处理出来的效果显然不理想
2021-05-25 17:17:55
192
原创 vue优化开发速度项目配置
1.表单自定义配置优势：复用性，代码少，易维护，直观性强2.表格二次封装优势：复用性，代码少，可维护，统一性3.弹框二次封装优势：复用性，统一性，代码微减4.样式配置通过全局less文件配置公用的变量，统一性,可维护性大大提升{ test: /\.less$/, use: [ config.isProduct ? MiniCssExtractPlugin.loader : "vue-style-loader",
2021-04-20 11:30:12
92
原创 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
220
原创 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
1836
原创 vue自定义表单生成
表单生成文字发得算比较晚吧，因为最近又开始使用vue开发项目，管理系统用表单表格相当多，还是简单写了一个使用vue+element-ui，提高开发速度，增加可维护性,减少页面代码量，使用json串的方式管理表单更方便,react的也写过，思路差不多，有不清晰的地方还请指出,完整版代码没必要放太多了index.vue归纳需要的表单组件接收一个数组，返回一个form对象（表单值）<!-- * @name:自定义表单生成 * @Author: 刘强 * @Date: 2021-04-13 14
2021-04-14 13:41:25
871
原创 算法逻辑题整理-中级（1）
中级算法中，多循环解题思路多数优化会应用到指针算法，经典就是双指针（vue的diff也采用了双指针对比），注意中级算法题不提倡双for无优化处理-经不住测试用例方案给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。答案可以按 任意顺序 返回。给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应任何字母
2021-04-12 10:08:40
288
原创 算法逻辑题整理-初级（1）
算法题不分语言，只是实现方式不同，逻辑思维大同小异，因为我是前端主js，所以解法都是js语言根据解析使用双指针的方式来对比[1,8,6,2,5,4,8,3,7]左右各取出元素计算面积，然后再对比两个元素哪个小，左边1小那么左指针向中间移动一位，右指针不动，依次循环计算并移动指针
2021-03-20 17:43:16
342
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
351
原创 前端常见布局问题
如何使用flex布局，解决间距，最后一行左对齐，怎样设置0.5px边框，有其他布局/样式问题欢迎提供一起解决/或者分享你的解决方案/分享你的问题-谢谢
2021-02-26 11:29:21
170
原创 mobx数据更新，组件未刷新问题（含处理方案）
在这里我不得不吐槽一下我遇到的这个问题我上一个测试项目使用mobx完全没问题，结果我正式项目一上mobx，出毛病了，代码流程都是一样，但他操作成功，数据更新，就是不刷新组件我真是服气了，网上找了好久都没找到有用的文章，我真的自闭了，但是mobx也不能放弃，我硬着头皮看啊，搜索文章，看api，完全摸不着头脑，最后我想到一个点，我去看了一下mobx版本,发现问题这是不能正常使用的情况,版本6.0了我第一次使用这玩意儿哪知道啊，"mobx": "^6.0.1","mobx-react
2020-10-17 17:17:17
6819
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
1498
原创 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
1905
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
407
树形组件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关注的人