theMuseCatcher_社区达人页

2024年08月

• 08.29 20:49:31
  发表了文章 2024-08-29 20:49:31

  Vue3标签页（Tabs）

  该组件提供可自定义的标签页功能，支持居中显示、不同尺寸与样式，并能设置当前激活选项。其主要属性包括标签页数组、居中显示、尺寸、样式、间隙及激活键值。示例展示了基本使用、卡片式标签页、禁用选项、左右滑动等功能。组件基于Vue3开发，并利用`useResizeObserver`等技术实现。[在线预览](https://themusecatcher.github.io/vue-amazing-ui/guide/components/tabs.html)。

  
• 08.29 20:47:56
  发表了文章 2024-08-29 20:47:56

  Vue3表格（Table）

  这是一个基于 Vue2 的表格组件，支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。

  
• 08.29 20:46:48
  发表了文章 2024-08-29 20:46:48

  Vue3使用触摸滑动插件（Swiper）

  本文介绍如何在Vue2项目中使用Swiper插件实现触摸滑动功能，并封装了两种轮播图展示形式：首页轮播图（`type: banner`）和走马灯轮播图（`type: carousel`），以及信息展播模式（`type: broadcast`）。支持自定义轮播图片、区域尺寸、动画效果等属性。通过示例代码展示了不同切换动画及自定义效果，并提供了在线预览。适用于多种应用场景，提升用户体验。

  
• 08.29 20:45:08
  发表了文章 2024-08-29 20:45:08

  Vue3评分（Rate）

  这是一个基于 Vue 3 的评分组件 `Rate.vue`，支持多种自定义设置，包括是否允许清除、半选状态、星星总数、字符样式、字符大小、选中颜色、字符间距及是否禁用等。组件内置四种 SVG 图标，并允许使用自定义字符。通过 `v-model:value` 实现双向绑定，并提供了 `change` 和 `hoverChange` 事件回调。 组件演示了不同的使用场景，如禁用状态、不同形状的图标、自定义字符和颜色等。同时提供了一个评分配置器，可以动态调整各项参数以满足不同需求。在线预览效果展示了各种配置下的评分显示样式。

  
• 08.29 18:56:40
  发表了文章 2024-08-29 18:56:40

  Vue3二维码（QRCode）

  这是一个可高度定制的二维码生成组件，支持在线预览。提供了丰富的属性设置，包括扫描文本、二维码大小、颜色、背景色、边框、边框颜色、像素比例及纠错等级等。安装简单，通过 `pnpm` 引入插件，创建 `QRCode.vue` 组件即可使用。适用于多种应用场景，如生成不同样式的二维码、动态调整大小和内容等。

  
• 08.29 18:55:29
  发表了文章 2024-08-29 18:55:29

  Vue3数字输入框（InputNumber）

  这是一个可定制的数字输入框组件，支持设置宽度、最小值、最大值、步长、精度等属性，并可添加前缀图标及自定义显示格式。组件兼容键盘快捷键操作，具备禁用功能。示例代码展示了如何使用该组件实现不同场景下的数值输入与格式化展示。组件还利用 `add` 函数解决了 JS 精度问题，并通过 `useSlotsExist` 监听插槽。

  
• 08.29 18:54:15
  发表了文章 2024-08-29 18:54:15

  Vue3图片（Image）

  该图片预览组件提供丰富的功能，包括设置鼠标悬浮预览文本、图像描述、尺寸调整、适应容器模式等。支持单张或多张图片展示，具备旋转、缩放、镜像等功能，并可通过键盘或滚轮控制。组件允许自定义多项属性，如图像地址、宽度、高度、边框显示等，并兼容多种使用场景，如相册模式和循环切换。组件内部使用了 Vue3 的 `Spin` 和 `Space` 组件以及 `add` 函数辅助实现。

  
• 08.29 18:52:49
  发表了文章 2024-08-29 18:52:49

  Vue3空状态（Empty）

  这是一个可高度定制化的空状态组件，支持自定义描述内容、描述样式、图片显示方式及样式、底部内容等属性。提供两种预设图片风格（filled/outlined）或自定义图片链接。在线预览与详细代码示例可见[此处](https://themusecatcher.github.io/vue-amazing-ui/guide/components/empty.html)。组件使用了`useSlotsExist`工具函数来判断插槽是否存在。通过简单配置即可实现多样化的展示效果。

  
• 08.29 18:51:17
  发表了文章 2024-08-29 18:51:17

  Vue3分割线（Divider）

  这是一个可定制的分割线组件，支持多种属性设置，包括标题位置、边距、宽度、样式、颜色及垂直分割等。通过简单的配置即可实现多样化的视觉效果，适用于不同场景下的布局需求。在线预览和详细代码示例可见链接。

  
• 08.29 18:50:02
  发表了文章 2024-08-29 18:50:02

  使用requestAnimationFrame模拟实现setTimeout和setInterval

  `rafTimeout` 函数采用 `requestAnimationFrame` 实现延时或周期性调用，提供与 `setTimeout` 和 `setInterval` 类似的功能。接受参数包括要执行的函数 `fn`、延迟时间 `delay`（默认 0ms）及是否周期执行 `interval`（默认为单次执行）。返回值为包含 `id` 的对象，可用于取消定时器。通过 `cancelRaf` 或 `cancelAnimationFrame` 方法可取消对应的 `rafTimeout` 定时器。

  
• 08.29 18:48:56
  发表了文章 2024-08-29 18:48:56

  Vue3开关（Switch）

  这是一个可高度定制的开关组件，支持设置选中与未选中时的内容、值、大小、加载状态、禁用状态及点击波纹颜色等属性。组件提供了多种尺寸选择，并允许自定义图标与样式，适用于多种场景下的开关功能实现。[在线预览](https://themusecatcher.github.io/vue-amazing-ui/guide/components/switch.html)展示了其丰富的配置选项和实际效果。

  
• 08.29 18:47:39
  发表了文章 2024-08-29 18:47:39

  Vue3步骤条（Steps）

  这是一个基于 Vue2 的步骤条（Steps）组件，支持多种自定义属性，如步骤数组、宽度、大小、垂直显示、标签位置等。通过 `v-model` 可实现步骤的动态切换和点击交互。提供了丰富的样式调整选项，适用于各种场景下的多步骤流程引导。组件内详细展示了如何创建和使用步骤条，并提供了多个示例代码片段。

  
• 08.29 18:46:14
  发表了文章 2024-08-29 18:46:14

  Vue3加载中（Spin）

  该加载组件 `Spin.vue` 可高度自定义加载状态，包括是否显示加载 (`spinning`)、尺寸 (`size`)、描述文案 (`tip`)、加载指示符 (`indicator`) 及其颜色 (`color`) 和其他细节参数。支持多种加载样式如点、线、圆环等，并允许调整动画速度和初始旋转状态。组件基于 Vue 构建，易于集成到任何项目中，提供丰富的视觉反馈。

  
• 08.29 18:45:05
  发表了文章 2024-08-29 18:45:05

  Vue3滑动输入条（Slider）

  这是一个可高度定制的滑动输入条组件，支持多种配置选项，如宽度、最小值、最大值、是否禁用、双滑块模式等。主要功能包括点击滑动条快速定位并获取数值、拖动滑块调整数值、键盘操作调整数值以及自定义Tooltip显示格式。组件通过监听DOM尺寸变化来动态调整布局，并利用requestAnimationFrame优化动画效果，提供了丰富的交互体验。在线预览和详细代码示例可见[这里](https://themusecatcher.github.io/vue-amazing-ui/guide/components/slider.html)。

  
• 08.29 18:32:47
  发表了文章 2024-08-29 18:32:47

  Vue3进度条（Progress）

  这是一个基于 Vue2 的进度条组件，支持线性 (`line`) 和圆形 (`circle`) 两种模式。可通过多种属性自定义进度条的样式和行为，包括宽度、进度百分比、颜色、线宽、线帽样式等。此外，还支持显示进度文本或图标，并允许通过插槽自定义内容。该组件提供了丰富的配置选项，适用于多种应用场景。

  
• 08.29 18:26:33
  发表了文章 2024-08-29 18:26:33

  Vue3信息提示（Modal）

  这是一个基于 Vue2 的信息提示模态框组件，支持多种弹窗类型（如 info、success、error 等），并提供丰富的自定义属性，包括按钮文本、按钮类型、居中方式等。该组件可根据内容自动调整高度，并兼容不同按钮样式配置。预览效果展示了不同类型的模态框及其样式。代码中详细介绍了组件的实现方式和使用方法。

  
• 08.29 18:24:08
  发表了文章 2024-08-29 18:24:08

  Vue3对话框（Dialog）

  该 Vue2 对话框组件提供丰富的可定制属性，如标题、内容、宽度、高度等，并支持自定义按钮文本和样式。其预览效果展示了多种使用场景，包括全屏切换、加载状态及自定义样式等。该组件适用于各种需要弹窗功能的应用场景。[在线预览](https://themusecatcher.github.io/vue-amazing-ui/guide/components/dialog.html)提供了更多实例。此文章详情见原文链接，若涉及版权问题，请告知以便删除。

  
• 08.29 18:23:03
  发表了文章 2024-08-29 18:23:03

  Vue3日期选择器（DatePicker）

  该组件基于 **@vuepic/vue-datepicker@9.0.1** 进行二次封装，简化了日常使用。除范围和年选择器外，其他日期选择均返回格式化的字符串。提供了多种自定义设置，如日期选择器宽度、模式、格式等，并支持时间选择和“今天”按钮展示。详细配置及更多功能请参考[官方文档](https://vue3datepicker.com/installation/)。组件已集成所有原生属性，并支持主题颜色自定义。 示例代码展示了如何创建和使用日期选择器组件，包括基本使用、禁用日期、日期时间选择器、范围选择器等多种场景。更多功能和样式可通过官方文档了解。

  
• 08.29 18:21:47
  发表了文章 2024-08-29 18:21:47

  Vue3走马灯（Carousel）

  这是一个基于 Vue2 的走马灯（Carousel）组件，支持丰富的自定义配置。主要属性包括图片数组、宽度、高度、自动切换、暂停轮播、过渡效果、轮播间隔、箭头和指示点等。组件提供了多种过渡效果（如滑动和渐变）及动画时长设置，并允许自定义箭头和指示点的样式。此外，还支持通过键盘方向键进行切换，提供了灵活的使用方法。

  
• 08.29 18:20:29
  发表了文章 2024-08-29 18:20:29

  Vue3级联选择（Cascader）

  这是一个可定制的级联选择器组件，支持多级下拉选项。主要属性包括：数据源、文本字段、值字段、后代字段、占位符文本、选择行为、间距、宽度、高度、禁用状态、清除功能、搜索功能及过滤函数等。组件可根据需求灵活配置，并支持动态更新与事件回调。在线预览和详细示例可见[这里](https://themusecatcher.github.io/vue-amazing-ui/guide/components/cascader.html)。

  
• 08.29 18:19:19
  发表了文章 2024-08-29 18:19:19

  Vue3选择器（Select）

  该文章介绍了一个基于 Vue2 的选择器组件 `Select`，具备丰富的自定义属性，如选项数据、占位符文本、是否禁用、是否支持清除和搜索等。支持自定义过滤函数，并可调整下拉面板的高度、宽度及显示项数。组件内部集成了 `Empty` 和 `Scrollbar` 组件以增强功能性和用户体验。示例代码展示了如何创建和使用该选择器，包括基本使用、禁用选项、支持清除与搜索等功能。

  
• 08.29 18:17:14
  发表了文章 2024-08-29 18:17:14

  Vue3折叠面板（Collapse）

  该组件提供了一个高度可定制的折叠面板，支持多种属性设置，包括折叠面板数据、激活状态、禁用选项、边框风格、复制功能等，并可通过插槽进行进一步自定义。其丰富的样式控制选项使得面板能够适应各种场景需求。在线预览展示了不同配置下的效果。组件基于 Vue 3 开发，利用 `requestAnimationFrame` 模拟实现动画效果，并集成了按钮等其他自定义组件。

  
• 08.29 18:16:03
  发表了文章 2024-08-29 18:16:03

  Vue3单选框（Radio）

  这是一个可高度定制的单选框组件，支持多种配置项，如单选元素数据、禁用状态、垂直排列、间距、按钮样式及大小等。组件具备普通与按钮样式，并可根据需求调整样式风格。提供了丰富的示例代码及在线预览，便于理解和使用。

  
• 08.29 18:14:51
  发表了文章 2024-08-29 18:14:51

  Vue3多选框（Checkbox）

  这是一个可高度定制的多选框组件，支持多种属性设置，如复选元素数据、是否禁用、垂直排列、当前选中值、间距、展示区域宽高及全选样式控制等。提供了在线预览和示例代码，便于快速集成与自定义。

  
• 08.29 18:13:27
  发表了文章 2024-08-29 18:13:27

  Vue3通知提醒（Notification）

  这是一个基于 Vue2 的通知提醒框组件，支持高度自定义设置，包括消息标题、自动关闭延时、弹出位置等。提供了五种样式：默认、信息、成功、警告和错误，并可通过不同方法调用以实现相应样式。组件还支持多种位置设置，如顶部左侧、顶部右侧、底部左侧和底部右侧，并允许调整与屏幕边缘的距离。

  
• 08.29 18:12:12
  发表了文章 2024-08-29 18:12:12

  Vue3全局提示（Message）

  这是一个可定制的消息提示组件，支持自动关闭延迟及消息位置设置。通过调用不同方法（如 `info`, `success`, `error`, `warning`, `loading`）展示多种样式的消息提示，并按顺序自动关闭。组件效果包括在线预览及具体示例。组件基于 Vue 开发，并利用 `requestAnimationFrame` 实现延时功能，可在页面中轻松集成与使用。

  
• 08.29 18:11:01
  发表了文章 2024-08-29 18:11:01

  Vue3文字提示（Tooltip）

  这是一篇关于 Vue2 文字提示（Tooltip）组件的教程，支持多种自定义属性，如最大宽度、展示文本、提示文本、样式、背景色、箭头显示等，并提供了在线预览示例。组件通过监听插槽和 `requestAnimationFrame` 实现了延迟显示与隐藏效果。文章详细介绍了组件实现代码及在页面中的使用方法。

  
• 08.29 18:09:43
  发表了文章 2024-08-29 18:09:43

  Vue3按钮（Button）

  这是一个高度可定制的按钮组件，支持多种属性设置，包括按钮类型、形状、图标、尺寸、背景透明度、波纹颜色、跳转地址、打开方式、禁用状态、加载状态及指示符样式等。预览图展示了不同配置下的按钮样式变化。组件通过Vue实现，并提供了丰富的自定义选项以适应各种场景需求。

  
• 08.29 18:08:17
  发表了文章 2024-08-29 18:08:17

  Vue3分页（Pagination）

  这是一个高度可定制的分页组件，支持通过属性设置当前页数、每页条数、数据总数等，并提供了禁用分页、隐藏单页分页、快速跳转等功能。此外，还可以自定义分页的位置、显示的数据条数选项及数据总数的显示格式。组件内置了对多种场景的支持，如禁用状态下的分页操作、不同位置的分页显示等，适用于多种应用界面需求。在线预览展示了各种配置项的效果。

  
• 08.29 18:04:18
  发表了文章 2024-08-29 18:04:18

  Vue3面包屑（Breadcrumb）

  该Breadcrumb组件允许自定义设置多个属性，包括路由数组、面包屑类名和样式、文本最大显示宽度、分隔符及样式、以及目标URL的打开方式。通过这些配置项，可以轻松实现不同样式的面包屑导航。组件支持点击跳转，并且能够处理带查询参数的路径。在线预览展示了其丰富的定制功能。可通过引入并在页面中使用该组件来快速构建导航结构。

  
• 08.29 18:00:54
  发表了文章 2024-08-29 18:00:54

  Vue3视频播放（Video）

  这篇文章介绍了如何在Vue 3框架中创建一个视频播放组件（Video），支持自定义视频源、封面、自动播放等多种播放选项和样式设置。

  
• 08.29 17:59:47
  发表了文章 2024-08-29 17:59:47

  Vue3倒计时（Countdown）

  这篇文章介绍了如何在Vue 3中创建一个可自定义的倒计时组件（Countdown），允许设置标题、前缀、后缀、格式和样式，并提供了组件的实现代码和使用示例。

  
• 08.29 17:57:55
  发表了文章 2024-08-29 17:57:55

  Vue3使用全局函数或变量的两种常用方式

  这篇文章介绍了Vue 3中实现全局函数或变量的两种方法：一种是使用`provide/inject`进行依赖注入，另一种是利用`app.config.globalProperties`和`getCurrentInstance()`来注册全局属性。

  
• 08.29 17:56:39
  发表了文章 2024-08-29 17:56:39

  Vue3+TS+Vite开发组件库并发布到npm

  这篇文章介绍了如何使用Vue 3、TypeScript和Vite开发一个包含35个常用UI组件和8个API功能函数的组件库`vue-amazing-ui`，并将其发布到npm，同时提供了组件库的安装使用说明和在线预览。

  
• 08.29 17:45:10
  发表了文章 2024-08-29 17:45:10

  手写实现ES6的Promise.all()和Promise.race()函数

  这篇文章介绍了如何手写实现ES6的`Promise.all()`和`Promise.race()`函数，提供了实现这两个Promise聚合函数的详细代码示例，并展示了如何使用它们。

  
• 08.29 17:43:55
  发表了文章 2024-08-29 17:43:55

  JS上传文件（base64字符串和二进制文件流）

  这篇文章介绍了两种JavaScript文件上传的方法：使用FileReader对象将文件读取为base64字符串上传，以及使用FormData对象以二进制文件流的形式上传文件，包括如何处理文件选择、读取和上传的详细代码示例。

  
• 08.29 17:42:40
  发表了文章 2024-08-29 17:42:40

  Vue加载中（Windows开机动画）

  这篇文章介绍了如何创建一个模仿Windows开机动画的自定义Vue Loading组件，支持自定义描述文案、是否循环动画和动画间隔时长。

  
• 08.29 17:41:44
  发表了文章 2024-08-29 17:41:44

  JS算法必备之String常用操作方法

  这篇文章详细介绍了JavaScript中字符串的基本操作，包括创建字符串、访问特定字符、字符串的拼接、位置查找、大小写转换、模式匹配、以及字符串的迭代和格式化等方法。

  
• 08.29 17:40:02
  发表了文章 2024-08-29 17:40:02

  JS算法必备之Array常用操作方法

  这篇文章详细介绍了JavaScript中数组的创建、检测、转换、排序、操作方法以及迭代方法等，提供了数组操作的全面指南。

  
• 08.29 17:38:05
  发表了文章 2024-08-29 17:38:05

  Vue2开发插件并发布到npm

  这篇文章介绍了如何使用Vue 3、TypeScript和Vite开发一个下拉框组件`vue-amazing-selector`，并将其发布到npm，包括了项目的创建、组件开发、配置webpack、编写组件代码、导出组件、编译、npm包初始化、发布流程以及在项目中使用该插件的完整步骤。

  
• 08.29 17:36:42
  发表了文章 2024-08-29 17:36:42

  微信小程序使用echarts图表（ec-canvas）

  这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法，包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。

  
• 08.29 17:35:10
  发表了文章 2024-08-29 17:35:10

  Vue2首页banner轮播

  这篇文章介绍了如何在Vue 2框架中创建一个首页轮播图（Banner）组件，允许自定义轮播数据、切换间隔、宽度和高度，并提供了组件的实现代码和使用示例。

  
• 08.29 17:33:26
  发表了文章 2024-08-29 17:33:26

  JavaScript / TypeScript日期格式化（dateFormat）

  这篇文章介绍了如何在TypeScript中创建和使用一个日期格式化函数`dateFormat`，支持多种日期格式的自定义，并提供了函数的实现代码和使用示例。

  
• 08.29 17:29:44
  发表了文章 2024-08-29 17:29:44

  基于vue 2.x的移动端网页弹窗插件wc-messagebox（支持Alert，Confirm，Toast，Loading）

  这篇文章介绍了一个基于Vue 2.x开发的移动端网页弹窗插件`wc-messagebox`，支持Alert、Confirm、Toast和Loading功能，并且提供了如何安装、配置和使用这些弹窗功能的详细说明。

  
• 08.29 17:28:12
  发表了文章 2024-08-29 17:28:12

  Vue移动端网页（H5）预览pdf文件（pdfh5和vue-pdf）

  这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览，包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。

  
• 08.29 17:25:41
  发表了文章 2024-08-29 17:25:41

  Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...

  这篇文章介绍了在Vue 2项目中如何通过`v-viewer`插件实现图片的预览、切换、缩放、旋转等功能，并提供了插件的安装、配置和使用方法。

  
• 08.29 17:24:14
  发表了文章 2024-08-29 17:24:14

  Vue3相关组件项目依赖依赖版本信息

  这篇文章展示了一个Vue 3项目中使用的组件和库的依赖版本信息，包括`ant-design-vue`、`swiper`、`vue`、`vue-router`等，以及开发依赖如`vite`、`vue-tsc`、`eslint`等。

  
• 08.29 17:23:03
  发表了文章 2024-08-29 17:23:03

  找不到模块“./App.vue”或其相应的类型声明。ts(2307)

  这篇文章介绍了在Vue 3 + TypeScript + Vite开发环境中解决找不到`.vue`文件模块或其类型声明错误的两种方法：使用VSCode的TypeScript Vue Plugin (Volar)插件或手动在`env.d.ts`文件中声明`*.vue`模块类型。

  
• 08.29 17:21:16
  发表了文章 2024-08-29 17:21:16

  Vue2使用全局函数或变量的两种常用方式

  这篇文章介绍了在Vue 2项目中实现全局函数或变量的两种常用方式：一种是通过挂载到Vue的`prototype`，另一种是使用Vue的全局混入（Vue.mixin）。

  
• 08.29 17:20:02
  发表了文章 2024-08-29 17:20:02

  Vue2按钮组件（Button）

  这篇文章介绍了如何在Vue框架中创建一个可自定义样式和行为的按钮组件，包括按钮的文本、类型、尺寸、宽度、高度、圆角、跳转目标、禁用状态和是否居中显示等属性。