- 博客(337)
- 收藏
- 关注
原创 CSS white-space 属性
在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示,取值有:<br><br><br><br><br>
2025-01-22 09:53:34 73
原创 HTML5 aria-labelledby和aria-label的作用是什么?
两者设立的目的是一样的,用于屏幕阅读器(Screen Reader),都是为了帮助残障人士更好的识别当前元素。此时,当焦点落到该输入框时,读屏软件就会读出。里的内容,即“用户名”。
2025-01-15 16:05:56 113
原创 v-bind=“$attrs“优先级的问题
可以让孙子组件快速接入爷爷组件绑定的属性,今天我们谈一谈优先级爷爷组件绑定和placeholder="覆盖组件内部的placeholder"placeholder="覆盖"父组件placeholder="最小"标签内部写死,后面在使用接入,最终以父组件的标签内部绑定的生效,这里爷爷组件传入的优先级,低于父组件自身绑定的属性placeholder="最小"/>
2025-01-03 17:14:14 211
原创 巧用ElementUI的PopupManager设置自定义Popup弹窗的z-index
巧用ElementUI的PopupManager设置自定义Popup弹窗的z-index
2024-11-28 21:09:48 376
原创 浅谈Vue2中的functional组件【函数式组件】
如果 props 对象外部不变,但内部的参数发生变化,函数化组件会重新渲染。因为函数化组件是无状态的,它们只依赖于传入的 props。当 props 的内部参数发生变化时,Vue 会检测到这些变化并重新渲染函数化组件。Vue.js 中的 functional 函数化组件是一种特殊类型的无状态组件,它不依赖于内部状态,只依赖于传入的 props。比较可行的办法是:在父组件中监听 props 变化,并在适当的时机传递新的 props 给函数化组件。这样,函数化组件会在接收到新的 props 时自动重新渲染。
2024-11-27 14:08:39 456
原创 Vue中的JSX语法详解
JSX是一种Javascript的语法扩展,即具备了Javascript的全部功能,同时又兼具html的语义化和直观性。它可以让我们在JS中写模板语法上面这段代码既不是 HTML 也不是字符串,被称之为 JSX,是 JavaScript 的扩展语法。JSX 可能会使人联想到模板语法,但是它具备 Javascript 的完全编程能力。
2024-11-27 13:56:46 1841
原创 vue-seamless-scroll无缝滚动到下一屏点击事件无法生效的问题解决
vue-seamless-scroll实现滚动的原理就是,拿到原数据,将数据复制了一份html出来,进行填铺页面,方便滚动的,而这些复制出来的并没有绑定事件。为无缝滚动的每一项添加点击事件,当滚动到下一屏点击事件无法生效。使用e.target.dataset.xxx取到绑定的额外值。利用data-xxx为元素绑定额外值。将事件统一放到外层的 div 上。实现子元素的点击事件处理。
2024-11-26 10:41:12 576 1
原创 对于组件异步引入中的webpackChunkName理解
import异步加载的写法实现页面模块lazy loading懒加载(Vue中的路由异步加载),Vue中运用import的懒加载语句以及webpack的语法注释,在项目进行webpack打包的时候,对不同模块进行代码分包,在首屏加载时,用到哪个模块再加载哪个模块,实现懒加载进行页面的优化。今天在写路由组件的时候,异步引入的时候,不经意发现一个不起眼的注解。
2024-11-24 12:09:51 282
原创 Vue组件相互引用,组件不能正常注册,控制台报错
所以在B引用C的时候,我们采用异步组件,这样在B用到C组件的时候再去加载C组件就不会出现上面的问题了。Vue项目中在控制台遇见下面的这种报错,组件没有正常注册,排查代码发现组件也都正常导入、注册、使用了。A组件引用了B组件,B组件引用了C组件,C组件内部又引用了A组件,存在着相互引用。按照报错问题上面的文件引用关系,逐级排查发现存在着件组相互引用的问题,组件如下。
2024-11-24 12:02:13 313
原创 Vue开发和生产环境的代理配置
对于开发环境的地址配置我们是可以在vue.config.js中直接配置代理方式的,这里的代理是对请求路径的代理,也就是axios的请求路径(简单点理解就是对路径进行替换),例如以下代码,我们将/api这个路径代理到了target指向的真实的后端地址。其中VUE_APP_BASE_API是Vue的关键后端请求地址,我们可以在nodejs项目的任意js代码中获取环境变量,例如在创建axios请求实例对象时,通过process.env.“环境变量的KEY”
2024-11-16 11:46:10 522
原创 position: fixed之后,由于层级过高,底层元素的点击事件失效解决办法
给fixed元素添加 pointer-events: none; // 允许点击穿透
2024-11-08 12:03:24 182
原创 el-tree当节点全选时只返回被全选子级的父节点key,未全选则返回选中的节点key
需要获取树组件选中的节点,假如父节点被选中(该节点全选),即只返回父节点的数据,如父节点未被全选,则正常返回被选中节点的数据。如上图,此时,除了二级 2-1 节点外,其余节点被选中,此时只需要获二级 2-2 、一级3 这两个节点的数据即可。如上图,一级2和下面的子节点都选中了,此时需要只获取到一级 2 这个节点的数据即可。利用递归的方法,遍历所有的节点,判断其是否为全选状态,为全选状态时即拿到其数据。这里需要把树组件实例上的store传入。
2024-11-08 12:00:07 520
原创 npm ERR! node-sass@6.0.1 postinstall: `node scripts/build.js`
【代码】npm ERR!
2024-10-18 10:48:40 222
原创 uniapp微信小程序修改组件样式失效(解决方案)
表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。在微信小程序平台上。这是因为微信小程序对于组件样式的处理具有一定的隔离性,旨在防止样式冲突,这被称为样式隔离。表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;提供的配置项,用于控制组件样式的作用域。
2024-09-29 10:16:22 1093
原创 uni-file-picker文件选择上传功能实现
可以使用九宫格样式选择图片limit="1",则最多选择张图片,限定只选择图片,限定只选择 png和jpg后缀的图片,可以停止自动上传,通过ref调用upload方法自行选择上传时机。与搭配使用,
2024-09-23 16:19:19 2043
原创 el-table在动态渲染列的时候,使用slot自定义单元格时,prop属性键入失效
原因:使用自定义slot,循环体中所有的列都是自定义slot,即时v-if绑定在template也不行。el-table在动态渲染列的时候,使用slot自定义单元格时,prop属性键入失效。
2024-09-14 13:43:15 301
原创 Vue实现html网页导出为pdf和png
在前端开发中,导出网页内容为 PDF 文件是一个常见需求,无论是生成报表、保存网页截图,还是打印功能。本文将介绍如何使用 html2Canvas 和 jsPDF 库实现这一功能,并提供详细的代码示例和优化建议。
2024-09-09 20:52:37 476
原创 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 539
原创 Flexbox弹性盒布局中gap的使用
是一个缩写属性,用于同时设置。如果使用了百分比,则。,如果需要分开设置,用于单独设置行间隙,参考父元素的高度,则。
2024-09-03 16:04:40 1525
原创 el-form校验项为数组&&组件是自定义组件校验遇到的坑
validator的参数有:(rule, value, callback),前三个比较重要。rule:指向该条规则对象。value:新的值,用于参与运算、对比。callback:执行回调,使用方法是:callback(‘…’);。如果不传参:表示验证通过,一般不必专门强调。字符串会作为错误提示,但是显示优先级低于外层的message。比如callback(‘内层错误提示’);跟message: '外层错误提示’同时存在,则会提示:外层错误提示。data() {
2024-08-09 10:12:44 634
原创 vue中data pros computed的执行前后顺序
已经初始化完毕,因此可以在计算属性中使用它们的值。另外,计算属性的值是基于内部依赖的变化而自动更新的,当依赖的。在这个阶段,计算属性会根据其定义的依赖关系进行计算,并将计算结果与组件实例关联。函数(或对象),并将返回的数据对象与组件实例进行关联。这时,组件实例会拥有。中定义的属性,并且这些属性是响应式的。,将父组件传递的属性值设置到子组件的。的解构的计算属性,无法访问,因为。发生变化时,计算属性自定更新。首先,Vue会初始化组件的。中,实例化组件时,以下是。需要注意的是,在执行。
2024-08-03 16:48:02 311
原创 vue组件使用$listeners同时自己添加事件,重复执行
进行批量事件和属性透传,基于自己的实际业务可能需要新增或者修改一些属性和事件。事件参数只有当前选项的值,部分场景下需要获取到完整选项数据。此时就会只执行一次事件,实现预期效果。这类组件库进行二次封装时,通过使用。部分场景下,如自己封装的组件或对。解决方案:通过扩展运算符覆盖事件。实际执行会发现事件执行了两次。PS:$attrs同理。
2024-07-30 15:57:08 311
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人