- 博客(18)
- 收藏
- 关注
RSS订阅原创 iframe 父子通信实例应用总结
vue 页面嵌入了一个 iframe 列表页面, 点击列表详情可进入编辑页面, 在编辑页不显示 vue 页面的菜单栏, 而返回到列表页, 需显示菜单栏。对于同源的 iframe 父子页面也可以采用postMessage的方式来发送接收信息。时, 就调用 toggleMenu 的方法, 切换菜单栏的显示.配合使用，我们就能够完成跨域 iframe 父子页面的通信。在 iframe 子页面初始化加载和单击返回按钮行为里, 执行。在父页面加载行为里, 监听到 message 内容为。
2024-11-27 17:05:37
302
1
原创 echarts 桑基图点击高亮整条链路相关笔记总结
echarts桑基图会根据连线关系, 将节点摆放至相应的列, 也就是说, 后一列的节点, 至少要有一根与前一列节点的连线存在. 但在实际的数据中, 我们想放置到某一列的节点并没有与前一列有连线关系, 此时可以创造一根。节点的高度是由其数值决定的, 而节点的数值是由所有连线数据汇总累加, 因此返回的数据中, 需要有一个字段。从后台返回整条链路的数据, 并分别设置高亮与不高亮的节点和连线的样式。, 将该连线隐藏起来, 以此来实现将节点放置在指定列的功能.为 0 的连线, 并利用连线样式。里显示真实的节点数值.
2024-06-27 17:18:35
810
原创 vue2使用TinyMCE7富文本编辑器实现拖拽插入内容功能
思路: 在初始化后的回调方法中, 用样式表 styleSheets 的 insertRule方法修改伪元素的样式。原因: 当调用子组件的 getValue 方法时, 该方法中的。解决: 监听 editor 的变动, 更新父组件的数据。坑: editor.insertContent 失效。会导致 insertContent 方法失效。
2024-05-17 10:56:19
1608
原创 [Vue2+wangEditor] 简单配置实现富文本编辑器图片上传并回显
记录总结本人在配置编辑器的图片上传功能过程中, 遇到的一些问题和要点。
2024-04-10 18:46:24
1847
1
原创 [Vue+Element UI] v-infinite-scroll 无限滚动使用总结
pageSize 设置要超过当前页面显示数据量, 滚动功能才不会出bug。若结合tab页使用, 注意要在切换回调事件里重置数据再请求数据。
2024-02-26 08:49:07
5289
1
原创 [Element UI] table 复选框全部禁用时实现全选禁用
el-table 添加属性 header-cell-class-name , 在属性的回调方法中遍历所有数据, 当数据全部禁用时, 返回 ‘all-disabled’ 类名, 用类的样式将选框置灰.问题: 当表格数据复选框皆为禁用状态时, 全选的复选框仍可勾选, 此时应将禁用。
2024-02-23 15:04:39
3387
1
原创 promise.then链式调用实践运用的心得总结
实践一： 在方法内部可能无需异步操作， 但后面要接链式写法的情况下，用 Promise.resolve() 直接返回 promise 对象(适用于异步操作的前面同时存在同步和异步操作的情况)
2024-02-01 10:33:26
526
1
原创 [Element UI] tabs 标题过长溢出省略并悬浮显示全部内容
spanMouseenter 事件判断内容是否溢出, tabTipDisabled 变量控制悬浮提示的显示.el-tooltip 标签加上 slot=“label” 属性, 使悬浮内容只有在鼠标悬停时显示;思路: 用样式实现溢出省略, 用 el-tooltip 组件达到悬浮时显示的效果。
2024-01-04 17:18:08
1533
1
原创 flex属性适用场景总结
flex 弹性布局是常见的一种自适应布局方式, 父容器的属性控制整体布局，子项属性控制子项布局。这里主要了解常用的 flex 属性的应用及常见问题。
2023-12-14 09:55:53
1153
1
原创 [vue+element] 文字溢出省略并显示提示框
在元素的 mouseenter 事件中, 根据元素的 clientHeight 和 scrollHeight 大小比较来决定包裹元素的 el-tooltip 组件是否显示。在显示的情况下，即内容溢出时，利用 text-overflow: ellipsis;和 display: -webkit-box;效果如下, 文字溢出省略, 鼠标悬浮时显示提示框。
2023-12-07 16:10:08
1938
原创 element目录树组件el-tree使用相关笔记
思路：el-input 的筛选回调为 filterTreeNode，该方法会调用树的 filter方法，然后在 el-tree 绑定一个动态属性 filter-node-method，在相应的值 filterNode方法中，会挨个遍历每个节点的 data，并返回匹配结果。思路: 计算出选中节点的上边框距离父容器的上边框的距离 (offsetTop), 若此距离 h > 父容器高度, 则设置父容器滚动距离 (scrollTop) 为 h。注：此方法的应用前提为树目录非懒加载。
2023-11-13 19:19:02
1969
原创 [Vue+Element UI] 实现树节点标签可编辑功能
1.可编辑：鼠标悬浮出现目录编辑图标，点击编辑图标，弹出树节点名称修改弹出框进行修改，同时弹出框具备校验功能。2.可删除：点击删除图标，删除相对应节点。
2023-10-30 16:09:54
1054
1
原创 封装el-table为可编辑表格
解决：父组件中，可利用 v-if 条件判断，在数据拿回来后，再渲染子组件。提交按钮设置disabled，校验通过才为true。例：子组件中，某个数据依赖父组件发送请求传回的值。（可加上loading防止出现组件区域空白问题）注：直接用prop的值，数据更新正常。
2023-10-30 15:47:45
784
1
原创 Vue环境变量配置与使用
若 process.env.VUE_APP_URL报错undefined, 则可能修改了环境变量而未重新打包。一. 配置环境变量。二. 使用环境变量。
2023-07-20 17:39:36
467
1
原创 input设置type为number,禁止输入e等符号,去除上下箭头
【代码】input设置type为number,禁止输入e等符号,去除上下箭头。
2023-04-17 15:35:51
4292
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人