卡夫卡的小熊猫-CSDN博客

原创 vue中axios从content-disposition响应头获取中文名

响应头的文件，其中可能包含文件名的编码信息。如果你需要解码这个文件名，可以使用JavaScript的内置URL API来处理。Java中用于设置HTTP响应头的，通常在Web开发中，特别是当涉及到文件下载时，会用到这样的设置。以下是一个简单的示例，展示如何使用axios和URL API来解码。，并尝试解析出文件名。如果文件名编码为UTF-8，我们使用。在Vue中使用axios请求文件时，服务器可能会返回带有。如果不是，我们可能需要根据实际编码手动处理。使用axios发送GET请求，并设置。

2024-06-17 14:45:00 297 1

原创 threejs 扩散光圈的实现

使用 CylinderGeometry 创建圆柱，圆柱的顶面和底面隐藏，侧面使用问题贴图材质。在 render 函数中，使圆柱的半径不断变大，使圆柱的材质可见度不断降低，从而实现扩散光圈效果。这里定义一个记录圆柱半径的cylinderRadius变量，和记录材质可见度的变量，然后半径不断扩大，可见度不断降低，让后把这两个变化的属性设置到圆柱对象上，最后在render中调用该函数即可。

2024-06-11 09:15:00 243

原创在Vue项⽬中应⽤TypeScript---vue-property-decorator

在 VUE 项⽬中应⽤ typescript ，我们需要引⼊⼀个库 vue-property-decorator ，其是基于 vue-class-component 库⽽来，这个库 vue 官⽅推出的⼀个⽀持使⽤ class ⽅式来开发 vue 单⽂件组件的库。

2024-06-03 20:15:00 663

原创在Vue项目中使用Proj4js库进行坐标系转换并加载WMTS服务

OpenLayers是一个用于创建Web地图应用程序的JavaScript库。它支持许多不同的地图投影和坐标系，包括常见的Web墨卡托投影（EPSG:3857）和经纬度坐标系（EPSG:4326），以及其他许多本地或自定义的投影和坐标系。要在OpenLayers中转换不同坐标系下的WMTS服务，你需要了解两个主要部分：坐标系的定义和WMTS服务的配置。

2024-05-27 09:45:00 326

原创 css视觉差动

perspective：css3 属性，指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置 transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。视差滚动是一种效果，能够使不同层次的元素以不同的速度进行滚动，从而产生了视觉上的深度感和动态效果。当滚动鼠标滑轮的时候，各个图层以不同的速度移动，行程视觉的效果。

2024-05-20 08:45:00 306

原创解析小程序setData工作原理

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

2024-05-13 14:45:00 1613

原创 typescript泛型

的这一种特征。以函数为例，泛型就是我们在声明一个函数的时候不去指定一个类型，等我们调用的时候再传入一个具体的类型，这样做的。

2024-05-06 10:41:06 528

原创基于实现地图弹窗轮播功能及遇到的问题解决

实现要求：弹窗显示的位置在地图区域中心点位的正上方使用 position 函数表达法point: 鼠标位置，如 [20, 40]。params: 同 formatter 的参数相同。dom: tooltip 的 dom 对象。rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。

2024-04-26 14:00:00 903

原创 Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍

。

2024-04-18 09:43:47 1364

原创 JavaScript 常见的规范异步代码的ESLint 规则

问题在于，如果你将一个async函数直接传递给Promise构造函数，实际上你会得到一个立即解决的Promise，其值就是这个async函数的返回值，而这个返回值实际上是另一个Promise。在 TypeScript 或 JavaScript 中，当你调用一个返回 Promise 的函数时，通常你会想要处理这个 Promise，以确保它能够成功完成或捕获其可能抛出的任何错误。因为JavaScript中的Promise构造函数接受的应该是一个同步的执行函数，它不应该执行异步操作。

2024-04-11 15:45:00 1880

原创 react状态管理库---zustand

一个简单的，快速的状态管理解决方案，api设计基于函数式和hooks安装：让我们实现一个非常简单的计数器案例完成我们的第一个store1- 创建一个counterStorecreate( ) 有三个参数：函数、布尔值、XX可以放任何东西：基本类型值、对象、函数。2- 绑定到组件3- 使用方法选择多个状态切片传递构造一个内部要多个状态的对象。通过可直接修改状态通常建议用 useCallback 来记忆选择器。这将避免在每次渲染时进行不必要的计算。利用 us

2024-04-05 10:15:00 569

原创用户引导插件driverjs的基本使用及弹窗样式修改

className：className用来包装driver.js弹出窗口animate：动画时改变突出显示的元素opacity：背景不透明度(0表示只有弹出窗口，没有覆盖)padding：元素到周围边缘的距离popoverOffset：弹窗与元素偏移距离allowClose：点击覆盖是否应该关闭showProgress：是否显示弹窗进度overlayClickNext：它应该移动到下一步叠加点击doneBtnText：最后一个按钮上的文本。

2024-03-28 16:30:00 2184 1

原创 ES15新特性

例如，Unicode 码点 U+10000（这是 BMP 之外的第一个码点）在 UTF-16 中的编码就是高代理码元 U+D800 和低代理码元 U+DC00 的组合，即 “D800 DC00”。ArrayBuffer 实例的 resize() 方法将 ArrayBuffer 调整为指定的大小，以字节为单位，前提是该 ArrayBuffer 是可调整大小的并且新的大小小于或等于该 ArrayBuffer 的 maxByteLength。使用 u 标志后，你可以匹配和处理任何有效的 Unicode 字符。

2024-03-20 09:15:00 1303

原创 node.js---EJS 模板引擎

模板引擎是分离用户界面和业务数据得一种技术。

2024-03-13 15:00:00 250

原创基于 Vue3 学习状态管理器：pinia

实际上，其实Pinia就是Vuex5，官网也说过，为了尊重原作者，所以取名 pinia，而没有取名 Vuex，所以大家可以直接将 pinia 比作为 Vue3 的 Vuex。通过生成要在组件的 methods 字段中铺开的对象，允许直接使用存储（store）中的操作（action），而不使用合成API (setup())。与 Vue 组合式 API 的 setup 函数相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。

2024-03-07 11:15:00 673

原创 Vue3组件通信

同时，在JavaScript中，该思想被广泛地使用，尤其在Node.js的事件机制中，就是创建了一个EventEmitter实例，具体请自行查阅相关资料。因此，只需要实现一个简单的EventEmitter，并全局传递到每一个组件中，就可以实现一个事件总线了。而全局传递，我们可以使用config.globalProperties绑定到每一个组件，也可以在根组件（main）中，通过provide提供总线，需要使用的组件使用inject注入。当我们有一个应用涉及的组件层数较深时，若涉及到父组件要向其。

2024-02-28 12:00:00 758

原创 Vue3父子组件通信

并绑定一个函数getSonValue来获取传过来的值。

2024-02-22 15:27:11 579

原创 Vue3 props得基本使用

像Vue2一样的那些定义自然还是OK的，比如Number、String等等因为有Ts在，Vue3可以有更方便、快捷的复杂类型定义简单用例比如说现在需要定义一个string[]的prop，那么就像下面这样写})同样地，如果想定义一个类似{name: string, age: number}这样的，可以如下这样写})当然，你也可以把类型分离出去，像这样})函数自然也是可以的，可以像这样})这里使用了vue提供的PropType，前面提到的那几个定义使用PropType来实现当然也是可以的。

2024-01-18 14:47:11 2784

原创 Vue使用vue-img-cropper实现图片裁剪

github地址：https://github.com/TonyXiang/vue-img-cropper。vue-img-cropper是一个可以进行图片剪辑的插件，使用于vue。img：需要插入的img/video/canvas 元素。通过toDataURL方法获取图片base64的值。通过drawImage方法将需要的部分画上去。dx/dy：canvas的开始绘制点位。dw/dh：canvas的绘制区域大小。sx/sy：image的开始绘制点位。sw/wh：image的绘制区域大小。

2024-01-08 09:39:39 1064

原创 H5树组件的开发

是一款轻量级树形选择器，对移动端友好，可拖放，支持键盘快捷键，每个操作动作都有事件记录，与 Vue 高度整合。Vue-Treeselect是一款基于Vue.js的树形选择器，它可以帮助开发者快速构建一个可以多选的树形选择器，支持异步加载数据，支持搜索等功能。默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。要求默认子孩子展开，点击父节点展开、收起树，箭头随收起展开变化，异步请求数据。treeselecte 是一个具有嵌套选项的多选择组件，支持 Vue.js。

2024-01-02 09:49:47 1207

原创小程序嵌套H5

web-view页面的标题取决于H5嵌入页面的title标题，该组件不支持自定义组件导航栏可以通过修改title标题修改导航栏标题document.title = '通讯录'},注意：在微信开发者工具上可能会出现仅在第一次进入h5生效，进入h5后再改title的话并不能修改成功，由于微信开发者工具上不稳定，在上传后真机是可以的。

2023-12-25 15:05:20 5205

原创 WebRPC开发基础流程

每个 `MediaDevicesInfo` 都包含一个名为 `kind` 的属性，其值为 `audioinput`、`audiooutput` 或 `videoinput`，指示它是哪种类型的媒体设备。此时，我们会将从 `getUserMedia()` 收到的数据流连接到 `RTCPeerConnection`。`RTCPeerConnection` 上的事件 `icegatheringstatechange` 会指示 ICE 收集的状态为（`new`、`gathering` 或 `complete`）。

2023-12-21 09:33:32 1422