theMuseCatcher_社区达人页

2025年02月

• 02.21 09:45:19
  发表了文章 2025-02-21 09:45:19

  Vue Amazing UI 组件库（Vue3+TypeScript+Vite 等最新技术栈开发）

  Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库，包含丰富的 UI 组件和常用工具函数，并且持续不断维护更新中。另外，组件库全量使用 TypeScript，支持自动按需引入和 Tree Shaking 等，能够显著提升开发效率，降低开发成本。

  

2024年08月

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

  Vue3搜索框（InputSearch）

  这篇文章介绍了如何在Vue 3中创建一个具有搜索、清除、加载状态等多功能的搜索框组件（InputSearch），并提供了组件的配置选项、事件处理和使用示例。

  
• 08.29 22:41:36
  发表了文章 2024-08-29 22:41:36

  Vue2图片懒加载（vue-lazyload）

  这篇文章介绍了如何在Vue 2项目中使用`vue-lazyload`插件来实现图片的懒加载功能，包括安装插件、注册配置以及在页面中的具体使用方法。

  
• 08.29 22:39:31
  发表了文章 2024-08-29 22:39:31

  Vue3列表（List）

  这段代码介绍了一个基于 Vue3 的列表组件库 `Vue Amazing UI`。该库提供了丰富的自定义选项，如边框、垂直布局、分割线、尺寸、加载状态等，并支持分页、自定义样式及操作项。组件通过插槽和属性实现高度灵活的内容展示与交互。

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

  Vue3组合式函数（监听DOM尺寸 useResizeObserver）

  本文介绍如何使用 `ResizeObserver` API 编写 Vue3 的通用组合式函数 `useResizeObserver`，该函数可方便地观察一个或多个元素的尺寸变化，并执行指定回调。`ResizeObserver` 接口用于监控 `Element` 或 `SVGElement` 的尺寸变化，避免了无限回调循环问题。

  
• 08.29 22:36:56
  发表了文章 2024-08-29 22:36:56

  Vue3加载条（LoadingBar）

  这是一个基于 Vue 的加载条组件，提供了丰富的自定义选项和方法。通过简单的 API，可以控制加载条的开始、结束及错误状态。支持设置容器类名、样式、颜色等属性，并可通过 `start`、`finish` 和 `error` 方法来触发不同状态。

  
• 08.29 22:35:32
  发表了文章 2024-08-29 22:35:32

  Vue3分段控制器（Segmented）

  这是一个基于 Vue 的分段控制器组件 `Segmented`，支持多种选项和自定义渲染。通过 `v-model` 绑定当前选中值，并提供 `block`、`disabled` 和 `size` 等属性来调整样式。

  
• 08.29 22:33:02
  发表了文章 2024-08-29 22:33:02

  Vue3滚动条（Scrollbar）

  这是一个基于 Vue 的自定义滚动条组件 Scrollbar.vue，提供了丰富的配置选项和方法。通过参数如 `contentClass`、`size` 和 `trigger` 等，可以灵活控制滚动条的样式和行为。

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

  Vue3渐变文字（GradientText）

  该文档介绍了一个基于 Vue 的渐变文字组件 `GradientText`，允许用户通过配置参数实现不同样式和尺寸的文字渐变效果。支持自定义起始和结束颜色、渐变角度及多种预设类型（如 `primary`、`info` 等）。

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

  Vue3抽屉（Drawer）

  这是一个基于Vue的抽屉组件（Drawer），提供了丰富的自定义选项，如宽度、高度、标题、关闭按钮等，并支持顶部、右侧、底部和左侧四种方向。

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

  Vue3骨架屏（Skeleton）

  该文章介绍了一个名为Skeleton的Vue组件，用于创建加载时的占位符界面，包含多种可配置项如按钮、输入框、图像等，并支持动画效果。

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

  Taro@3.x+Vue@3.x+TS开发微信小程序，设置转发分享

  本文介绍了Taro中`useShareAppMessage`的使用方法，需在页面配置`enableShareAppMessage: true`并重新编译。

  
• 08.29 22:26:28
  发表了文章 2024-08-29 22:26:28

  Taro@3.x+Vue@3.x+TS开发微信小程序，网络请求封装

  在 `src/http` 目录下创建 `request.ts` 文件，并配置 Taro 的网络请求方法 `Taro.request`，支持多种 HTTP 方法并处理数据加密。

  
• 08.29 22:25:14
  发表了文章 2024-08-29 22:25:14

  Taro@3.x+Vue@3.x+TS开发微信小程序，上传文件

  本文介绍如何在Taro项目中使用Nut UI的`<nut-uploader/>`组件实现图片上传功能，并通过示例代码展示了自定义上传逻辑的方法。

  
• 08.29 22:23:37
  发表了文章 2024-08-29 22:23:37

  Taro@3.x+Vue@3.x+TS开发微信小程序，根据系统主题展示不同样式（darkMode）

  本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量，可以实现跟随系统主题的界面风格切换。

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

  Taro@3.x+Vue@3.x+TS开发微信小程序，使用轮播图

  本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法：一是通过 `<swiper>` 实现，二是利用 Nut UI 的 `<nut-swiper>` 组件实现。

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

  Taro@3.x+Vue@3.x+TS开发微信小程序，使用自定义tabBar

  本文介绍了如何在Taro项目中实现自定义tabBar。首先，在`app.config.ts`中设置`custom: true`并配置`tabBar`。

  
• 08.29 22:16:37
  发表了文章 2024-08-29 22:16:37

  Vue3气泡卡片（Popover）

  这是一个基于Vue的气泡卡片组件(Popover)介绍，提供了在线预览链接及详细API参数说明，包括maxWidth、title、content等，并支持自定义样式。

  
• 08.29 22:14:59
  发表了文章 2024-08-29 22:14:59

  Vue3水印（Watermark）

  这是一个基于Vue.js的水印组件库，提供了丰富的自定义选项，包括水印的布局、旋转角度、间距等。组件支持文字和图片水印，并可通过API调整样式和位置。

  
• 08.29 22:13:36
  发表了文章 2024-08-29 22:13:36

  Vue3弹性布局（Flex）

  这是一个基于 Vue 的弹性布局组件库，提供了丰富的参数配置，如宽度、方向、换行等，支持自定义对齐方式和间隙设置。在线预览展示了不同布局效果，包括单选、按钮和滑动输入条等组件的使用示例。

  
• 08.29 22:11:37
  发表了文章 2024-08-29 22:11:37

  Vue3数值动画（NumberAnimation）

  该文档介绍了一个基于 Vue 的数值动画组件 `NumberAnimation`，提供了丰富的配置选项，如起始值、目标值、动画时长等，并支持自定义前缀、后缀及样式。通过简单的方法和事件，可以轻松控制动画的播放与停止。

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

  Vue3回到顶部（BackTop）

  这是一个基于 Vue3 的头像组件库，提供了圆形和方形两种头像形状，并支持自定义大小、图片、图标及字符展示。

  
• 08.29 22:06:58
  发表了文章 2024-08-29 22:06:58

  Vue3头像（Avatar）

  这是一个基于 Vue3 的头像组件库，提供了圆形和方形两种头像形状，并支持自定义大小、图片、图标及字符展示。

  
• 08.29 21:34:23
  发表了文章 2024-08-29 21:34:23

  Vue3弹出确认（Popconfirm）

  这是一个基于Vue3的弹出确认框组件（Popconfirm），提供了丰富的自定义选项和事件处理功能。组件支持设置标题、描述、按钮文本及样式等，并可通过slot进行自定义内容。

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

  Vue3文本省略（Ellipsis）

  这是一个基于Vue3的文本省略组件（Ellipsis），支持单行或多行文本的自动省略与展开功能，并可自定义提示框（Tooltip）的内容与样式。

  
• 08.29 21:28:32
  发表了文章 2024-08-29 21:28:32

  Vue3徽标（Badge）

  该组件库包含 `Descriptions` 和 `DescriptionsItem` 两种组件，需配合使用。

  
• 08.29 21:26:52
  发表了文章 2024-08-29 21:26:52

  Vue3描述列表（Descriptions）

  该组件库包含 `Descriptions` 和 `DescriptionsItem` 两种组件，需配合使用。`Descriptions` 用于构建描述列表，提供标题、操作区、边框、垂直布局等配置；`DescriptionsItem` 作为列表项，可自定义标签和内容样式。支持响应式布局，并集成了多个实用工具函数，如节流、事件监听等。可通过属性灵活调整列表样式与布局。

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

  Vue3标签（Tag）

  这是一个Vue组件`Tag.vue`，提供了多样化的标签展示功能。支持设置标签颜色、尺寸、图标、边框等样式，并可实现标签的动态添加与删除。

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

  Vue3文本域（Textarea）

  这是一个基于 Vue3 的可自定义文本域组件 (`Textarea`)，具备多种实用功能，如自适应内容高度、清除图标、字数统计及禁用状态等。

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

  Vue3输入框（Input）

  这是一个基于 Vue 的输入框组件库，提供了丰富的自定义选项与功能。通过参数设置可以调整输入框的尺寸、前后缀图标及标签等，并支持密码输入、显示字数统计、禁用状态等功能。

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

  Vue3统计数值（Statistic）

  这是一个基于 Vue3 的统计数值组件 `Statistic`，用于展示数据指标。它支持设置标题、数值内容、精度、前缀、后缀及千分位标识符等，并可通过插槽和自定义函数实现更丰富的展示效果。

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

  Vue3结果（Result）

  这是一个基于 Vue 开发的多功能结果组件库。该组件库提供多种状态反馈图标与配色方案，如成功、错误、警告等，并支持自定义标题与副标题文案。

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

  Vue3警告提示（Alert）

  这是一个基于 Vue 的警告提示组件 Alert，提供了成功、信息、警告和错误四种样式，并支持自定义内容、图标及操作项。

  
• 08.29 21:14:57
  发表了文章 2024-08-29 21:14:57

  Vue3栅格（Grid）

  该文章介绍了一种基于24栅格系统的布局方案，通过`Row`和`Col`组件实现灵活的内容排布。`Row`负责水平方向的一组`Col`，`Col`则用于承载实际内容。栅格系统支持1到24的列值，超过24的`Col`会自动换行。此外，系统还支持Flex布局，允许子元素进行多种对齐方式，并可通过响应式属性适应不同屏幕尺寸。文章提供了详细的API说明和代码示例，展示了如何在实际项目中应用这一布局系统。

  
• 08.29 21:13:34
  发表了文章 2024-08-29 21:13:34

  Vue3卡片（Card）

  这是一个基于Vue3的卡片组件库，提供多样化的卡片展示效果，包括不同尺寸、加载状态及自定义样式等。支持设置宽度、标题、边框等属性，并可通过`loading`参数显示加载占位符。

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

  Vue3间距（Space）

  这是一个基于 Vue 的间距组件 Space 的介绍，提供了在线预览和详细的 API 文档，包括区域宽度、垂直排列方式、布局方向等参数设置。此外，还展示了如何在页面中引入并使用该组件，配合其他 Vue3 组件如弹出确认、单选按钮、卡片等实现丰富的布局效果。

  
• 08.29 21:10:57
  发表了文章 2024-08-29 21:10:57

  Vue3使用echarts仪表盘（gauge）

  Apache ECharts 是一款强大的数据可视化库，其仪表盘图表（`gauge`）可用于展示度量数据。主要属性包括仪表盘数据源 `gaugeData`（必填）、容器宽度 `width`（默认 100%）及高度 `height`（默认 100%）。数据项需指定名称 `name` 和值 `value`，并支持额外属性。

  
• 08.29 21:09:40
  发表了文章 2024-08-29 21:09:40

  Vue3拖拽插件（vuedraggable@next）

  vuedraggable 是一款 Vue2 拖拽插件，可轻松实现列表项的拖拽排序与交互。通过简单配置，即可在不同区域间拖动元素并实现数据同步。支持多种事件监听和自定义样式。

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

  使用VitePress创建个人网站并部署到GitHub

  该网站使用 VitePress 构建，记录了前端开发相关的笔记和教程，涵盖 Vue2 和 Vue3 等内容。网站支持暗黑模式和 Algolia 搜索服务，提供了详细的导航和侧边栏配置。通过自动化脚本进行部署，托管于 GitHub Pages。

  
• 08.29 21:05:57
  发表了文章 2024-08-29 21:05:57

  使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub

  本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress，可以轻松搭建组件库的文档站点，并实现 Algolia 搜索功能。此外，还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后，展示了完整的目录结构和网站效果。

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

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

  **vue-amazing-ui 组件库** 是一个基于 Vue 3 的高质量 UI 组件库，提供了丰富的组件和工具函数。该库已发布至 npm，可通过 `pnpm i vue-amazing-ui`、`yarn add vue-amazing-ui` 或 `npm install vue-amazing-ui` 安装使用。组件包括按钮、面包屑、卡片、日期选择器等，同时提供了日期格式化、节流、防抖等实用工具函数。项目结构清晰，支持按需加载，并提供了详细的文档与在线预览。

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

  使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub

  本文详细介绍了如何使用 Vue3、TypeScript 和 Vite 开发并发布一个名为 Vue Amazing UI 的组件库至 npm。文章首先引导读者安装配置 VitePress，创建文档网站，并编写组件库文档。接着，通过一系列配置实现网站主题定制、全局样式设置以及 Algolia 搜索功能集成。最后，文章提供了自动化脚本，帮助开发者一键打包部署静态网站至 GitHub，并发布组件库到 npm。通过这些步骤，读者可以轻松搭建并维护一个美观且功能齐全的组件库文档网站。

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

  使用jsDelivr和GitHub，上传本地静态资源到免费CDN

  本文介绍了一种将本地图片和静态资源（如 js、css、文档等）上传至免费CDN的方法，便于随时调用。具体步骤包括：在GitHub创建仓库`resources`存放资源；通过上传或Git命令同步文件；在仓库中创建新版本并发布。之后即可通过指定格式的URL访问这些CDN资源。此方法简单高效，适合开发者快速部署和共享静态内容。

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

  Vue3上传（Upload）

  这是一个基于 Vue 3 的文件上传组件，提供了丰富的自定义选项，包括接受的文件类型、是否支持多选文件、上传数量限制、预览图片缩放规则等。组件还集成了多种功能，如拖拽上传、预览图片、自定义上传行为等，并支持不同类型的文件预览图标。组件使用了 `Space`、`Spin`、`Image` 和 `Message` 等子组件来实现多样化的布局和交互效果。此外，通过 `beforeUpload` 钩子可以对上传文件进行预处理，如限制文件大小和类型。整体设计简洁实用，适用于多种应用场景。

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

  Vue3PDF预览（vue3-pdf-app）

  `vue3-pdf-app` 插件提供了一个简单而强大的 PDF 预览解决方案。通过 `<a>` 标签即可快速预览 PDF 文件。为满足更复杂的定制需求，提供了 `PDFViewer.vue` 组件，基于 `vue3-pdf-app@1.0.3` 封装，支持多种功能如缩放、旋转、全屏预览、打印等，并可自定义主题颜色与语言。组件属性包括文件地址 (`src`)、预览容器尺寸 (`width`, `height`)、默认缩放规则 (`pageScale`) 和主题 (`theme`) 等。适用于多种浏览器，方便集成到项目中。

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

  Vue3代码展示（vue-codemirror）

  `vue-codemirror`插件为Vue应用提供了一个强大的代码编辑器组件，支持代码高亮、自定义样式、暗黑模式等特性。通过简单的配置即可实现丰富的代码编辑体验。安装依赖后，创建`CodeMirror.vue`组件并在目标页面中使用即可。

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

  Vue3使用echarts树图（tree）

  本文介绍了如何在 Vue2 项目中使用 Echarts 实现树图（tree）功能。通过按需引入 Echarts 组件和相关依赖，文章详细展示了如何创建一个可自定义配置的树图组件 `TreeChart.vue`，包括树图数据源、容器尺寸、主题色等属性。此外，还提供了在线预览效果及代码示例，帮助读者快速实现树图功能。适用于需要展示层次结构数据的场景。

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

  Vue3瀑布流（Waterfall）

  这是一个基于 Vue2 的瀑布流（Waterfall）组件，支持多种自定义属性，如图片数组、列数、间隙、宽度、圆角、背景色及 Spin 加载样式。组件通过计算每张图片的位置实现动态布局，并利用 Vue 的响应式系统自动调整布局。提供了在线预览和详细代码示例，方便集成到项目中。

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

  Vue3时间轴（Timeline）

  这是一个基于 Vue2 的时间轴（Timeline）组件，支持多种自定义属性，包括时间轴内容数组 `timelineData`、总宽度 `width`、线条样式 `lineStyle`、模式 `mode` 和位置 `position`。时间轴内容数组包含描述 `desc` 和圆圈颜色 `color`。组件提供了丰富的样式选项，如虚线、居中显示等，并支持内容交替展现。适用于多种场景下的时间轴展示需求。