zero77ld的博客

原创 【v-loading】vue3自定义指令v-loading的封装，预制菜可直接食用

vue3+ts自定义指令封装，预制菜可直接食用

原创 【useWebsocket】vue3+vite封装websocket hooks

直接上干货。可直接食用

原创 js小数运算，究极完善版！附数字转汉字

小数运算究极处理方法+阿拉伯数字转简繁体汉字

原创 js复制、写入剪切板；TypeError: Cannot read properties of undefined (reading ‘writeText‘)

【代码】js复制、写入剪切板；

原创 正则表达式

原创 前端小知识之设计基础

有几年设计工作经历，决定在前端学习分享会上简单讲一讲设计基础，开发人员也可以更好的理解设计语言，前端懂设计对自己的代码工作无疑帮助是很大的，主要是明确了UI的整个工作流程，与UI设计师可以更好的配合，可以更好的结构化代码拆分，会不知不觉的注重代码细节、用户体验。...

原创 面向对象编程之封装

原创 使用commitize+husky+commitlint制定git提交规范并自动修复代码格式

一、使用git+commitize+cz-customizable制定提交规范1.全局安装 Commitizennpm install -g commitizen@4.2.42.安装并配置 cz-customizable 插件// 使用npm 下载 cz-customizablenpm i cz-customizable@6.3.0 --save--dev添加以下配置到package.json中"config": { "commitizen": { "path": "n

原创 基于el- cascader二次封装，实现点击label选中和双击选中所有子级

基于el- cascader二次封装，实现单击label选中和双击选中子级一、探索思路二、实现方案三、完整代码最近接到需求需要级联选择器父子互不关联且点击label可以选中双击选中所有子级一、探索思路定制性这么强的需求第一步当然是使用自定义节点内容文档中没有说明对应功能的函数，只能通过查看源码寻找解决方案源码中并没有el-tree中的setChecked方法，但是在cascader文件570行发现了handleSuggestionKeyDown函数该函数中通过触发clic

原创 究极禁用浏览器的自动保存密码提示功能

直接上干货网上很多文章说使用autoComplete=“off”、使用new-password、动态密码域……现在统统都不行了! 本片文章思路主要是模仿password的输入框<template> <div class="main"> <h3 style="margin:0 0 30px 0;text-align: center;">登录不保存密码</h3> <el-form label-position="left" re

原创 element table filed显示不全

element table filed显示不全项目中使用element table filed没有横向滚动条的情况下出现filed列显示不全的情况解决方案.el-table_fixed, .el-table_fixed-right{height:100% !important;}导致原因el-table_fixed做高度计算时忽略了滚动条高度所导致；导致这个问题出现的版本是2.13.0；刚去element官网查看了版本号，发现2.13.0已被移除，2.13版本中现在只保留了2.1

原创 js自定义粘贴板内容（clipboardData）

oncopy() { document.oncopy = (e) => { e.clipboardData.setData('text/plain', this.getMarqueeString()) document.oncopy = null e.preventDefault() } document.execCommand('copy') },

原创 js纯原生实现div画框+多选+框选canvas内容+跨屏选

新需求需要在canvas画布上实现框选及对框选中的数据进项操作以下代码实现框选及多选// main画布事件监听,框选function mainMarqueeMousedown (e) { if (e.button !== 0) return // 判断是否多选 if (!e.ctrlKey) { // 容纳marqueeDOM的盒子 marqueeBoxDOM.innerHTML = '' // 储存marquee坐标数组 mar

原创 js纯原生监听滚动条动态加载渲染canvas

最近接到了一个新需求，需要渲染一个超大canvas，canvas画布最大不超过两万，我需要渲染几十万的尺寸当时定了两种方案方案一：动态canvas渲染方案二：拼接法渲染由于需要完成跨屏选择和对canva是不太熟悉就选用了方案二最开始用的满铺懒加载拼接，导致占用内存特别大，就优化成立动态移动拼接废话不多说，直接贴代码 /** *监听滚动，动态渲染 *currentPosition 当前位置是第几个画布 *expectedPosition 预渲染第几个画布 *canvasHeight

原创 PDF — — pdf Invalid PDF structure/Warning: Ignoring invalid character ...

最近接手了一个遗留的PDF报错任务，用vue-pdf获取服务器PDF报Warning: Ignoring invalid character “XX” in hex string错误排错历程console.log获取的内容 this.src = pdf.createLoadingTask(this.src) .then(res => { console.log(res) }).catch(err => { con.

原创 element Cascader 点击文字选中+选中隐藏+多选

element Cascader 级联选择器只能通过点击文字前边的icon选中，且选中后选择框不会隐藏现在的需求是可以选中任意一级，需要点击文字选中且选中后选择框隐藏HTML结构<el-form-item label="组织者" prop="organizer"> <el-cascader ref="organizerUnit" v-model="temp.orga.

原创 根据数据状态动态渲染不同颜色的卡片列表

老规矩，少废话先看效果最近接到需求，列表不想用table形式展示，想用卡片形式展示，下面贴上实现代码这个逻辑理清楚后，实现起来没什么难度。HTML部分 <el-row :gutter="10"> <el-col v-for="(item,index) in yearLists" :key="index" :lg="8" :xl="6"> <div class="item"> <div :class="getC

原创 简单聊一聊vue日历插件vue-full-calendar

版本选择目前大约有三种不同版本的引用方式，本篇文章讲的是第一种，如果下文中讲的方法不生效，请检查一下版本是否一致vue-full-calendarvue-fullcalendarfullcalendar/vue安装npm install --save vue-full-calendar引用–局部引用// index.vueimport { FullCalendar } from 'vue-full-calendar'import 'fullcalendar/dist/fullc.