秋来九月八

Watermark（水印）‌ 是一种在页面上叠加半透明文字或图案的技术，常用于保护敏感信息（如文档、图片、网页）的版权或防止未经授权的传播。以下是其核心要点：1‌. 信息标识‌：显示版权、用户信息或保密等级（如 “Confidential”）。2‌. 防篡改‌：通过覆盖页面内容，增加数据泄露的难度。‌3. 低干扰‌：半透明设计避免遮挡主体内容。‌Canvas生成‌：用 Canvas 绘制文本/图案，转为 Base64 图片作为背景。

Carousel（走马灯）是一种常见的前端组件，通常用于展示多个项目（通常是图片或内容块）的轮播效果。它是网页和应用中的常见UI元素之一，通常用于滚动广告、产品展示、图片轮播、新闻滚动等场景。图片/内容轮播：Carousel能够以水平或垂直的方式，循环地显示多个项目，使用户能够逐个或自动浏览这些项目。自动播放：通常，Carousel支持自动播放功能，允许项目在不需要用户干预的情况下自动切换。导航控件：通常，Carousel提供导航控件，如箭头或小圆点，用户可以点击它们来切换到不同的项目。

Icon（图标）组件是一种常见的用户界面元素，用于在网页、移动应用和桌面应用中显示图标。这些图标通常用来传达信息、进行导航、增强用户界面或提供视觉元素。

card组件在我们日常开发中经常使用，如果能够有一个较好的封装，将会省去很多的重复代码，提高开发效率。要与cardGroup相结合能够实现水平排列和垂直排列，或者瀑布流排列。提供了线上的体验网站，欢迎大家前来，并提出你的建议。必须分为标题和内容两部分，并且都支持自定义。card组件需要实现哪些功能呢。提供一种或多种hover特效。card提供点击事件用以交互。......

Button组件是前端开发中最常见的组件之一，无论是c端还是b端，使用频率都是极高。那么封装一个button组件需要做些什么？1. 点击事件2. 按钮的文案自定义3. 按钮的disabled状态4. 按钮的大小可选择，以期能够适应更多的场景5. 按钮的背景颜色可选可自定义6. 按钮的形状一般分为三种，椭圆，矩形，圆形7. button的类型也可以多提供几种，如边框是虚线的，背景色透明的，等等

checkboxGroup最主要的功能，就是配合checkbox带来更方便的交互模式。能够渲染一组checkbox分为两种排列方式能够对整组checkbox的状态进行监控和管理checkboxGroup在某种意义上，内部只能渲染checkbox组件。

tag组件，是前端开发常用组件之一，无论是移动端，还是pc端，我们都能经常看到。tag组件的交互也比较简单，需要实现的功能如下能删除能自定义背景，颜色，甚至提供部分形状可供选择tag的内容能够完全自定义删除或者点击的回调，（如果是点击的回调，更像一个button）

dialog是用户的交互式组件，常用在当前页面的消息确认，通知等如何用vue3构建一个dialog的组件，应该满足哪些功能？想要能够自定义头部 尾部 主要内容得能够控制dialog的弹出 消失确认或者取消按钮能够控制dialog的宽度需要占满整个屏幕，交互区域应该位于屏幕正中间，点击其它地方无效你还能想到什么？

面包屑”（Breadcrumbs）是一种用于用户界面导航的常见元素，通常以水平线条或文本链接的形式呈现。它们用于显示用户的当前位置，并提供了导航路径，以便用户可以迅速回到之前的页面或浏览层次结构中的其他页面。导航路径显示面包屑通常以文本链接的方式显示，表示用户的当前位置以及导航路径中的其他页面。这有助于用户了解他们的位置，并可以点击链接返回到上一级页面。层次结构导航面包屑经常用于导航层次结构的页面，例如网站的目录结构、文件系统或产品目录。用户可以通过点击面包屑中的链接来快速浏览不同级别的页面。

Switch 开关组件经常出现在网页中，比如视频里面的弹幕开关，某一项功能是否开启等。通常一个switch开关组件需要实现的功能如下1. 能够流畅的切换开关。2. 需要能及时反馈开关的状态。3. 能够出现提示的文字，在开关开启或关闭的时候4. 最好能够自适应宽度，以便文字的长度能尽可能的满足5. disabled状态需要实现

当用户将鼠标悬停在一个页面元素上时，通常需要显示与该元素相关的信息。这就是Tooltip组件的用途。Tooltip是一种小型弹出框，它显示有关特定页面元素的信息，例如按钮、链接或图标。Tooltip通常以半透明的气泡形式呈现，并出现在页面元素的旁边或下方。它可以改善用户体验，使用户更容易理解页面元素的功能和意图。用户可以通过将鼠标悬停在页面元素上来快速了解有关该元素的信息，而无需离开当前页面或浏览其他页面。

实现的思路主要是依靠input type="checkbox",我们可以在这基础上修改样式，来实现新的组件ui，change事件和checked的逻辑，可以依靠input type="checkbox"自带的逻辑，这样可以省去很多代码。

slider组件已成为前端开发中广泛使用的UI组件之一。Slider组件可以让用户在一个可选范围内选择一个值，如音量、进度条等。Slider组件的设计和功能可以有很多种变化，但通常包含一个滑块和一个轨道。用户可以通过拖动滑块来选择一个值，滑块的位置在轨道上表示该值。在前端开发中，Slider组件可以使用HTML、CSS和JavaScript实现。

弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。

Affix是一种常用于前端界面设计的组件，它可以让网页元素固定在页面中的某个位置，随着用户的滚动而保持不变。通常用于固定导航栏、侧边栏等。通过设置相应的CSS样式和JavaScript代码，我们可以轻松地实现Affix组件的效果。Affix可以增强网页的用户体验，让用户在页面滚动时能够方便地访问重要的导航链接或信息，提高页面的可用性。

Message组件用以消息提示，用户在前端完成某些交互时，在页面弹出的某种反馈。该组件一共有四种类型，info、success、warning、error。与一般的组件不同，该组件调用后，持续一段时间会消失，并且采用函数式调用。函数式调用组件，一般适用于，组件自身相对于屏幕定位，比如Dialog、Message、Pop等。