MakerZz-CSDN博客

原创 vue3中css+js实现鼠标滚轮缩放和拖拽移动(支持文本/图片/表单/表格等各类页面内容)

vue3中实现滚轮缩放和拖拽移动的鼠标交互效果。通过监听wheel事件实现缩放（调整scale属性），通过mousedown和mousemove事件实现拖拽（调整transform属性）。组件动态配置项：1）尺寸、内容、缩放比例等；2）采用插槽设计支持复杂内容嵌套。含节流性能优化，代码完整展示了事件监听、样式控制、状态管理等核心实现，适合直接复用或二次开发。

2025-09-09 00:10:28 447

原创 css虚线及虚线滚动动画效果实现（含圆角弯折虚线）

CSS绘制虚线：1）border属性快速创建基本虚线；2）通过repeating-linear-gradient实现可自定义线段和间距的虚线；3）添加animation属性使虚线产生滚动动画效果。4）圆角连接。文章详细说明了每种方法的实现代码，包括横向、纵向虚线设置。这些方法可灵活组合，满足不同场景下对虚线样式、间距和动态效果的需求。

2025-09-03 04:10:12 410

原创 vue3+element plus通用公共表单组件（支持ts）

通过基于element plus封装的公共表单组件，只需在要展示表单的容器内将本组件引入，搭配对应的配置项来描述表单内的相关信息（如表单内的展示文本、表单控件类型、校验方式等），就可以实现一个组件满足多种展示需求，从而提升开发效率和代码的可扩展性。

2024-04-27 20:06:01 3260 4

原创 vue3全局属性/方法的创建及使用--app.config.globalProperties(支持ts)

有时一些属性值或方法想要在很多个组件中被使用，且想要进行统一管理，此时就可以将这些属性值或方法注册在能够被应用内所有组件实例访问到的对象中。我们将想要全局使用的属性或方法注册在app.config.globalProperties对象中，就可以在应用内的任意组件中使用。

2024-04-21 03:28:27 10961 5

原创 vue3+vite配置项--@别名

当使用 npm create vite@latest 命令创建了vue3+ts的项目，想要在项目内引入文件时使用@来作为src的别名。如果直接使用@，会报错，需要引入@types/node依赖并在相应文件中进行配置才可正常使用@。

2024-04-14 00:59:34 1124 2

原创 vue3/vue2页面元素尺寸自适应实现(postcss-pxtorem)

自适应实现(postcss-pxtorem)；针对vue3+vite（支持ts）、使用webpack的vue3、vue2项目；报错解决：PostCSS plugin postcss-pxtorem requires PostCSS 8；当pc端或移动端H5等项目中需要根据当前浏览器窗口或屏幕尺寸来自适应的改变页面内元素尺寸时适用

2024-04-07 00:58:52 2858