澪Lwh-CSDN博客

原创 17-关于layui模板引擎使用中出现的xss问题解决方案

，发现，laytpl其实是有自己的方式去预防xss的，那就是使用{{= d.field }}的模板语法，但这依然是需要修改多处，因为项目上使用的都是普通输出语法{{ d.field }}但是，我又在文档中发现，原始输出的语法在2.6.11开始就会默认转义，结果原项目使用的版本是2.6.8，所以，升级版本不失为一种方案，这样既不需要大批量改动，也能解决现有问题。2.7.6版本的layui.js直接在上述链接首页下载即可，最新版2.9.18的layui.js也可以用（可以直接在上诉链接中切换）

2024-10-29 17:43:10 164

原创 16-页面滚动条滑动时展示，不滑动时隐藏方案

选其一即可，在页面中使用，全局使用的话可能会影响其他页面元素进度条的体验，且在移动端情况下出现了滚动至底部时页面抖动的情况，这个问题暂时还没有想到解决方案，如果有知道的伙伴可以一起讨论一下。前提：项目上需要做滚动条滑动时展示，不滑动时隐藏的设计，但是看了一些方案后觉得不太适用，且某些方案若使用则需要修改的地方较多，只能另寻方案。若要是自定义滚动条样式，且pc段和移动端效果一致，就需再设计一番（如果没这要求的话，建议还是使用浏览器的默认样式渲染）而移动端的滚动则如下，但是符合滑动时展示，不滑动时隐藏的设计。

2024-10-20 12:53:23 154

原创 15-xss防护库Dompurify的基本使用

前提：之前在学习了vue-dompurify-html后了解了一下关于其原生库Dompurify的使用，毕竟vue-dompurify-html只适用于vue框架，若是在其他框架中使用，必然是不能用上这个插件，所以还是需要知道原生库的基本使用方式，才能在其他框架中运用上。此处仅展示了3个属性的测试效果，其他用的不多的就暂时不展示效果，还有一些，就不一一列举，待到使用的时候就能知晓用处。通过配置来指定哪些HTML、SVG和MathML标签是安全的，即允许出现在净化后的HTML中，值为一个集合。

2024-10-14 14:42:18 654

原创 14-PC端点击横向滚动

可知，滚动条是在可视容器中滚动，则滚动条的区域长度即为可视容器的宽度（clientWidth），而商品列的实际宽度（scrollWidth）为商品展示宽度（包括元素宽度+margin）*商品个数，则滚动条的可滚动距离为商品列实际宽度-可视容器的宽度，滚动条移动的距离与内容滚动的距离之间的比率是恒定的。前提条件：做一个商品列表，不换行，超出长度是横向滚动，但不是通过滚动条，是点击左右按钮滚动商品列表。1、当商品列表为初始状态时，左按钮不隐藏，右按钮展示，左右按钮表示商品的上一个或下一个。

2024-07-20 13:23:34 421

原创 13-el-tree-transfer自定义一键展开或一键收回

找到第一个$el:div.el-tree，即表示当前的$el所在的这是对象实例就是左边树结构的实例（可以看到左边树结构的实例是当前组件的第一个$children实例下的第二个$children实例，若加上filter属性的话，就是第三个$children实例，所以需要注意顺序）前提条件：项目使用了el-tree-transfer穿梭框组件，但需求希望左边树结构不展开，右边树结构展开，但该组件配置项只能全展开或全收起。同理，如果是没有设置全展开，那就需要将右边树结构全展示。简单记录一下安装使用。

2024-07-17 21:13:25 284

原创 12-Vant2使用表单方法resetValidation无效

修改后再次测试，依然没有重置，查找资料表示在 Vant 2 中，实际上并没有直接名为 resetValidation的方法，要想实现重置效果，只能自定义重置逻辑，网上能找到许多方法，其中有个说可以在van-form上加key，每次点击取消就key+1，但是我这里用了效果也没实现。解决方法虽然简单，但是重要的是让我知道了resetValidation这个方法是不可用的。由于看到文档中有描述了重置的方法，但使用的时候表单并没有重置，故寻找解决方法。起初测试的时候，我直接在@click中使用该方法。

2024-07-10 17:15:38 589

原创 11-vue-dompurify-html的使用及使用过程中的问题解决

使用了这个插件后，在测试时确实没有弹出来了，在我以为是成功的情况下，本想着做一下整理，但是更深入查找资料发现，虽然这个插件可以过滤掉xss攻击，但是不会影响其它元素渲染，但是使用后其它元素却没有渲染成功，就很奇怪。后来，我在node_modules中找这个插件的相关信息，结果被我发现在README.md中发现了一句话，意思是当前的版本是适合vue3用，vue2的话需要用4.1.x的版本。下载的版本是v4.1.4，刷新，结果没反应，重新启动，成功啦，没有弹窗，且其它元素也能成功渲染出来，果然是版本的问题。

2024-06-28 11:51:38 1896 1

原创 10-使用导航菜单后展示效果与原效果不符问题（elementui）

需要注意的是，在初始化项目时，App.vue中会自带样式，其中也有text-align，如果需要清除text-align的情况下，要把App.vue中的text-align也清除掉。前提条件：在使用了elementui的布局后加入导航菜单el-menu，但是效果与el-menu示例效果不一样，菜单名称过于靠近展开图标，三级菜单的位置前移。在添加布局的时候，一般会将示例中的样式也一并添加，这其中就有影响了el-menu中菜单文本位置的属性，也就是text-align。1、不使用el-aside。

2024-06-26 20:59:12 193

原创 9-短时间内重复请求导致的数据不匹配问题解决方案

或者定义一个全局参数记录是否点击了搜索按钮，在结果返回前，若再次点击，则判断这个参数的状态进行提示“数据正在请求中，无法重复请求”，待结果返回后，再重置参数值（方式很多，视具体情况而定，这里仅提供参考）前提条件：问题出现的操作为第一次点击搜索请求全部数据，在数据未返回时，输入条件点击搜索进行第二次请求，表格展示的数据为第二次请求返回的数据，但是双击查看时确实第一次请求的数据信息。就是短时间内只执行最后一次点击的请求。这种方案的实现方式就是，在点击搜索后且结果返回前，让搜索按钮禁用，在结果返回后解除禁用。

2024-06-13 17:36:47 370

原创 8-file-saver下载文件地址后缀为.zip无法自定义文件名问题解决

过程：先找原因，在下载的文件地址中，图片类的文件地址自定义文件名是生效的，只有.zip类型的文件地址没有生效，但理论上无论是图片类文件还是ZIP类文件，自定义文件名都应该能够生效。有个很搞笑的事情就是，我在做了跨域后直接使用saveAs()方法下载.zip的文件，结果它自定义文件名又生效了，没配置前就不生效，配置了之后就生效了，兜兜转转，感觉回到了起点。不过还是要记录一下，或许saveAs在服务器上能顺利使用，而在本地运行的环境去下载服务器上的文件可能就有点小插曲，牢记教训就好。最后实现能自定义文件名了。

2024-06-07 16:32:21 439

原创 7-table.render请求超时时间设置（layui，jq）

如果是表格数据的请求，一般是通过表格数据的异步请求实现。但是，在 layui 中，由于table.render方法本身并没有直接提供设置ajax请求超时的参数。前提条件：前端请求表格数据，因数据过多，服务器在默认时间内没有响应，导致ajax请求超时，需要给请求设置超时时间，超时后取消请求。分两种情况，如果数据是可以单页展示的，如果通过先请求数据，再使用data属性渲染表格。如果是正常分页的情况，就使用全局配置（在需要的js中全局配置）Ajax的默认超时时间在不同浏览器和框架中可能有所不同，但。

2024-06-04 18:02:05 496

原创 6-给layui.open加loading简单示例

一般情况下，可以直接使用layui中的load()方法，但是该方法的展示范围为整页面，如果展示的内容是居中展示，则不影响，不过需要自行给layui.open的内容区域加遮罩层。前提条件：由于layui.open中展示的内容从后台获取，但获取较慢，体验不好，故需要加一个loading，等待获取到数据后才能操作内容。用上后发现，loading不动了，查了资料后发现用法有问题，对于动态图标，需要使用layui封装的动画样式，如。等到数据获取后，在请求的回调中隐藏loading即可。

2024-05-31 17:16:09 1229

原创 5-js动态添加或移除元素-多个搜索条件联动案例记录

前提条件（需求）：初始化一个下拉框+搜索框，点击添加搜索条件，新增一个下拉框+搜索框和移除按钮，同时第一个下拉框+搜索框需要新增一个且或选择框和移除按钮，点击移除按钮，移除对应下拉框+搜索框及且或选择框（目前只考虑两个搜索条件示例）结果发现只展示了移除按钮，选择框并没有出现，F12查看元素，发现该元素的display是none，但是我加了style="display:none"后，选择框的样式却不是layui的样式。第一步，首先需要新增且或选择框，第一次采用的方法是使用appendTo直接添加Html。

2024-05-30 10:14:11 485 2

原创 4-关于使用v-viewer过程中的一些报错处理

过程：首先查了有哪个能直接预览图片的工具，找到了v-viewer这个，第一步就是安装。准备好图片后发现点了没反应，结果是还少了一个依赖包viewerjs，继续下载。文件中检查，还真有一个，修改会原来的版本后，重新启动，运行成功。或其他依赖配置文件中有一个不正确的版本指定，即。我就纳闷，我什么时候有这么一个版本了，然后我去。估计是版本不适配，又找到了另一个版本尝试下载。这个报错还是一个版本的问题，我又换了个版本。结果又报了一个错，大概的意思是我的。终端是不报错了，但是控制台报错了。

2024-05-20 18:39:18 505 1

原创 3-动态遍历多个元素初始化日期选择器，点击变为当前日期问题解决（layui.js）

问题情况：动态遍历后台返回的字段展示，返回类型为datetime时，点击输入框可选择日期，获取后点击外部或输入框，输入框中的值会变为当前日期，但value没变，且首次点击输入框会提示日期格式不合法，然后直接重置了我的值。所以后续处理日期相关的数值时需要注意，默认情况下的日期格式是yyyy-MM-dd，日期初始化方法中判断原值不合法就会被重置成当前日期。过程：既然是日期不合法，那我就让日期合法不就好了。这是修改后的写法，给他加上默认值即可。第一种方法是让后端直接改。第二种方法就是前端改。

2024-05-17 17:13:09 173

原创 2-Echarts修改指示文字样式

试成功后我又看着这个属性的结构，非常的眼熟，就想，不都是在label下的吗，那我直接把样式加在原来的label下不就好了，事不宜迟，马上动手！当你同时在label和itemStyle下的label都定义了样式，优先级是itemStyle下的label比较高。前提条件：用Echarts官网示例做了一个饼图，但由于底色比较深，显得原来的样式有点突兀，想要换一种颜色。过程：看到配置项中有一个textStyle属性，以为能用，但用了之后发现没用。后面找了一下方法，说可以使用itemStyle属性，试了一下，可行！

2024-05-16 15:13:58 381

原创 1-docx-preview实现docx文件预览(原生的vue.js)

文档的API使用中表示文件可以是JSZip.loadAsync支持的任何类型，所以我又使用了Blob、ArrayBuffer类型试了一下，以下贴上转换的方法。过程：找到一个docx-preview组件包，可使用npm下载，但没有直接找到一个js。查了材料发现，loadAsync是属于jszip这个包的方法，也就是说还需要再引入一个jszip.js文件，按照上述同样的方法引入。前提条件：代码是原生的vue.js写的，需要在线预览docx文件，不调后台接口。根据上面的写法后上传文件，结果报错了。

2024-05-12 13:02:49 1397 1

weixin_46675693的博客