- 博客(116)
- 收藏
- 关注
RSS订阅原创 1. 怎么判断容器内元素内容是否溢出了 2. typeof和instanceof的区别
typeof更适合检查基本数据类型，而instanceof更适合检查对象是否属于特定的类或构造函数创建的
2023-10-24 14:01:51
316
2
原创 页面路由离开的时候弹出一个二次确认框 ‘内容尚未保存 是否确认离开’
beforeRouteLeave 是在离开路由前的一些操作，如果不想每个页面都触发。可以不全局引入 单独引入。也可以在beforeRouteLeave里写一个模块名单数组 通过includes自己做判断。这样就可以在其他页面正常调用 clickToLeaveToCancel 方法了。当用户的表单还未保存内容就退出或切换路由的时候，可以使用。表单是很多模块都有的 所以我使用了全局混入的办法。不是全部都需要引入 但是数量较多 不适合单独引入。拦截路由跳转，打出二次确认框。
2023-10-09 10:56:10
695
2
原创 ‘if else‘ OR ‘map‘ 应该如何选择
根据 key 给 approvalType和this.store.type.approvalType 赋予一个状态码。看的出来这个方法主要是做三件事。给小伙伴 cr 代码 ～
2023-09-18 16:16:39
160
原创 在 Vue 的 mounted 钩子函数中使用异步函数是否会有风险需要考虑
使用 await,执行时不会blocking,但获取数据时组件已渲染。所以,如果获取标签配置数据非关键,可以使用异步函数,但需要注意加载状态。如果是关键数据,建议使用同步函数获取,甚至提前获取,以免影响组件的渲染。这个修改可以避免异步函数的一些风险,确保组件只在数据获取完成后才渲染。如果异步请求时间过长,组件会先渲染,导致页面空白或显示不正确。获取数据失败会直接抛出异常,可以明确错误来源。- 直接返回数据,组件渲染需等待执行结束。组件渲染会等待数据就绪,避免空状态问题。改为同步函数,直接返回结果。
2023-09-14 10:55:59
818
原创 实现JavaScript流式下载
ReadableStream 接口的 pipeTo() 方法通过管道将当前的 ReadableStream 中的数据传递给给定的 WritableStream 并且返回一个 Promise，promise 在传输成功完成时兑现，在遇到任何错误时则会被拒绝。用于处理 Fetch API 返回的响应，或者开发者自定义的流（例如通过 ReadableStream() 构造的流。传输一个流时通常会在传输的持续时间内锁定这个流，以阻止其他 reader 锁定它。是浏览器提供给 JS 的流式操作数据的接口。
2023-07-25 15:31:23
1113
原创 Tree 树形控件 父级不显示复选框并且show-checkbox可以切换单选多选
Tree 树形控件用清晰的层级结构展示信息，可展开或折叠。
2023-04-10 11:19:18
1324
1
原创 希望在 template 元素中的插槽名称 default 是动态的
希望在 template 元素中的插槽名称 default 是动态的，可以使用 v-bind 指令将插槽名称绑定到一个变量上。以下是一个示例，展示如何使用动态插槽名称：在上面的示例中，我们使用了 v-for 指令动态生成插槽，并使用 v-bind 指令将插槽名称绑定到 item.slotName 变量上，这样就可以根据每个 item 的 slotName 动态生成插槽。在插槽中，我们使用了 slot-scope 属性来访问插槽中的 row 变量，以便在模板中使用它。我们还使用了 v-for 指令动态生
2023-03-30 16:33:01
361
原创 使用Vue.Draggable的自定义拖拽表单是如何实现的
Vue.Draggable 是一款基于 Sortable.js 实现的 vue 拖拽插件，实现组件化的思想，可以结合 Vue，使用起来更方便如果是单列拖拽用vue.draggable group 拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽。比如 group 都为 componentsGroup 的组之间可以相互拖动，本文例子中 A 列和 B 列可以相互拖动，但是无法拖到 C 列。设置方式，object，也可以通过自定义函数 function 实现复杂的逻辑。
2023-03-08 16:40:08
1638
原创 怎样监听 ESC 键 完成一个弹框关闭
按下Esc键时，将会触发keyup.esc事件，也可以使用v-on指令监听该事件并做出相应的处理。方法来监听键盘事件，然后在检测到ESC键按下时，调用关闭弹框的方法来实现关闭弹框的功能。在Vue中，可以通过监听窗口上的键盘事件来实现ESC键关闭弹框的功能。例如，可以在组件的mounted() 钩子函数中使用。
2023-03-02 10:15:17
2982
原创 vxe自定义表头设置+前端本地数据存储
是所有列的数据 既用于渲染动态表格 也用来渲染操作栏type : 'seq' , title : '序号' } , {field : 'cnName' , title : '中文名称' , slots : {field : 'enName' , title : '英文名称' , slots : {field : 'enShortName' , title : '英文简称' , slots : {field : 'positionLevelStr' , title : '职位级别' } , {
2023-02-28 14:41:02
2726
4
原创 vue按钮防止短时间内多次点击怎么做
2秒后，按钮会被重置，disabled属性会被设置为false，背景颜色被设置为#002FA8，边框被设置为1px solid #002FA8，鼠标样式也会被设置为pointer。当用户点击按钮时，按钮的disabled属性会被设置为true，并且按钮的背景颜色会被设置为#ccc，边框会被设置为none，鼠标样式也会被设置为not-allowed。这段代码定义了一个Vue指令，名为preventReClick。它的作用是防止用户在2秒内重复点击某个按钮。在main.js里引用。
2023-01-06 10:21:47
1401
2
原创 优化代码要注意哪些方面
计算属性：计算属性是 Vue 组件中的可观察属性，它可以根据其他属性的值自动计算出新的值。在代码审查时，可以关注计算属性的名称、类型、功能等。组件：组件是 Vue 中的基本构建块，可以将其视为可重用的 UI 片段。在代码审查时，可以关注组件的结构、命名、设计、功能等。在代码审查时，可以关注模板的结构、语法、命名、设计等。在代码审查时，可以关注事件处理函数的名称、参数、功能等。在代码审查时，可以关注数据的结构、类型、命名、初始化等。确保 Vue 代码使用合理的组件结构, 并使用清晰的命名方式。
2022-12-28 14:27:34
494
原创 JavaScript判断变量是否为undefined的两种写法
如果要判断一个变量是否未定义（既未声明也未赋值），可以使用 window.variable 来进行判断，如果变量未定义，则会抛出一个 ReferenceError 错误。操作符来判断一个变量是否为 undefined 类型。来判断一个变量是否为 undefined。也可以使用严格相等运算符。因为它会在比较之前进行。，可能导致意外的结果。
2022-12-26 10:47:28
4990
2
原创 vxe-column 上的 formatter 怎么用
想在 vxe-table 组件的 vxe-column 列中格式化时间，可以使用。这样，你就可以在 vxe-table 的 vxe-column 列中格式化时间了。来格式化时间，你需要安装 moment.js 库才能使用它。例如，如果你想将时间格式化为。注意：上面的例子使用了。
2022-12-23 11:45:32
2864
原创 Vue 中获取当前时间并实时刷新
在 Vue 组件中使用 JavaScript 内置的 setInterval 函数实现。可以在组件的 created 钩子函数中设置一个定时器，每隔一段时间就更新组件的数据。使用 Vue 的计时器指令 v-bind:interval。这个指令可以在模板中绑定一个数据，每隔一段时间就更新绑定的数据。注意：如果使用计时器指令，要确保 Vue 版本为 2.6.0 或以上。
2022-12-22 13:54:15
4577
1
原创 下拉框包含树结构
this.addDisabledTag(treelist, 当前部门详情id, false);option form.obj // {name:‘财务部’,id:1}select form.obj.name // 财务部。进入部门详情时 出现 ‘上级部门’ （现在写的组件 下拉树）clear // 可清空的单选模式下用户点击清空按钮时触发。clearable // 是否可以清空选项。禁止选择 当前部门 和 当前子部门。清除树选中结构 下拉数据也会消失。根据业务情况 选择禁用。
2022-11-21 10:32:03
347
原创 日期开始时间不可晚于计划结束时间
change_start_value和change_end_value是选择器change方法 但是需要默认调用。所以我需要在change_start_value的时候 就调用 change_end_value。同理 当我们先选择结束日期的时候 也没有触发 change_start_value。change_end_value内部会判断 如果有开始日期 就触发我们的禁用规则。选择开始时间 触发 change_start_value 之后。开始日期发生了改变 触发change_end_value函数。
2022-10-27 10:29:12
703
原创 树形结构数组的处理
用于 JavaScript 的小型、安全、URL 友好、唯一的字符串 ID 生成器。scoped不生效，将样式放全局，在当前组件加上一段不带scoped的style。
2022-10-03 18:14:19
424
原创 父相子绝 巧用auto
在我脑海里 父相子绝的定位 top100% 跟 bottom0% 是一个位置。我不想要top100 ，但是不写top就会被下面覆盖。同时有 top 跟 bottom 定位不生效。父元素相对定位 子元素绝对定位 子相对父。这是 bottom0% 的效果 在里头。今天遇见一个css的坑 让我改了好久。一时间进退两难 写也不行 不写也不行。这是top100% 的效果 出去了。因为我想要的是相对下0%组件自带样式是下面那个。最后有大佬提醒才想起来。但 左右是 上下不是。
2022-09-14 15:44:35
153
原创 Cascader 级联选择器 最后一层不出现空白
children 指定选项的子选项为选项对象的某个属性值。“regions”: [] 为空 最后一级会出现空白。value 指定选项的值为选项对象的某个属性值。label 指定选项标签为选项对象的某个属性值。写一个方法 数组如果为空 返回undefined。
2022-09-13 14:12:45
423
原创 如何更改表单必填红星的位置，*废弃css属性
猜也能猜出来 是在 el-form-item__label 之前 插入 红色的 content ，content内容是。::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
2022-09-08 13:54:54
3547
3
原创 vscode快乐编译，打开源文件
要启用，请在tsconfig或jsconfig的“compilerOptions”属性中配置“jsx”：“preserve”。要禁用此提示，请在“vueCompilerOptions”属性中配置“experimentalDisableTemplateSupport”：true。看数据很方便，都不知道可以选中组件 code直接打开对应文件，用vue这个扩展小程序真的很方便 能快速排查很多错误。各位同学有没有遇见过这样的情况，接手老项目，无人交接，需要紧急上需求但短时间找不到页面对应文件的场景。
2022-09-01 10:54:43
688
原创 vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: “TypeError: handler.call is not a fun
查看页面相关 生命周期钩子函数 是否有 声明了未定义方法 或是 只声名了钩子函数。从报错的handlers[i].call 入手查找原因。这个错误是 调用相关的生命周期钩子函数引起来的错误。提示报错了 但是页面可以正常显示 不影响功能。把钩子删除，或是把定义的方法写完全了就可以了。...
2022-08-13 11:12:35
2117
原创 通过字体长度来模拟input宽度 vue
HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea，使用contentEditable属性后，可以在div,table,p,span,body,等等很多元素中输入内容．。
2022-07-25 15:47:56
371
1
原创 表格数据错乱 - 关于 vue2.0的 key 值
最近在项目中遇见一个bug - 关于key值表格一 为模拟初始数据表格二为筛选后结果当筛选项的值为"路人甲"时 表格会多一列 “city”关于是否有city这列是从筛选值获取这里我们可以通过计算属性给列添加v-if 来判断显示与隐藏（一开始尝试的v-show发现不生效，应该是组件库的原因）但是我在项目中遇见一个奇妙的bug在我切换表格列时 可能会出现数据错乱错误示例：数据是从后端接口里直接拿的本地也打过断点调试 是没问题的经过研究 发现问题出现在key上解决办法是:key=Math.random()给列加
2022-07-13 13:54:37
1153
原创 解决异步接口慢导致的数据错乱问题
bug场景复现通过下拉框筛选表格数据快速筛选或者第一次筛选后，在数据还没返回来的时候马上又切换下拉框 筛选结果和筛选关键字不匹配查看后端的接口 返回数据无误 基本可以判断是慢接口请求的问题由于前一次请求服务器返回数据比较慢，还没等第一次请求返回结果，后一次请求就发起了，并且迅速返回了结果，这时表格肯定显示后一次的结果；过了几秒，第一次请求的结果才返回，这时表格的数据又被第一次请求的结果覆盖 导致筛选结果和筛选关键字不匹配最终导致了这个bug最直观的方案就是再发起第二次请求之后，如果第一次请
2022-07-01 10:06:14
958
2
原创 数组自带的方法
at() 方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数Array.prototype.concat()concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组...
2022-06-16 16:52:45
120
3
原创 echarts 环形图 and 柱状图 legend 过多导致的堆叠
就很好用 如果不是业务有硬性要求 我觉得这样就挺好。把图的位置 往上移动 给legend留出位置。通过在grid更改大小 留出位置。
2022-06-15 14:50:32
1753
原创 npm 如何发包 删包
npm unpublish 命令只能删除72小时以内发布的包npm unpublish 删除的包，在24小时内不允许重复发布
2022-06-12 19:34:57
238
1
原创 刷新下拉框的值和阻止事件冒泡
示例：迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。当vue的选中值 但是没有发生变化 可以加change事件 强制刷新。阻止事件冒泡 只需要要点击事件后面加上.stop即可。
2022-06-09 16:16:40
392
原创 echarts - 柱状图常见问题
借助图形化的数段，清晰有效的传递和沟通信息，以视觉的方式展现数据，便于用户的认知，偏于图表的样式，相对于文字说明更加直观代码如下（示例）：2.读入数据代码如下（示例）：该处可以加入窗口自适应二、如何制作一个纵向堆叠柱状图1. legend 展示2. 纵轴加单位3. 显示tooltip 层级被压4. tooltip中如何获取百分比5. tooltip中如何展示全部数据更改样式可以用模板字符串加入class需要 deep scoped重要属性参考文章 ：https://blog
2022-06-08 20:26:25
972
2
原创 如何清除 mac chrome 的 dnc缓存
How to Clear DNS Cache on Google ChromeURL:chrome://net-internals/#dns点击 Clear host cache 使用的是 macOS 版本 10.11 或更高版本终端命令 sudo killall -HUP mDNSResponder
2022-04-19 14:12:03
736
原创 JS实现对中文字符串的转码
如何进行Base64转码解码转码 window.btoa()解码 window.atob()// 可以编码、传输和解码操作各种字符，比如0-31的ASCII码值var str = 'Hello, smart, beautiful and lovely girl';window.btoa(str)//转码结果 'SGVsbG8sIHNtYXJ0LCBiZWF1dGlmdWwgYW5kIGxvdmVseSBnaXJs'window.atob("SGVsbG8sIHNtYXJ0LCBiZWF
2022-04-15 11:54:54
4490
4
原创 vue的子组件在created/mounted里获取不到prop的值
props: { instance: { type: String, required: true } },instanceID的值明明传过来了 但是在created里却获取不到推荐写法 使用watch监听 instance: function(newVal, _oldVal) { this.instanceId = newVal; //在这里调用 created 里面的函数 }...
2022-04-11 15:26:45
5115
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人