theMuseCatcher_社区达人页

2024年08月

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

  Vue2按钮组件（Button）

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

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

  Vue2瀑布流图片展示（Waterfall）

  这篇文章介绍了如何在Vue 3框架中实现瀑布流图片展示组件，提供了两种实现方式：一种使用CSS的`column-count`和`column-gap`属性，另一种使用JavaScript计算图片位置，以实现图片在多列中的动态分布。

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

  追悼日网站自动变为黑白（解决filter导致的absolute和fixed定位问题）

  这篇文章介绍了如何解决在网站页面上使用`filter: grayscale(100%)`导致布局问题的方法，建议将`filter`属性应用在`html`根元素上，以避免影响`absolute`和`fixed`定位的元素。

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

  Vue2无操作半小时后自动清除登录状态

  这篇文章介绍了如何在Vue应用中实现当用户半小时无操作后自动清除登录状态的功能，通过监听鼠标、键盘或滚动事件来重置过期时间。

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

  Vue2面包屑（Breadcrumb）

  这篇文章介绍了如何在Vue 3框架中创建一个面包屑（Breadcrumb）组件，支持自定义路由数组、面包屑高度和分隔符。

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

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

  这篇文章展示了一个Vue 2项目中相关组件和开发依赖的版本信息，包括axios、echarts、swiper等库以及eslint等开发工具的特定版本。

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

  Vue2拖拽插件（vuedraggable）

  这篇文章介绍了如何在Vue 3框架中使用`vuedraggable`插件来实现拖拽功能，并提供了插件的安装、配置和事件处理的示例。

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

  Vue2视频播放（Video）

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

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

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

  这篇文章介绍了在Vue 3框架中如何使用Swiper插件来创建不同类型的触摸滑动组件，包括轮播图、淡入淡出效果和走马灯效果，并提供了详细的配置选项和使用示例。

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

  Vue2通知提醒框（Notification）

  这篇文章介绍了如何在Vue 3框架中创建一个通知提醒框（Notification）组件，支持自定义延时关闭、弹出位置和五种不同样式的消息提示。

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

  Vue2使用echarts树图（tree）

  这篇文章介绍了如何在Vue 3框架中集成echarts库来创建一个树状图（Tree Chart）组件，支持自定义数据和交互事件。

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

  Vue2文字提示（Tooltip）

  这篇文章介绍了如何在Vue 3框架中创建一个文字提示组件（Tooltip），允许自定义提示框的最大宽度、展示文本和提示文本，支持鼠标悬停显示和隐藏效果。

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

  Vue2全局提示（Message）

  这篇文章介绍了如何在Vue 3框架中创建一个全局提示组件（Message），支持自定义提示的持续时间和位置，并且可以展示多种类型（info, success, error, warn）的消息提示。

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

  Vue多图组合走马灯

  这篇文章介绍了如何在Vue框架中创建一个多图组合的走马灯组件，允许自定义滑动间隔和图片区域宽度，以展示多个图片。

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

  Vue2走马灯扩展版（Carousel）

  这篇文章介绍了如何在Vue 3框架中创建一个可自定义的走马灯（Carousel）组件，支持自动播放、导航、分页和响应用户交互等功能。

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

  Vue2横向文字滚动

  这篇文章介绍了如何在Vue 2框架中实现一个横向滚动文本的组件，允许自定义滚动文本内容、滚动区域尺寸和滚动速度等属性。

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

  Vue2进度条（Progress）

  这篇文章介绍了如何在Vue 3框架中创建一个可自定义设置的进度条组件，包括进度条的宽度、当前进度、线条宽度和是否显示进度信息等属性。

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

  Vue2时间轴（横向）

  该横向时间轴组件 `HorizonTimeLine` 可自定义时间轴数据 (`timelineData`) 和初始选中年份 (`activeYear`)。通过点击不同的年份，可以改变当前激活的年份，并有相应的视觉反馈。该组件支持均匀自适应排列，且易于在其他页面中引入和使用。

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

  JS深浅拷贝

  本文介绍了JavaScript中实现数据拷贝的四种方法：`Object.assign()`, 扩展运算符(`...`), `JSON.parse(JSON.stringify())` 和递归深拷贝。`Object.assign()`及扩展运算符对基本数据类型进行深拷贝，而对引用类型则进行浅拷贝。`JSON.parse(JSON.stringify())`对所有类型的数据都执行深拷贝，但存在一些限制如日期类型被转为字符串等。递归深拷贝则避免了这些问题，并支持循环引用，是一种更安全的选择。

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

  Vue2加载中（Spin）

  这是一篇介绍如何在 Vue3 中实现加载中（Spin）效果的文章。Spin 组件支持自定义是否显示加载状态（默认为 `true`）以及描述文案（默认为空）。文章详细展示了如何创建 `Spin.vue` 组件，并提供了样式和脚本代码。此外，还介绍了如何在页面中引用并使用该组件。 

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

  Vue2日期选择器插件（vue-datepicker-local）

  这是一个基于 Vue 的日期选择器组件库，支持年份、月份、日期和时间的选择，并且均可进行范围选择。用户可以自定义日期格式与组件样式。该示例展示了如何配置组件以限制可选日期范围，并提供了相应的代码实现。

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

  Vue2级联选择（Cascader）

  这是一个基于 Vue 3 的级联选择组件，支持多种自定义属性，如数据源、选中项、文本字段等。提供了丰富的配置项，如层级间隙、宽度、高度、禁用状态和占位符等，便于灵活使用。组件通过监听选择变化并触发回调事件，实现了动态更新与交互。

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

  Vue2开关（Switch）

  这是一个基于 Vue3 的开关（Switch）组件，支持多种自定义属性：初始选中状态 (`defaultChecked`)、选中与未选中时显示的内容 (`checkedInfo`, `uncheckedInfo`)、是否禁用 (`disabled`) 及双向绑定 (`v-model`) 控制选中状态 (`checked`)。通过简单配置即可实现功能丰富的开关控件。

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

  Vue2滑动输入条（Slider）

  这是一个基于 Vue3 的滑动输入条（Slider）组件，提供了丰富的自定义选项，如最小值、最大值、初始值、宽度、禁用状态及双滑块模式等。用户可通过拖动滑块或点击输入条调整数值。代码示例展示了如何创建组件及在页面中引入使用。包含单滑块与双滑块模式的效果图。

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

  Vue2时间轴（Timeline）

  本文介绍了一个基于 Vue3 的时间轴组件 `Timeline`，允许用户自定义时间轴宽度和描述文本。通过在 `Timeline.vue` 中使用模板、脚本及样式代码，文章展示了如何创建并使用该组件，并提供了示例代码以供参考。

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

  Vue2表格（Table）

  这是一个基于 Vue3 的表格组件，提供了灵活的数据展示与分页功能。主要接收表格列配置 `columns`、数据源 `dataSource`、分页器配置 `pagination` 等参数，并支持加载状态显示及单页隐藏分页器等特性。组件内置了加载中组件 `Spin` 和分页组件 `Pagination`，样式参考 ant-design。使用时需在目标页面引入组件并设置相关属性即可实现丰富的表格展示效果。

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

  Vue2步骤条（Steps）

  这是一个基于 Vue3 的步骤条（Steps）组件，支持高度自定义。主要属性包括步骤标题数组（stepsLabel）、步骤描述数组（stepsDesc）、步骤总数（totalSteps，默认为3）、当前选中的步骤（currentStep，默认为1）、步骤条总宽度（totalWidth，默认为900px）和描述文本最大宽度（descMaxWidth，默认为140px）。组件通过不同的样式展示已完成、进行中和未开始的状态，并支持点击切换步骤。可在需要的页面中引入并传入相关初始数据。

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

  Vue2信息提示（Modal）

  这是一个基于 Vue3 的信息提示模态框（Modal）组件，提供了丰富的自定义属性，包括标题、内容、宽度、按钮文本等。它支持两种模式：确认提示框（confirm）和信息提示框（info），并有六种不同的展示效果。模态框可以水平垂直居中或固定高度水平居中显示，支持加载中状态。该组件模仿了 ant-design-vue 的样式，适用于各种场景下的信息提示。

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

  Vue2走马灯（Carousel）

  这是一个基于 Vue2 的走马灯轮播组件（Carousel），支持鼠标移入暂停、移出后自动轮播。用户可以自定义设置轮播图片数组、滑动间隔时间、图片宽高。该组件提供了两种滑动效果实现方式：一种是通过 `setInterval` 延时调用，另一种是使用 `requestAnimationFrame()`，后者效果更佳。组件还支持图片懒加载，适用于多种应用场景。

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

  Vue2竖向文字滚动

  这是一个基于Vue3的文字滚动组件（TextScroll），支持自定义滚动文字数组、滚动间隔时间、展示宽度及高度等属性。该组件通过VerticalTextSlider.vue实现，提供了平滑过渡动画，并允许鼠标悬停时暂停滚动。适用于多种场景下的文字轮播需求。

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

  js金额数字格式化

  本文介绍了两种实现数字格式化的方法：字符串操作与正则表达式。首先，通过递归地在每三位数字间插入逗号来格式化整数。接着，扩展该功能以支持自定义小数位数及分隔符，适用于更广泛的场景。最后，展示了如何利用正则表达式简化上述过程，实现相同的功能。
• 08.29 14:07:10
  发表了文章 2024-08-29 14:07:10

  Vue2对话框（Dialog）

  这是一篇介绍如何在Vue3中使用对话框（Dialog）的文章。该对话框组件可自定义标题、内容、尺寸等属性，并支持全屏切换、加载中状态等功能，整体样式参考了ant-design-vue Modal的设计。文章详细介绍了创建和使用Dialog组件的方法。

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

  Vue2分页（Pagination）

  本文介绍了如何在 Vue3 中创建一个自定义分页组件（Pagination）。该组件支持传入多个参数，如当前页数、每页条数、是否隐藏单页分页等，并提供了丰富的功能，包括快速跳转、显示数据总量及分页器位置调整。通过示例代码展示了组件的具体实现方式，包括模板结构、计算属性、监听方法及样式设置。此外，还介绍了如何在项目中引入并使用该分页组件。

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

  Git常用命令汇总

  这是Git命令速查表，涵盖从版本库创建、文件添加与提交、状态查询到分支管理、标签创建及撤销操作的各项常用指令。同时介绍了如何通过GitHub进行代码仓库的创建与同步，帮助用户高效地使用Git进行版本控制和协作开发。

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

  JS中常用的数组迭代方法（filter，forEach，map，every，some，find，findIndex）

  这段代码和说明介绍了JavaScript中数组的一些常用方法。函数接收三个参数：`item`（数组项的值）、`index`（项的位置，可选）和`array`（数组本身，可选）。示例展示了如何使用`filter()`过滤非空项、`forEach()`遍历数组、`map()`处理并返回新数组、`every()`检查所有元素是否满足条件、`some()`检查是否存在满足条件的元素、`find()`获取首个符合条件的元素值以及`findIndex()`获取其索引位置。这些方法都不会修改原数组。

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

  JavaScript遍历数组和对象常用方法总结

  以上代码展示了数组和对象的多种遍历方法。对于数组，使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历；对于对象，则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构，如数组、字符串等，而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。

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

  Vue2选择器（Select）

  这是一个基于Vue3的选择器组件（VueAmazingSelector），已在npm上发布，方便快捷地通过`yarn add vue-amazing-selector`进行安装。此组件允许全局或局部注册，并提供了丰富的自定义属性，如选项数据、选择器文本字段名、值字段名、默认文字、禁用状态、清除功能等。同时，它还支持调整选择框的尺寸和下拉项数量，并附有详细的使用示例和代码片段，便于开发者快速集成和定制。

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

  Vue2使用百度地图展示或搜索地点(vue-baidu-map)

  本文介绍了如何在 Vue 项目中使用 `vue-baidu-map` 插件，包括安装、全局注册及具体应用。首先通过 `yarn add vue-baidu-map` 安装插件，并在 `main.js` 中全局注册。然后展示了如何在地图上显示特定位置的标记，以及如何搜索地点并获取其经纬度和详细地址信息。代码示例提供了详细的实现方法和样式调整。如需使用，请确保已获取百度地图 API 的密钥。