qq_36437172-CSDN博客

原创 JavaScript 通过 URL 获取 MIME类型

getMIMETypeFromExtension函数接受一个文件扩展名作为参数，并返回对应的MIME类型。如果找不到匹配的MIME类型，它返回’application/octet-stream’作为默认值，这通常用于未知类型的二进制数据。在浏览器中，如果您需要动态地根据URL获取MIME类型，您可以使用fetch API 和 Response.headers.get 方法来获取服务器返回的MIME类型。在JavaScript中，您可以使用URL对象和MediaType来获取URL中的MIME类型。

2024-03-13 11:39:57 554

原创 Vue3 实现右击弹出操作选项

通过自定义指令来实现右击弹出操作选项的功能。

2024-03-12 16:15:19 666

原创 Ant-design-vue Table 列表 columns 将作为导出功能入参

引入了 processColumn 函数，用于处理单个列对象。如果列对象具有子列（children），则递归调用 handleExportColumnsData 处理子列，并将处理后的子列添加到结果对象的 children 属性中，从而实现处理多层级嵌套的数据结构。getEnumMap 的第一个入参 type 支持字符串映射 store 中的属性，也可以直接传入枚举值数组，然后使用 reduce 将数组转换为对象，这里 key 和 value 是枚举值数组中的 key、value 字段名。

2023-10-27 11:33:46 490

原创 JS 多字段拼接为字符串，并处理掉 null 的情况

首先使用 map 方法将每个字符串的值提取到一个新数组中，然后使用 filter 方法过滤掉未定义的值，最后使用 join 方法将这些非空的值。上述代码片段中，使用 formatField 用来格式化字段，combineFields 用来组合所有字段，且使用 map 和 join 方法更简洁地组合字段，减少了多次字符串拼接操作。根据多个字段，动态拼接显示 label 字符串，由于字段的值存在 null 的情况，我们又将如何将 null 从字符串中去除呢？

2023-10-27 11:02:16 456

原创日常代码优化实现过程

in 循环来遍历 object 对象的属性，并使用 filter 函数来检查 data 数组中的元素，看它们的 key 属性的值是否包含在 list 数组中。将状态值和对应的消息被提取到了单独的配置对象，函数 handleCheckStatus 接受这些配置对象作为参数，使得验证逻辑与具体的状态值解耦，提高了代码的灵活性和可维护性，并且错误消息的显示逻辑被抽象为了一个独立的函数showWarningMessage，这样可以方便地进行统一的消息显示管理，也增加了代码的可维护性。

2023-10-23 17:15:21 250

原创 JavaScript 将树形结构转换一维数组（递归）

将树形结构转换为一维数组是一个常见的任务，通常使用递归或迭代的方法来完成。flattenTree 函数递归地遍历树的每个节点，并将节点添加到结果数组中。如果节点具有子节点，它会继续遍历子节点。最终，你将得到一个包含树中所有节点的一维数组。getOneArr 使用了递归方法，它接受一个包含树形结构数据的数组 data，并将其转换为一维数组。将数据结构从多维树状结构变成一维数组，然后删除了原始数据中的子节点，最后输出一个一维数组，其中包含了所有节点的数据，同时删除了子节点属性，使其成为一个扁平的结构。

2023-10-20 11:30:12 1401

原创 vue2-org-tree 树型结构的使用

使用 labelClassName API 给 label 上的 class，从而实现定义 label 样式。// 定义 label 样式},我们可以看到常量 colorObj，其对象中的 key 值是定价类型，value 值是所对应的 class 名称。

2023-10-18 16:33:53 862

原创 ant-design-vue table 同时勾选或者取消勾选某字段值相同的数据

使用 rowKey 将其绑定为某个字段（这里指的是我们该字段相同的值同时勾选或者取消勾选的字段），这里的确可以实现样式上的同时勾选，但是 selectedRowKeys 和 selectedRows 都只有一项数据，勾选后统计勾选的数据信息汇总就存在问题了，因此我们如何实现该功能呢？Ant-design-vue 库中 Table 组件 API 有个 rowKey 属性：表格行 key 的取值，既可以是字符串，也可以是一个函数，它在 rowSelection 选择功能的配置中尤为重要。

2023-09-06 16:39:00 983

原创 JavaScript 中根据相同 key 对应的值，将一维数组转换为二维数据

实现思路：遍历 input 数组，使用 obj 对象存储以 code 为 key，遍历项为 value，同时向结果集 result 中添加该数据，如果 obj[code] 已经存在了，直接遍历 result，找到相同的 code，添加 name 到 list 中即可。从 input 和 output 两个数组中可以看出，使用 code 进行分组，将 code 值相同的 name 放入到 list 数组中。上述中我们注意利用了对象 obj 键的唯一性，当然我们也可以使用 Map 来实现。

2023-09-06 11:01:17 341

原创 JavaScript 中根据 key 合并不同的两个数组

将 source 和 target 两个数组合并成为 output 数组。我们可以看到 source 和 target 两个数组是通过 id 对应的值进行合并的，这里使用遍历 target 数组，遍历的每一项都与 source 使用 find 方法去找到对应 source 数据。由于考虑到 source 和 target 数组中可能存在相同的 key, 所以我们使用回调函数将结果返回，默认直接将 source 数据和遍历的 target 项一起返回。

2023-09-05 17:36:42 227

原创 axios 请求和响应拦截器

通过响应拦截器我们用来处理响应异常的接口进行拦截提示，返回对象中会返回一个 succeed 字段来表示接口处理正常还是异常情况，当然也有可能直接返回文件流，因此这里使用的 ‘succeed’ in res 的写法来表示 res 中是否存在 succeed 的 key 来代替 res.succeed。在请求或响应被 then 或者 catch 处理前拦截他们，拦截分为请求拦截和响应拦截。使用 axios.create() 使用自定义配置创建一个 axios 实例。

2023-09-05 11:51:30 863

原创 Ant-design-vue AutoComplete 自动补全组件的使用

AutoComplete 是一个输入框自动完成功能，在输入时提个建议或者辅助提示。

2023-08-15 17:03:05 1268

原创 Table 汇总 handleTableTotal 方法处理

使用 JavaScript 中的 reduce() 方法，对数组中每个元素执行一个 reduce 函数后，将其结果汇总返回值，比如：数值求和、数值中元素出现的次数、数组去重等等。在 JavaScript 计算过程中，因为计算机底层二进制存储的原因导致结果出现精度问题，而 number-precision 第三库就是解决这个精度问题的。针对汇总数据，统一使用 TableTotal 组件中的样式显示。reduce() 方法还可以将数组转换为对象。针对汇总数据，使用函数返回数组格式。

2023-08-15 15:47:13 132

转载 JavaScript 生成唯一标识

Math.random()方法可以生成一个随机数，因为它返回0到1之间的伪随机数，所以我们可以将其与当前的时间戳相乘，生成一个不太可能重复的唯一ID。通过当前时间戳和生成机器码合一起生成的唯一序列号，可以避免生成的唯一序列号重复的问题。获取时间戳后加上随机截取的字母，采用数字加字母的形式，获取唯一标识。

2023-08-14 17:29:04 914

原创 JavaScript 中 toFixed 如何满足四舍五入

JavaScript 自带的 toFixed 方法有时候会出现计算不准确的问题，往往与我们预期的四舍五入有出入，因此我们考虑重构 toFixed 方法。

2023-08-14 17:11:48 760

原创 Tab 标签页下拉菜单相关操作逻辑处理

右击 Tab 标签页显示下拉菜单项，例如：刷新当前页、关闭当前页、关闭左侧、关闭右侧、关闭其他、关闭所有等操作。

2022-11-18 11:44:53 938 1

原创 Dropdown 下拉菜单实现标签页的相关操作

Dropdown 组件是向下弹窗列表。点击或移入触电，会出现一个下拉菜单，可以在列表中进行选择，并执行相应的命令。

2022-11-18 10:26:55 1457

转载 Vue3 实现背景水印功能

在 web 的世界里，对于图片文档等增加水印处理是十分有必要的。水印的添加根据环境可以分为两大类，前端浏览器环境添加和后端服务环境添加。通过 canvas 创建一张含有水印信息的背景图片，通过 hooks 函数插入到页面中。

2022-11-10 17:51:56 1349

转载 git 创建新分支后上传报错 [rejected] test -＞ test (non-fast-forward) 解决方法

原因分析是远程库和本地文件存在差异，因为本地 test 是 develop 分支进行修改，所以直接强制推送。

2022-11-01 20:00:53 818

原创基于 element，阅读 ScrollBar 滚动组件源码

即当 wrap 滚动的时候，thumb 应该向下滚动的距离正好是 transform: translateY(wrap.scrolltop / wrap.clientheight )。thumb 滚动条拖拽处理逻辑：在拖拽 thumb 的过程中，动态的计算 thumb 顶部（左侧）到 track 顶部（左侧）的距离占 track 本身高度（宽度）的百分比，然后利用这个百分比动态改变 wrap.scrolltop 的值，从而触发页面滚动以及滚动条位置的重新计算，实现滚动效果。// 滚动到指定位置。

2022-11-01 19:59:38 748

原创虚拟滚动（Virtual Scrolling）实现

针对大数据列表一般不会一次性加载，会采用上拉加载或者分页的方式展示。如果 10W 条数据，列表对应着 10W 个 DOM 节点，性能方面体验可能会不太好，因此引入虚拟滚动来优化。虚拟滚动：要渲染完整列表对应的高度是通过 [虚拟计算] 的，并不是文档中存在对应的 DON 节点数。只要 [虚拟列表高度] > [列表可视区高度] 时，就会产生滚动条即可发生滚动操作。在滚动操作时，保证 [实际渲染的列表] 一直存在 [列表可视区] 中，并且动态切换需要渲染的列表数据。

2022-11-01 19:56:58 2539

原创 ant-design-vue 库 Loading 组件封装

ant-design-vue 库中 Spin ：用于页面和区块的加载中状态。页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

2022-09-20 18:07:13 3617

原创 Vue 注册组件，抽离 withInstall 方法

在组件中，我们通常需要使用 Vue.component 去注册组件后才能使用。最后，我们引入 withInstall 方法，组件注册方法变得更简洁了。

2022-08-11 11:49:57 2937

转载 npm install 时，出现 cb() never called

npm install 时，解决 cb() never called 问题

2022-07-25 14:28:04 157

转载运行项目时，出现 Syntax Error: TypeError: token.type.endsWith is not a function 的解决方案

问题描述当为项目代码拉取分支后执行npm install下载依赖包，然后执行npm run serve发现项目运行失败，提示信息为SyntaxError: TypeError: token.type.endsWith is not a function。解决方案将 babel-eslint 版本为10.1.0，把版本降为8.2.2，即重新安装指定版本的依赖。npm install [email protected] --save...

2022-03-16 23:35:57 7831 1

转载 git 合并分支时，出现“Please enter a commit message to explain why this merge is necessary”如何退出

git 合并分支时，出现 Please enter a commit message to explain why this merge is necessary 问题解决方案：按i键，进入插入（insert）描述操作，可以选择不输入按Esc键，结束插入描述操作按:wq，表示保存并结束本次操作enter 键即可结束本次错误信息...

2022-03-16 23:31:07 4150

转载 npm install 报错 --ignore-scripts

如果npm install报错，单独安装这个包，加上参数：–ignore-scriptsnpm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! [email protected] install: `node ./build.js`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the [email protected] install script.npm ERR! This is probably not a

2022-02-24 11:40:30 3899

原创 Node 相关 API

Node 的 path.resolve 方法import { resolve } from 'path'function pathResolve(dir: string) { return resolve(process.cwd(), '.', dir)}安装依赖yarn add @types/node --devresolve 方法path.resolve([…paths])里的每个参数都类似在当前目录执行一个 cd 操作，从左到右执行，返回的是最后的当前目录。path.

2022-02-22 17:36:11 407

原创理解 Vue 中的 provide 和 inject

父子组件通过 props 和 emits 来通信。即：父元素通过 props 把数据传递给子元素，子元素通过 emits 通知父元素内部的变化，还可以通过 defineExpose API 的方式暴露给父元素方法，让父元素调用。作用：Vue 还提供了 provide 和 inject API 实现祖先元素和后代元素的通信。使用方法：使用 provide 函数向所有子元素提供数据，子元素内部通过 inject 函数注入使用。使用场景：组件设计内部交互的逻辑，对应子组件提供什么数据，对父组件提供什么方法，

2022-01-28 10:40:32 1072

原创 Vue3 setup 函数中的语法糖

setupsetup 函数结束两个参数：props 和 context 一个普通 javascript 对象，暴露了其他可能在 setup 中的值。export default { setup (props, context) { const visible = toRef(props, 'visible') console.log(visible.value) const { attrs, slots, emit, expose } = context }}at

2022-01-27 10:54:55 2016

原创 JavaScript 中空值判断的常用用法

对项目中的有些空值判断进行容错处理，例如三目运算、|、&、if else 等，下面有几个处理空值的方法：!用 ! 做类型判断，通常用来与变量求布尔值，除了 null、undefined、0、NaN 和空字符串为 true 之外，其余都为 false。// 都为 true!null!undefined!''// 都为false!100!'hello'!!!! 用来做类型判断，对第一次 ! 操作后的类型进行取反，可以简化 null、undefined和空字符串的判断逻辑。va

2022-01-26 14:13:51 2392

原创 Vueuse 工具库中常用的 hooks

在 Vue 2.2 中，我们引入了 model 组件选项，允许组件自定义用于 v-model 的 prop 和事件。在 Vue 3 中，双向数据绑定的 API 已经标准化，以减少开发者在使用 v-model 指令时的混淆，并且更加灵活。Vue2 中的 v-model 使用在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件：<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --

2022-01-26 14:08:18 2645

转载 Ant Design Vue 展开行

只展开当前行table 中重要的属性如下：参数说明rowKey表格行 key 的取值，可以是字符串或一个函数expandedRowKeys展开的行，控制属性。expandedRowRender额外的展开行实现案例如下：const columns = function (h) { return [ { title: "姓名", dataIndex: "name", key: "name", width: 100 }, { title: "年

2021-11-09 20:31:50 1109

转载 JSX 实现动态组件

Vue2 实现动态组件// template<component :is="currentTabComponent" />// JSX<component is={this.currentTabComponent} />实际上，上述 JSX 是不生效的。解决方案方法一const tabData = [ { key: 'weightList', name: '司磅', componentName: 'weight' }, { key: 'quality

2021-11-09 19:56:20 959

原创 tableSearch 组件

table-search

2021-08-29 11:32:12 1212

原创使用 Set 数据结构或 reduce 求并集、交集

const arr = this.tableData.reduce((prev, next) => { prev.push(next.globalInvId) return prev}, [])const brr = data.reduce((prev, next) => { if (arr.includes(next.globalInvId)) { prev.push(next) return prev } return prev}, [])if

2021-08-25 14:30:19 406

原创 antd-vue table 分页缓存已勾选数据

{ {

2021-08-25 11:13:50 2569

原创 antd-vue table 动态添加必填项

import Schema from 'async-validator'async handleValidate () { const length = this.tableData.length for (let index = 0; index < length; index++) { for await (let form of (this.tableData[index].extraInfo || [])) { if (form.required) {

2021-08-25 11:13:21 3393

原创 element-ui Checkbox 多选框如何指定绑定的值

Checkbox 多选框，在单独使用可以表示两种状态之间的切换。在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean。// `checked` 为 true 或 false<el-checkbox v-model="checked">备选项</el-checkbox>我们可以看到的是，绑定变量 checked 为 true 或 false。如果我们想将 true 或 false，转换为 1 或 0，或者 Y

2021-08-20 16:40:51 3479

转载 ant-design-vue select 组件 placeholder 被隐藏不显示问题

问题描述：select 组件绑定了 v-model 和 placeholder，当 v-modal 绑定的属性为空时，select 组件的 placeholder 属性不显示。// 初始化 level = '' <a-select v-model="level" placeholder="选择日志级别" allow-clear> <a-select-option value="info">一般</a-select-option> <a-sele..

2021-05-09 10:32:25 3417