- 博客(330)
- 收藏
- 关注
RSS订阅原创 巧用ElementUI的PopupManager设置自定义Popup弹窗的z-index
巧用ElementUI的PopupManager设置自定义Popup弹窗的z-index
2024-11-28 21:09:48
293
原创 浅谈Vue2中的functional组件【函数式组件】
如果 props 对象外部不变，但内部的参数发生变化，函数化组件会重新渲染。因为函数化组件是无状态的，它们只依赖于传入的 props。当 props 的内部参数发生变化时，Vue 会检测到这些变化并重新渲染函数化组件。Vue.js 中的 functional 函数化组件是一种特殊类型的无状态组件，它不依赖于内部状态，只依赖于传入的 props。比较可行的办法是：在父组件中监听 props 变化，并在适当的时机传递新的 props 给函数化组件。这样，函数化组件会在接收到新的 props 时自动重新渲染。
2024-11-27 14:08:39
332
原创 Vue中的JSX语法详解
JSX是一种Javascript的语法扩展，即具备了Javascript的全部功能，同时又兼具html的语义化和直观性。它可以让我们在JS中写模板语法上面这段代码既不是 HTML 也不是字符串，被称之为 JSX，是 JavaScript 的扩展语法。JSX 可能会使人联想到模板语法，但是它具备 Javascript 的完全编程能力。
2024-11-27 13:56:46
1035
原创 vue-seamless-scroll无缝滚动到下一屏点击事件无法生效的问题解决
vue-seamless-scroll实现滚动的原理就是，拿到原数据，将数据复制了一份html出来，进行填铺页面，方便滚动的，而这些复制出来的并没有绑定事件。为无缝滚动的每一项添加点击事件，当滚动到下一屏点击事件无法生效。使用e.target.dataset.xxx取到绑定的额外值。利用data-xxx为元素绑定额外值。将事件统一放到外层的 div 上。实现子元素的点击事件处理。
2024-11-26 10:41:12
460
1
原创 对于组件异步引入中的webpackChunkName理解
import异步加载的写法实现页面模块lazy loading懒加载（Vue中的路由异步加载），Vue中运用import的懒加载语句以及webpack的语法注释，在项目进行webpack打包的时候，对不同模块进行代码分包，在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。今天在写路由组件的时候，异步引入的时候，不经意发现一个不起眼的注解。
2024-11-24 12:09:51
222
原创 Vue组件相互引用，组件不能正常注册，控制台报错
所以在B引用C的时候，我们采用异步组件，这样在B用到C组件的时候再去加载C组件就不会出现上面的问题了。Vue项目中在控制台遇见下面的这种报错，组件没有正常注册，排查代码发现组件也都正常导入、注册、使用了。A组件引用了B组件，B组件引用了C组件，C组件内部又引用了A组件，存在着相互引用。按照报错问题上面的文件引用关系，逐级排查发现存在着件组相互引用的问题，组件如下。
2024-11-24 12:02:13
261
原创 Vue开发和生产环境的代理配置
对于开发环境的地址配置我们是可以在vue.config.js中直接配置代理方式的，这里的代理是对请求路径的代理，也就是axios的请求路径（简单点理解就是对路径进行替换），例如以下代码，我们将/api这个路径代理到了target指向的真实的后端地址。其中VUE_APP_BASE_API是Vue的关键后端请求地址，我们可以在nodejs项目的任意js代码中获取环境变量，例如在创建axios请求实例对象时，通过process.env.“环境变量的KEY”
2024-11-16 11:46:10
421
原创 position: fixed之后，由于层级过高，底层元素的点击事件失效解决办法
给fixed元素添加 pointer-events: none; // 允许点击穿透
2024-11-08 12:03:24
141
原创 el-tree当节点全选时只返回被全选子级的父节点key，未全选则返回选中的节点key
需要获取树组件选中的节点，假如父节点被选中（该节点全选），即只返回父节点的数据，如父节点未被全选，则正常返回被选中节点的数据。如上图，此时，除了二级 2-1 节点外，其余节点被选中，此时只需要获二级 2-2 、一级3 这两个节点的数据即可。如上图，一级2和下面的子节点都选中了，此时需要只获取到一级 2 这个节点的数据即可。利用递归的方法，遍历所有的节点，判断其是否为全选状态，为全选状态时即拿到其数据。这里需要把树组件实例上的store传入。
2024-11-08 12:00:07
411
原创 npm ERR! node-sass@6.0.1 postinstall: `node scripts/build.js`
【代码】npm ERR!
2024-10-18 10:48:40
168
原创 uniapp微信小程序修改组件样式失效（解决方案）
表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。在微信小程序平台上。这是因为微信小程序对于组件样式的处理具有一定的隔离性，旨在防止样式冲突，这被称为样式隔离。表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；提供的配置项，用于控制组件样式的作用域。
2024-09-29 10:16:22
899
原创 uni-file-picker文件选择上传功能实现
可以使用九宫格样式选择图片limit="1"，则最多选择张图片，限定只选择图片，限定只选择 png和jpg后缀的图片,可以停止自动上传，通过ref调用upload方法自行选择上传时机。与搭配使用，
2024-09-23 16:19:19
1557
原创 el-table在动态渲染列的时候，使用slot自定义单元格时，prop属性键入失效
原因：使用自定义slot，循环体中所有的列都是自定义slot，即时v-if绑定在template也不行。el-table在动态渲染列的时候，使用slot自定义单元格时，prop属性键入失效。
2024-09-14 13:43:15
291
原创 Vue实现html网页导出为pdf和png
在前端开发中，导出网页内容为 PDF 文件是一个常见需求，无论是生成报表、保存网页截图，还是打印功能。本文将介绍如何使用 html2Canvas 和 jsPDF 库实现这一功能，并提供详细的代码示例和优化建议。
2024-09-09 20:52:37
442
原创 CSS Grid 布局完全指南
在一个声明中设置所有以下属性的简写： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow。：将grid-template-rows设置为指定的值。grid-column-start / grid-row-start 是网格项开始的网格线，grid-column-end / grid-row-end 是网格项结束的网格线。
2024-09-05 11:07:13
480
原创 Flexbox弹性盒布局中gap的使用
是一个缩写属性，用于同时设置。如果使用了百分比，则。，如果需要分开设置，用于单独设置行间隙，参考父元素的高度，则。
2024-09-03 16:04:40
1284
原创 el-form校验项为数组&&组件是自定义组件校验遇到的坑
validator的参数有：(rule, value, callback)，前三个比较重要。rule：指向该条规则对象。value：新的值，用于参与运算、对比。callback：执行回调，使用方法是：callback(‘…’);。如果不传参：表示验证通过，一般不必专门强调。字符串会作为错误提示，但是显示优先级低于外层的message。比如callback(‘内层错误提示’);跟message: '外层错误提示’同时存在，则会提示：外层错误提示。data() {
2024-08-09 10:12:44
602
原创 vue中data pros computed的执行前后顺序
已经初始化完毕，因此可以在计算属性中使用它们的值。另外，计算属性的值是基于内部依赖的变化而自动更新的，当依赖的。在这个阶段，计算属性会根据其定义的依赖关系进行计算，并将计算结果与组件实例关联。函数（或对象），并将返回的数据对象与组件实例进行关联。这时，组件实例会拥有。中定义的属性，并且这些属性是响应式的。，将父组件传递的属性值设置到子组件的。的解构的计算属性，无法访问，因为。发生变化时，计算属性自定更新。首先，Vue会初始化组件的。中，实例化组件时，以下是。需要注意的是，在执行。
2024-08-03 16:48:02
288
原创 vue组件使用$listeners同时自己添加事件，重复执行
进行批量事件和属性透传，基于自己的实际业务可能需要新增或者修改一些属性和事件。事件参数只有当前选项的值，部分场景下需要获取到完整选项数据。此时就会只执行一次事件，实现预期效果。这类组件库进行二次封装时，通过使用。部分场景下，如自己封装的组件或对。解决方案：通过扩展运算符覆盖事件。实际执行会发现事件执行了两次。PS：$attrs同理。
2024-07-30 15:57:08
298
原创 如何更优雅二次封装ElementUI
这个变量拿到非作用域的插槽，然后循环渲染对应的普通具名插槽，这样就可以使用第三方组件提供的原插槽；作用域插槽则绕了一圈，使用了一个插槽的语法糖（具名插槽的缩写）并且结合着动态插槽名的用法；作用插槽位置和传递对应的参数，，这样就可以使用第三方组件提供的作用域插槽。当中不需要分默认插槽、具名插槽和作用域插槽，可以进行统一的处理。这个组件实例的属性，将其事件的监听都整合到了。组件实例的该属性包含了父作用域中的(不含。组件实例的该属性包含了父作用域中不作为。所有的方法将其挂载在我们自己的组件。
2024-07-29 15:16:05
1305
原创 将uniapp运行到微信开发者工具
登录微信公众平台：https://mp.weixin.qq.com/的文件位置，直接复制此路径即可，如果是。的文件位置，选中快捷方式，再次右键。开发管理->开发设置。选择打开文件所在位置。
2024-07-03 16:24:38
2575
原创 el-tree如何根据全选和半选的id数组回显勾选？
我的树结构是父子节点相互关联，也就是说。就是后端返回的那四个节点的id数组。，那我只要从上面四个id中，
2024-06-25 12:42:37
519
原创 uniapp运行到小程序报错：Some selectors are not allowed in component wxss, including tag name selectors, ID
组件对应 wxss 文件的样式，只对组件wxml内的节点生效。
2024-06-24 11:35:26
574
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人