<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[QLF19的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/QLF19</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; QLF19]]></copyright><item><title><![CDATA[手写全屏加载遮罩 ]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/152927144</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/152927144</guid><author>QLF19</author><pubDate>Fri, 10 Oct 2025 15:21:44 +0800</pubDate><description><![CDATA[【代码】手写全屏加载遮罩。]]></description><category></category></item><item><title><![CDATA[ECharts图标随着窗口变化大小]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/151323980</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/151323980</guid><author>QLF19</author><pubDate>Mon, 08 Sep 2025 15:21:28 +0800</pubDate><description><![CDATA[/ 添加窗口大小变化监听，用于触发图表的resize操作。// 移除窗口大小变化监听。]]></description><category></category></item><item><title><![CDATA[Echarts柱状图背景色隐藏]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/151323298</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/151323298</guid><author>QLF19</author><pubDate>Mon, 08 Sep 2025 14:58:35 +0800</pubDate><description><![CDATA[【代码】Echarts柱状图背景色隐藏。]]></description><category></category></item><item><title><![CDATA[Echarts柱状图Y轴和X轴，刻度线隐藏和文字隐藏]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/151323213</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/151323213</guid><author>QLF19</author><pubDate>Mon, 08 Sep 2025 14:55:54 +0800</pubDate><description><![CDATA[该代码段配置了ECharts图表的x轴属性：隐藏了刻度线、轴线、标签文字和网格线，使x轴在视觉上完全不可见。type设置为'value'表示数值型坐标轴。这种配置适用于需要最小化坐标轴干扰的图表场景，如某些数据可视化需求中仅需展示数据系列而不需要坐标轴标记的情况。]]></description><category></category></item><item><title><![CDATA[Echarts柱状图去掉鼠标移入背景高亮效果]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/151322940</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/151322940</guid><author>QLF19</author><pubDate>Mon, 08 Sep 2025 14:46:42 +0800</pubDate><description><![CDATA[【代码】Echarts柱状图去掉鼠标移入背景高亮效果。]]></description><category></category></item><item><title><![CDATA[判断数组对象是否包含]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/144711404</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/144711404</guid><author>QLF19</author><pubDate>Wed, 25 Dec 2024 10:14:13 +0800</pubDate><description><![CDATA[【代码】判断数组对象是否包含。]]></description><category></category></item><item><title><![CDATA[VScode代码提示红色波浪线报TS错误]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/144442630</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/144442630</guid><author>QLF19</author><pubDate>Fri, 13 Dec 2024 09:53:13 +0800</pubDate><description><![CDATA[搜索validate打开TypeScript把JavaScript>验证：启用改成禁用就可以了。首先打开VScode设置。]]></description><category></category></item><item><title><![CDATA[vue-piczoom放大镜插件]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/132237711</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/132237711</guid><author>QLF19</author><pubDate>Fri, 11 Aug 2023 17:59:26 +0800</pubDate><description><![CDATA[放大镜]]></description><category></category></item><item><title><![CDATA[JS 常见的 6 种继承方式]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/131962932</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/131962932</guid><author>QLF19</author><pubDate>Thu, 27 Jul 2023 16:59:23 +0800</pubDate><description><![CDATA[明明只改变了 c1 的 play 属性，为什么 c2 也跟着变了呢？原因很简单，因为两个实例使用的是同一个原型对象。它们的内存空间是共享的，当一个发生变化的时候，另外一个也随之进行了变化，这就是使用原型链继承方式的一个缺点。原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。上面的代码看似没有问题，虽然父类的方法和属性都能够访问，但其实有一个潜在的问题。]]></description><category></category></item><item><title><![CDATA[deep深度穿透]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/131935381</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/131935381</guid><author>QLF19</author><pubDate>Wed, 26 Jul 2023 11:27:27 +0800</pubDate><description><![CDATA[如果去掉scoped的话就会影响全局样式，但是加上scoped又不能在当前组件修改子组件的样式，这个时候就可以使用 /deep/ 了。这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值，从而避免父组件对子组件的样式的影响。设置了上述scoped的话，如果想要在父组件中修改子组件的样式时应该怎么样做呢？来避免父组件对子组件的影响，添加了之后只能修改当前组件的样式。css中通常会在 style 标签内添加。除了 /deep/ 以外，也可以实现同样的效果。]]></description><category></category></item><item><title><![CDATA[如何理解diff算法]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/131919700</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/131919700</guid><author>QLF19</author><pubDate>Wed, 26 Jul 2023 09:41:19 +0800</pubDate><description><![CDATA[diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。简单的说：diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。diff算法的本质是找出两个对象之间的差异，目的是尽可能做到节点复用。]]></description><category></category></item><item><title><![CDATA[meta 标签内属性及详解]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/131897409</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/131897409</guid><author>QLF19</author><pubDate>Wed, 26 Jul 2023 09:40:47 +0800</pubDate><description><![CDATA[属性值为content，content参数有all,index搜索引擎将索引此网页，follow继续通过此网页的链接索引；后面的分号是在秒数的前面和网址的后面；none将忽略此网页；nofollow搜索引擎不继续通过此网页的链接索引搜索其他的网页；13.Set-Cookie用于cookie的设定，如果网页过期，那么存盘的cookie将被删除；14.Window-target显示窗口的设定，强制页面在当前窗口以独立页面显示；15.content-Type显示字符集的设定，设定页面使用的字符集；]]></description><category></category></item><item><title><![CDATA[瀑布流原理]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/131897474</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/131897474</guid><author>QLF19</author><pubDate>Wed, 26 Jul 2023 09:40:25 +0800</pubDate><description><![CDATA[然后就是i>columns的逻辑，在这里面定义一个空变量为minHeight为最小高度，这个最小高度让他默认为0；在定义一个变量为Index为0；然后在写一个循环，循环内容就是每个上面存储每一项高度的数组，然后再通过if判断找出最小的高度值，逻辑就是如果当前循环的高度小于。5.最后一步就是把后面的元素插入到高度最小的元素下面，让循环的当前项的top值为最小高度，让他到这个元素的下面；上面定义的minHeight最小高度的话，就让minHeight等于这个高度，然后再让index等于这个元素的下标；]]></description><category></category></item><item><title><![CDATA[解构赋值.]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/131893095</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/131893095</guid><author>QLF19</author><pubDate>Wed, 26 Jul 2023 09:40:09 +0800</pubDate><description><![CDATA[解构赋值语法是一种Javascript表达式。通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。是Es6中的新语法，他的本质是模式匹配，就是只要等号两边的模式相同，左边的变量就会被赋予匹配的右边的值，要是匹配不成功变量的值就是undefined；他是针对数组或者对象进行模式匹配，然后对其中的变量进行赋值；他左边表示的是要解构的目标，右边表示解构源；解构赋值还是对赋值运算符的扩展；2.让函数中返回多个值，函数只能返回一个值，但用解构赋值的话可以返回是一个数组或者对象；4.提取json数据。]]></description><category></category></item><item><title><![CDATA[虚拟dom]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/131919654</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/131919654</guid><author>QLF19</author><pubDate>Wed, 26 Jul 2023 09:39:42 +0800</pubDate><description><![CDATA[用一个简单的对象去代替复杂的DOM对象，存储了对应DOM的一些重要参数，在改变DOM之前，会先比较相应虚拟DOM的数据，如果需要改变，才会将改变应用到真实DOM上。减少了对DOM的操作。页面中的数据和状态变化，都通过Vnode对比，只需要在比对完之后更新DOM，不需要频繁操作，提高了页面性能；虚拟DOM频繁修改，然后一次性对比差异并修改真实DOM，最后进行依次回流重绘，减少了真实DOM中多次回流重绘引起的性能损耗；虚拟DOM有效降低大面积的重绘与排版，因为是和真实DOM对比，更新差异部分，所以只渲染局部；]]></description><category></category></item><item><title><![CDATA[vue 自定义指令如何使用]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/131895448</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/131895448</guid><author>QLF19</author><pubDate>Tue, 25 Jul 2023 09:26:05 +0800</pubDate><description><![CDATA[很多时候我们需要直接操作 dom 元素，如果只是个别需要操作 dom 元素，我们可以通过 ref 获取当前 dom 元素，并对其进行操作，但是如果特别多的时候，我们不可能每次都去写一遍 ref 还有方法，所以这时候自定义指令就可以帮你轻松解决这个问题。**binding**: 一个对象，里面包含了几个属性：value:指令的绑定值，name:指令名等；**el**: 指令所绑定的元素，可以用来直接操作 DOM，就是放置指令的那个元素。**vnode**：Vue 编译生成的虚拟节点。]]></description><category></category></item><item><title><![CDATA[keep-alive 的作用]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/131895898</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/131895898</guid><author>QLF19</author><pubDate>Tue, 25 Jul 2023 09:25:27 +0800</pubDate><description><![CDATA[keep-alive是Vue中的内置组件，能在切换过程中把状态保留在内存中，防止重复渲染DOM包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。- exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。- include: 字符串或正则表达式。只有匹配的组件会被缓存。列表页面 =>点击进入详情页=> 后退到列表页 要缓存列表原来数据。Vue中前进刷新，后退缓存用户浏览数据。重新进入列表页面 => 获取最新的数据。]]></description><category></category></item><item><title><![CDATA[Object.defineProperty()方法有何作用]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/131897297</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/131897297</guid><author>QLF19</author><pubDate>Tue, 25 Jul 2023 09:25:11 +0800</pubDate><description><![CDATA[作用：Object.defineProperty方法会直接在对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。4.configurable描述符：设置是否可配置属性特性，默认为true。无法删除该属性，不能够修改属性值，也不能修改属性的属性描述符。2.writable描述符：设置属性的值是否可写，默认值为true。1.value描述符：设置属性值，默认值为undefined。参数解释：object：要定义属性的对象，返回的也是；descriptor：要定义或修改的属性描述符。]]></description><category></category></item><item><title><![CDATA[vue 中 key 的作用]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/131895328</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/131895328</guid><author>QLF19</author><pubDate>Tue, 25 Jul 2023 09:24:54 +0800</pubDate><description><![CDATA[​在生成虚拟dom的过程中，相同的组件产生相同的dom结构，不同的组件产生不同的dom结构，同一层级的dom节点，他们可以通过唯一的id进行区分，这个id就是key。作用：高效的更新虚拟dom。]]></description><category></category></item><item><title><![CDATA[vuex 中 state,getters,mutations,actions,modules的用途和用法]]></title><link>https://blog.youkuaiyun.com/QLF19/article/details/131895389</link><guid>https://blog.youkuaiyun.com/QLF19/article/details/131895389</guid><author>QLF19</author><pubDate>Tue, 25 Jul 2023 09:23:51 +0800</pubDate><description><![CDATA[需要注意的是modules模块中的state不能通过this.store.state获取，必须加上module的命名空间；mutation 唯一可以提交可以改变state的状态，也就是数据的属性值，他是通过直接改变状态的方式改变state，而且mutation必须同步执行，mutations相当于生成了修改全局变量的事件函数，所以触发的时候需要事件驱动。会对state中的变量进行过滤再保存，只要state中的变量发生了改变，它也会发生改变，不变化的时候，使用的是缓存。对象，或者自己定义新的方法或属性名；]]></description><category></category></item></channel></rss>