- 博客(30)
- 收藏
- 关注
RSS订阅原创 ECharts提示框中使用formatter自定义内容时保留小圆点
时，因为它取代了原有的结构，所以默认的小圆点会消失，假如需要保留小圆点也很简单，formatter函数的第一个参数params是tooltip的数据集，在使用ECharts来展示图表时，有时候鼠标滑过需要一个tooltip来展示对应数据，当展示的数据需要携带单位时我们一般会通过。是 ECharts 生成的小圆点，它包含了对应的颜色和图标样式。
2024-09-19 14:02:34
298
原创 【antdv4.0FormItem更新tooltip属性引发的思考】
这大概就是需要满足用户自定义需求的一些弊端吧，毕竟没有千篇一律的模板，其实还废弃了一个名为icon的插槽，哈哈哈，功能嘛就是自定义icon，比较可惜的一个点是直接传递tooltip的属性也被否决了，要说的话其实也是与tooltip插槽功能重叠了，但我个人还是比较喜欢这种，可惜可惜，相关PR讨论在这里。这也就是说即使不提供tooltip属性，通过用户自定义拓展也是可以实现功能的，而且查看ant-design的实现，你会发现他也只是帮你把本该写在外部的tooltip在组件内提前写了。
2023-10-19 23:45:31
450
原创 记一次媒体流文件处理
此次案例的背景是一个通话录音播放下载，大概的流程是向后端请求一个接口，后端返回一个wav格式的文件流，然后使用audio播放/下载录音文件，其实大概一年前做过类似的需求，不过方式是拼接地址直接使用录音的url播放，因为是头一次处理流文件，所以走了很多冤枉路，最后处理的方式其实非常简单，但是因为最初的方向偏了，也是嘎嘎懊悔，南辕北辙啊！下面听我细细道来。
2023-04-10 23:56:47
634
1
原创 vitest 单元测试配合@vue/test-utils 之 axios 篇
vitest 是由 vite 提供支持的极速单元测试框架，VueTestUtils 是 Vue.js 的官方测试实用程序库，Axios 是一个基于 promise 的网络请求库，以上均为各自官网对其的描述。
2023-03-23 22:53:45
1511
原创 vitest 单元测试配合@vue/test-utils 之 router 篇
vitest 是由 vite 提供支持的极速单元测试框架，VueTestUtils 是 Vue.js 的官方测试实用程序库，Vue Router 是 Vue.js 的官方路由，以上均为各自官网对其的描述。再通过 find 方法返回查找元素，trigger 方法触发 DOM 事件，模拟用户点击的操作，同样是因为 VueRouter 的异步性质，我们需要再断言之前完成路由，由于没有可以等待的。第一组测试首先执行了跳转，因为 VueRouter4 异步处理路由，需要告诉路由器何时准备就绪，所以使用了。
2023-03-22 23:18:29
707
原创 vitest 单元测试配合@vue/test-utils 之 pinia 篇
vitest 是由 vite 提供支持的极速单元测试框架，VueTestUtils 是 Vue.js 的官方测试实用程序库，pinia 是 Vue.js 的状态管理库，以上均为各自官网对其的描述。组件通过 find 方法返回查找元素，通过 trigger 方法触发 DOM 事件，模拟用户按下按钮的操作，按下按钮前后都断言了，会判断实际执行结果与预期结果是否一致，如果不一致则会抛出错误。项目中使用状态管理是非常常见的，所以对它也可以来个单元测试，这里我们可能会有两个场景：1. 测试在组件中使用 pinia；
2023-03-21 22:16:25
887
原创 vitest单元测试配合@vue/test-utils之组件单元测试篇
vitest 是由 vite 提供支持的极速单元测试框架，VueTestUtils 是 Vue.js 的官方测试实用程序库，vitest 本身是不支持单元组件测试的，需要配合 test-utils 来完成组件单元测试，安装与基本 API 就不再赘述，学会阅读文档与查找资料是一个程序员的基本功。因为这是很常见的一个问题，test-utils提供了一个快捷方式，可以直接在await后跟触发DOM的事件，省略掉。，如此一来我们断言的实际结果就是自增过后的数字，与预期结果相符，测试用例通过。
2023-03-20 22:32:38
1413
原创 记一次给ant-design-vue组件库提pr的经历
前排围观指路：https://github.com/vueComponent/ant-design-vue/pull/6173参照5W1H分析法解释下为什么要提这个pr？antd看起来是一个组件库，但实际上他的部分组件是在react-component这个仓库中，如下图的antd的package.json，以rc-segmented为例，他还同时引用了rc-motion与rc-util，也就是说看起来是一个组件库，实际上是四个组件库，层层套娃，不过这也不算太大的问题，挨个挨个找，也能达到目的
2022-12-28 11:11:01
600
原创 算法之美-两数之和的n种解法
其实能解的方法还有很多，比如for…in、for…of与数组提供的forEach、map、filter、some、every、find、reduce等方法，可能大家都发现了，虽然用的api方法不一样，但是实现逻辑其实只有两三种，通过遍历比较、查找目标值然后返回索引，下表为各方法用时与内存消耗，仅为本代码测试数据，实际值可能会有不同，测试的时候发现==与===、循环时使用break跳出都会导致最终结果不一致。
2022-12-12 23:50:50
297
原创 枯燥的生活需要每日情话
最近在参加一个up主/博主（不晓得怎么描述哈哈）举办的的mini黑客马拉松（群友自发玩票，图个开心） ，具体是谁就不透露了，免得有打广告的嫌疑tips：黑客马拉松概念源自美国，一群高手云集一堂，几十个小时里开发出一款作品，累了或坐或卧，现场休息，做完当场交作品，是"世界上最酷的开发者狂欢"。当然受困于技术水平（不是高手，上限和下限都很突出）和组织形式（群友自发玩票），没法做到几十个小时不眠不休开发一个作品，所以时间、作品形式都是无限制的；
2022-11-10 00:21:35
518
原创 前端团队协作开发进阶
在团队开发过程中，可能团队成员有的用的vscode，有的用webstorm，有的用atom、hbuildx等等；可能在你的电脑上tab是两个空格，在同事的电脑上tab是四个空格；引入文件有的用单引号，有的用双引号；一行末尾有的加分号有的不加分号；
2022-10-07 16:58:22
442
原创 Vue中使用props时，ts报TS2532: Object is possibly ‘undefined‘的解决办法
在变量后添加非空断言运算符，也就是感叹号！，有时typescript编译器无法确定它在某一点上可能具有什么类型的值，通过在变量后添加！，可以让编译器知道此变量不会未定义或成为null
2022-08-12 14:52:53
9322
原创 Vue嵌入krpano（二）添加热点
前端对krpano全景图添加热点有两种方式，一种是修改xml文件添加hotsport，第二种是通过js操作
2022-07-27 09:53:43
3020
4
原创 vue2版本中使用compositionAPI
vue2的optionsAPI与vue3的compositionAPI孰优孰劣就不再赘述了，萝卜青菜各有所爱，小孩才做选择，大人当然是全都要，vue3中依然可以使用optionsAPI，vue2中也可以使用compositionAPI首先是从npm或者yarn上下载@vue/composition-api这个包npm install @vue/composition-api# oryarn add @vue/composition-api然后在main.js/main.ts里通过Vue.use(
2022-05-27 16:34:01
4398
原创 javascript拖动事件
<!DOCTYPE html><html><head><meta charset="utf-8"><title>文档标题</title></head><body> <div class="box" ondrop="drop(event)" ondragover="dragover(event)"> <p ondragstart="dragStart(event)" ondr
2022-04-22 17:28:02
300
原创 JavaScript高级程序设计学习笔记（一）
<script>元素<script>元素下有八个属性属性示例定义async<script src="" async="async">一旦脚本可用，就异步执行,仅在使用src属性时适用charset<script src="" charset="utf-8">使用src属性指定的代码字符集crossorigin<script src="" crossorigin>配置元素获取请求的CORS，可获取具体
2022-03-06 18:17:00
280
原创 mysql查询中的条件与匹配
select * from user where password like '%1' and id=2-- SELECT * FROM user WHERE password LIKE '%1' AND id=2语句意思为查询user表中所有列里满足条件password结尾为1并且id等于二的数据其中where子句和like子句有蛮多可操作空间，where是在sql中指定条件的子句，可以使用and或or指定一个或多个条件select * from user where id=1 and stat
2022-02-14 14:04:15
1067
原创 服务器端口无法访问
某些特定服务器端口无法访问，在学习node.js时用http模块搭服务器，想设置一个不一样的端口，就选了个6666，但是提示无法访问，最开始以为是哪里写错了，反复检查发现没有问题，试了下换成其他比如5555是可以正常访问的，百度了下，是因为某些协议限制或者浏览器安全限制，一部分端口是禁止访问的 ，如：端口 原因1 tcpmux7 echo9 discard11 systat13 daytime15 netstat17 qotd19
2022-02-08 16:39:42
831
原创 JavaScript正则表达式去除括号但保留内容与去除括号与内容
项目上碰到一个需求，是取多个递增文件的文件名，类似于test(1).txt、test(2).txt，但是不需要括号，只要test1、test2这种格式，最开始想到的办法就是js里的replace替换，先上一个比较笨但是也能实现效果的例子let name = "test(1).txt"let data = name.split('.')[0].replace('(', '').replace(')', '')console.log(data) // test1首先是将name用split()方法分割
2022-01-21 14:03:31
5682
原创 JS中字符串拼接
几个直接的方法let a = 'java', b = 'script', c = ''+a+b+'', // 或者 d = ""+a+b+""console.log(c, d) // javascript javascript/* 注意：外层包裹与内层包裹引号需要一样，即都是单引号或都是双引号 */let e = 'type', f = 'script' g = e + f, h = `${e}${f}`console.log(g, h) // typescript typescr
2021-12-24 14:30:33
537
原创 Vue2与Vue3中的watch使用
Vue2：<template> <input type="text" v-model="age"></template><script> export default { data(){ return { age: 18, sex: { male: '1' } } }, watch: { // 完整写法 age: { immediate: true, // 进入页面
2021-12-22 19:03:25
881
原创 Vue3 computed-计算属性
<template> <p>{{msg}}</p> <input type="text" v-model="val"></template><script setup>import { ref, computed } from 'vue'const msg = ref('666')const val = computed({ get: () => { return msg.value }, set:
2021-12-21 19:46:38
384
原创 Object.defineProperty()与Proxy
let person = { name: 'zs', age: 18}// Object.defineProperty(需要定义属性的对象，需要定义属性的名称，需要定义属性描述符)Object.defineProperty(person, 'sex', { value: '男', // 以下默认值均为false writable: true, // 允许被改变， enumerable: true, // 允许被枚举， configurable: true, // 允许被删除，})c
2021-12-21 14:24:02
192
原创 ts的类型any与unknown
ts中any类型与unknown类型的定义: any // 可以赋予任意类型的值: unknow // 未知类型的值相同点不同点都可以赋予任意类型的值unknown类型的值不能直接赋值给其他变量let anyVal: anyanyVal = 5 // numberanyVal = 'str' // stringlet unknowVal: unknowunknowVal = 6unknowVal = 'str'let strVal: stringstrV
2021-12-05 17:01:16
2402
原创 SIP.js 0.20.0版本简单Demo
SIP.js的0.20.0版本是使用typescript开源的JavaScript库首先从npm上加载SIP.jsnpm install sip.js可以根据习惯使用ts或js来开发<script lang="ts"> import { UserAgent, UserAgentOptions, Registerer, Inviter, SessionState } from 'sip.js' const transportOptions = { server: "w
2021-12-03 16:10:22
4242
原创 JavaScript验证数据是否符合正则表达式
JavaScript验证数据是否符合正则表达式let reg = /.*:.*/g;let val = "5:2";console.log(reg.test(val)) //true
2021-11-02 14:52:20
925
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人