n1234567896-优快云博客

原创 Vue3 项目中的多类型文件预览组件

在现代 Vue 3 项目中，文件预览功能是用户体验的重要组成部分。无论是Word、PPT，还是PDF，提供一个统一的预览解决方案都能够提升用户的交互体验。为了减少开发重复工作量，我创建了一个名为 Office 的组件，作为多种文件类型的预览入口

2024-12-27 14:12:23 1210 4

原创 Vue3 自定义指令开发：实现水波纹效果的 v-ripple

v-ripple指令的主要功能是在用户按下元素（如按钮）时，创建一个动态的水波纹效果。该效果不仅具有视觉美感，还能提供用户良好的交互反馈。以下是水波纹效果的样式定义，可以在index.scsstop: 0;left: 0;width: 0;height: 0;通过本篇文章，我们深入了解了如何在 Vue 3 中实现一个自定义指令v-ripple，它能够为元素提供水波纹效果。这种指令不仅提升了用户体验，还使得按钮等交互元素更加生动有趣。

2024-12-26 14:36:33 830

原创 Vue3 指令开发：自定义去除空格指令 v-remove-space

在日常的输入验证中，用户输入的空格往往是一个常见的问题。为了提升用户体验，我们可以创建一个自定义指令，自动去除输入框内的空格。本文将介绍如何在 Vue 3 中实现一个名为的指令，用于去除 Element Plus 中el-input组件的所有空格。指令的主要功能是在用户输入完成后自动去除输入框中的所有前后空格。通过本篇文章，我们介绍了如何在 Vue 3 中实现一个自定义指令，它能够自动去除el-input组件中的空格。这种指令不仅提高了用户输入的准确性，还提升了整体用户体验。

2024-12-25 16:52:27 1140

原创 Vue3 指令开发：自定义输入处理指令 v-input

v-input在现代前端开发中，用户输入的格式化与验证是一个重要的任务。为了提升用户体验，我们可以通过自定义指令来限制用户在输入框内的输入。本文将介绍如何在 Vue 3 中实现一个名为v-input的自定义指令，用于处理不同类型的输入值，包括数字、数字加小数、数字加两位小数以及自定义规则。v-input数字：仅允许输入数字。数字 + 小数：允许输入数字和小数点。数字 + 两位小数：允许输入数字和最多两位小数。自定义：通过data-rule属性提供的正则表达式来过滤输入值。指令的逻辑主要在。

2024-12-23 17:22:33 608

原创 quill自定义（工具栏、字体大小、字号等）

quill功能拓展及扩展属性quill自定义字号quill自定义字体源代码展示自定义行高图片删除最近一直在使用若依的vue分离版本后台管理，由于项目中需要富文本模块较多及需要自定义添加属性，导致现有的quill富文本不满足需求。经百度对比多个富文本优缺点，最后还是因为quill扩展性强，决定采用了quill，于是便有了下面这篇记录。quill自定义字号自定义字号功能是最先增加的，由于经验不足也踩了不少坑，刚开始网上文章都是让去修改源码来增加字号，自己也照着改了下，刚开始确实没问题，但是随着时间推移，部

2021-08-19 10:30:39 5237 9

原创 javascript实现批量打印

2019-06-17 16:52:47 9643 2

原创 css布局技巧：如何固定页脚在屏幕底部或内容底部

在网页设计和开发中，有时候我们希望将一个元素始终保持在屏幕底部或内容底部，不管内容的高度如何变化。这种布局需求可以通过使用一些CSS技巧来实现。在本文中，我们将来实现这样的布局。值来实现底部元素固定在屏幕底部。属性设置为底部元素高度。值来相应地将元素上移，使其位于屏幕底部。

2024-12-27 14:38:30 438

原创 Vue3 自定义指令开发：实现元素尺寸监测 v-resize

v-resize指令的主要功能是实时监测绑定元素的宽度和高度变化，当尺寸发生变化时，触发指定的回调函数，从而可以根据新的尺寸调整布局或样式。通过本篇文章，我们深入了解了如何在 Vue 3 中实现一个自定义指令v-resize，它能够监测元素的尺寸变化并触发相关回调。这种指令在处理响应式布局时非常实用，可以帮助开发者实时获取元素大小的变化，进而优化用户体验。希望这篇文章能对您在 Vue 开发中的指令使用提供帮助，鼓励您根据实际需求进行扩展和修改，使其适用于更多的使用场景。

2024-12-26 14:21:50 417

原创 Vue3 自定义指令开发：实现长按事件的 v-longpress

指令的功能是，当用户按住某个元素（如按钮）超过指定的时间（默认为 3 秒），将触发一个回调函数。这个功能对需要长按确认的交互场景非常有用。通过本篇文章，我们了解了如何在 Vue 3 中实现一个自定义指令，它能够识别用户的长按操作并触发相应的回调函数。这种指令极大地方便了开发者在交互场景中使用长按功能，提高了用户体验。希望这篇文章能对您在 Vue 开发中的指令使用提供帮助，鼓励您根据实际需求进行扩展和修改，使其适用于更多的应用场景。

2024-12-25 16:55:03 891 2

原创 Vue3 指令开发：自定义表情过滤器指令实现

在 Vue.js 中，自定义指令是一个强大而灵活的工具，允许开发者在元素上添加特定的行为。通过自定义指令，我们可以在 DOM 元素上实现一些特定的功能，比如输入过滤、格式化等。自定义指令的核心逻辑在于过滤输入框中的内容。!？！这个正则表达式的含义是：只允许中文、数字、字母以及少数几个标点符号，其他字符将被移除。通过这个自定义指令，我们可以有效地管理用户输入，确保数据的有效性与安全性。自定义指令的灵活性不仅限于过滤输入，还可以扩展到其他领域，如格式化、验证等。

2024-12-23 17:20:20 375

原创单独html使用Vue3 || 单页面使用Vue3

Vue3中不再构建UMD模块化的方式，因为UMD会让代码有更多的冗余，它要支持多种模块化的方式。Vue3中将CJS、ESModule和自执行函数的方式分别打包到了不同的文件中。在packages/vue中有Vue3的不同构建版本。因为用的时候找了半个小时的方法才找到正确的使用方式，而且百度的时候没有，所以写出来，如果有人跟我一样的话最起码写起来没那么难了。链接：https://www.jianshu.com/p/35d0e4b8e0cc。

2024-12-16 15:35:26 401

原创前端获取ip和IP地址信息

下述代码是搜狐获取ip信息，通过创建script标签，设置src为"下述方法经检验是能获取到信息的，但是查询域名是国外的，待考虑。"，来获取IP信息，然后处理返回的数据。

2024-04-10 17:28:20 818

原创前端开发命名规范

自定义类名一般以短横线“-”或者下划线“_”中的一种作为单词间分割，通常不使用驼峰命名，以此区别于变量。在项目中通常使用scssless来进行样式书写，大大降低了类名重复引发的样式问题。因此我们只需要关注一个模块的外层容器类名。通常采用模块名称-修饰名称的命名方式。

2024-04-10 17:26:37 2291 1

原创 exif.js解决ios手机上传照片后显示为旋转90度问题

然而我发现大家好像都默认浏览器不会对带 EXIF 信息的图片进行回正，当然之前确实不会。但是自从 iOS 更新到 13.4.1 后，浏览器支持自动回正了。在做手机移动端app时，发现iOS12.5.1版本（iphone6）上传照片出现顺时针旋转90问题，iphone11倒是正常，最后发现。转载于：https://blog.youkuaiyun.com/a460550542/article/details/129320703。2.在对应的vue模块引入：import EXIF from “exif-js”;

2023-06-14 14:31:27 946

原创解决vue-template-compiler 版本不一致

[vue-loader] vue-template-compiler must be installed as a peerdependency, or a compatible compilz

2023-05-09 16:24:16 1493 1

原创 vue组件传值

1，父子传值：父组件通过标签上的定义传值，子组件通过props方法接收传值。2，子服传值：子组件通过$emit方法传递参数。3，同级传值：用到bus $emit和bus $on两个自定义事件，但是需要先 new vue下...

2019-07-04 09:55:32 155

n1234567896的博客