<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[zero77ld的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/zero77ld</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; zero77ld]]></copyright><item><title><![CDATA[【v-loading】vue3自定义指令v-loading的封装，预制菜可直接食用]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/136848713</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/136848713</guid><author>zero77ld</author><pubDate>Wed, 20 Mar 2024 10:18:19 +0800</pubDate><description><![CDATA[vue3+ts自定义指令封装，预制菜可直接食用]]></description><category></category></item><item><title><![CDATA[【useWebsocket】vue3+vite封装websocket hooks]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/136847935</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/136847935</guid><author>zero77ld</author><pubDate>Tue, 19 Mar 2024 16:57:24 +0800</pubDate><description><![CDATA[直接上干货。可直接食用]]></description><category></category></item><item><title><![CDATA[js小数运算，究极完善版！附数字转汉字]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/135652993</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/135652993</guid><author>zero77ld</author><pubDate>Wed, 17 Jan 2024 16:05:36 +0800</pubDate><description><![CDATA[小数运算究极处理方法+阿拉伯数字转简繁体汉字]]></description><category></category></item><item><title><![CDATA[js复制、写入剪切板；TypeError: Cannot read properties of undefined (reading ‘writeText‘)]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/127967854</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/127967854</guid><author>zero77ld</author><pubDate>Mon, 21 Nov 2022 17:33:14 +0800</pubDate><description><![CDATA[【代码】js复制、写入剪切板；]]></description><category></category></item><item><title><![CDATA[正则表达式]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/124684280</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/124684280</guid><author>zero77ld</author><pubDate>Tue, 10 May 2022 11:27:35 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[前端小知识之设计基础]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/124683584</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/124683584</guid><author>zero77ld</author><pubDate>Tue, 10 May 2022 11:17:51 +0800</pubDate><description><![CDATA[有几年设计工作经历，决定在前端学习分享会上简单讲一讲设计基础，开发人员也可以更好的理解设计语言，前端懂设计对自己的代码工作无疑帮助是很大的，主要是明确了UI的整个工作流程，与UI设计师可以更好的配合，可以更好的结构化代码拆分，会不知不觉的注重代码细节、用户体验。


































...]]></description><category></category></item><item><title><![CDATA[面向对象编程之封装]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/124683228</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/124683228</guid><author>zero77ld</author><pubDate>Tue, 10 May 2022 10:55:28 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[使用commitize+husky+commitlint制定git提交规范并自动修复代码格式]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/124116367</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/124116367</guid><author>zero77ld</author><pubDate>Tue, 12 Apr 2022 11:59:58 +0800</pubDate><description><![CDATA[一、使用git+commitize+cz-customizable制定提交规范
1.全局安装 Commitizen
npm install -g commitizen@4.2.4

2.安装并配置 cz-customizable 插件
// 使用npm 下载 cz-customizable
npm i cz-customizable@6.3.0 --save--dev

添加以下配置到package.json中
"config": {
	  "commitizen": {
   		  "path": "n]]></description><category></category></item><item><title><![CDATA[基于el- cascader二次封装，实现点击label选中和双击选中所有子级]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/120331280</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/120331280</guid><author>zero77ld</author><pubDate>Fri, 17 Sep 2021 16:09:34 +0800</pubDate><description><![CDATA[基于el- cascader二次封装，实现单击label选中和双击选中子级一、探索思路二、实现方案三、完整代码


最近接到需求需要级联选择器父子互不关联且

点击label可以选中
双击选中所有子级


一、探索思路

定制性这么强的需求第一步当然是使用自定义节点内容

文档中没有说明对应功能的函数，只能通过查看源码寻找解决方案


源码中并没有el-tree中的setChecked方法，但是在cascader文件570行发现了handleSuggestionKeyDown函数

该函数中通过触发clic]]></description><category></category></item><item><title><![CDATA[究极禁用浏览器的自动保存密码提示功能]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/113569946</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/113569946</guid><author>zero77ld</author><pubDate>Tue, 02 Feb 2021 17:54:07 +0800</pubDate><description><![CDATA[直接上干货

网上很多文章说使用autoComplete=“off”、使用new-password、动态密码域……现在统统都不行了! 本片文章思路主要是模仿password的输入框


&lt;template&gt;
  &lt;div class="main"&gt;
    &lt;h3 style="margin:0 0 30px 0;text-align: center;"&gt;登录不保存密码&lt;/h3&gt;
    &lt;el-form label-position="left" re]]></description><category></category></item><item><title><![CDATA[element table filed显示不全]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/110119319</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/110119319</guid><author>zero77ld</author><pubDate>Wed, 25 Nov 2020 11:17:02 +0800</pubDate><description><![CDATA[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]]></description><category></category></item><item><title><![CDATA[js自定义粘贴板内容（clipboardData）]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/108731730</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/108731730</guid><author>zero77ld</author><pubDate>Tue, 22 Sep 2020 14:33:46 +0800</pubDate><description><![CDATA[oncopy() {
      document.oncopy = (e) =&gt; {
        e.clipboardData.setData('text/plain', this.getMarqueeString())
        document.oncopy = null
        e.preventDefault() 
      }
      document.execCommand('copy')
    },


]]></description><category></category></item><item><title><![CDATA[js纯原生实现div画框+多选+框选canvas内容+跨屏选]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/108550437</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/108550437</guid><author>zero77ld</author><pubDate>Sat, 12 Sep 2020 15:44:35 +0800</pubDate><description><![CDATA[新需求需要在canvas画布上实现框选及对框选中的数据进项操作
以下代码实现框选及多选
// main画布事件监听,框选
function mainMarqueeMousedown (e) {
    if (e.button !== 0) return
    // 判断是否多选
    if (!e.ctrlKey) {
      // 容纳marqueeDOM的盒子
      marqueeBoxDOM.innerHTML = ''
      // 储存marquee坐标数组
      mar]]></description><category></category></item><item><title><![CDATA[js纯原生监听滚动条动态加载渲染canvas]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/108549139</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/108549139</guid><author>zero77ld</author><pubDate>Sat, 12 Sep 2020 15:09:59 +0800</pubDate><description><![CDATA[最近接到了一个新需求，需要渲染一个超大canvas，canvas画布最大不超过两万，我需要渲染几十万的尺寸

当时定了两种方案
方案一：动态canvas渲染
方案二：拼接法渲染
由于需要完成跨屏选择和对canva是不太熟悉就选用了方案二


最开始用的满铺懒加载拼接，导致占用内存特别大，就优化成立动态移动拼接
废话不多说，直接贴代码
 /**
 *监听滚动，动态渲染
 *currentPosition 当前位置是第几个画布
 *expectedPosition 预渲染第几个画布
 *canvasHeight]]></description><category></category></item><item><title><![CDATA[PDF — — pdf Invalid PDF structure/Warning: Ignoring invalid character ...]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/107978749</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/107978749</guid><author>zero77ld</author><pubDate>Thu, 13 Aug 2020 14:18:13 +0800</pubDate><description><![CDATA[最近接手了一个遗留的PDF报错任务，用vue-pdf获取服务器PDF报Warning: Ignoring invalid character “XX” in hex string错误

排错历程

console.log获取的内容

      this.src = pdf.createLoadingTask(this.src)
      .then(res =&gt; {
         console.log(res)
      }).catch(err =&gt; {
         con.]]></description><category></category></item><item><title><![CDATA[element Cascader 点击文字选中+选中隐藏+多选]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/107978721</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/107978721</guid><author>zero77ld</author><pubDate>Thu, 13 Aug 2020 14:17:17 +0800</pubDate><description><![CDATA[element Cascader 级联选择器只能通过点击文字前边的icon选中，且选中后选择框不会隐藏
现在的需求是可以选中任意一级，需要点击文字选中且选中后选择框隐藏

HTML结构
&lt;el-form-item label="组织者" prop="organizer"&gt;
                  &lt;el-cascader
                    ref="organizerUnit"
                    v-model="temp.orga.]]></description><category></category></item><item><title><![CDATA[根据数据状态动态渲染不同颜色的卡片列表]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/107978667</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/107978667</guid><author>zero77ld</author><pubDate>Thu, 13 Aug 2020 14:15:56 +0800</pubDate><description><![CDATA[老规矩，少废话先看效果

最近接到需求，列表不想用table形式展示，想用卡片形式展示，下面贴上实现代码
这个逻辑理清楚后，实现起来没什么难度。
HTML部分
 &lt;el-row :gutter="10"&gt;
      &lt;el-col v-for="(item,index) in yearLists" :key="index" :lg="8" :xl="6"&gt;
        &lt;div class="item"&gt;
          &lt;div :class="getC]]></description><category></category></item><item><title><![CDATA[简单聊一聊vue日历插件vue-full-calendar]]></title><link>https://blog.youkuaiyun.com/zero77ld/article/details/107978448</link><guid>https://blog.youkuaiyun.com/zero77ld/article/details/107978448</guid><author>zero77ld</author><pubDate>Thu, 13 Aug 2020 14:08:23 +0800</pubDate><description><![CDATA[版本选择

目前大约有三种不同版本的引用方式，本篇文章讲的是第一种，如果下文中讲的方法不生效，请检查一下版本是否一致


vue-full-calendar
vue-fullcalendar
fullcalendar/vue

安装
npm install --save vue-full-calendar
引用–局部引用
// index.vue
import { FullCalendar } from 'vue-full-calendar'
import 'fullcalendar/dist/fullc.]]></description><category></category></item></channel></rss>