snail.vue

依赖【snail】，基于vue封装常用UI组件

8,896

Maintainer: snail-devx

1. 概述

snail.vue 基于 vue 3.x，实现一些常用功能模块，通过 MIT 协议开放使用：

封装基础 vue 组件，如 Button、Select、Header、Icon、Search、Switch 等等

组件	简介
Button	按钮组件；集成 type、size 属性，封装大小和类型，简化使用
Choose	选择组件；集成 radio、checkbook 常用功能，支持选项组；支持美化和原生两种渲染模式
DatePicker	日期选择器组件；仅支持盖板模式，后续支持 input 输入框模式
Icon	图标组件；使用 svg 进行图标绘，内置常用图标类型；并支持自定义图标绘制路径
Search	搜索组件；封装搜索输入框、搜索按钮；支持自动完成等功能
Select	选项菜单组件；对原生 select 的扩充，支持多级选项，支持单选和多选等
Switch	开关组件；支持只读、v-model 绑定操纵
Reactive	响应式模块，非 vue 组件；对 vue 响应时做了封装，集成常用生命周期管理
Footer	尾部组件；和 Header 配套，封装确定、取消按钮；不常用
Header	头部组件；封装标题、关闭按钮，用于 page 和 dialog 模式；支持插槽

实现对子组件的动态加载，如列表、树、滚动容器，折叠面板，动态组件等等；

组件	简介
Dynamic	动态组件；vue 的 Component 组件扩展，支持 url、name、object 方式加载异步组件，并支持 event、props、model、slot 等绑定
Fold	折叠面板组件；通过 slot 加载实际内容，封装折叠 title 实现面板展开、收起功能
Layout	布局组件；实现上中下、左中右布局，通过 slot 指定每块内容
Scroll	滚动组件；实现滚动条状态、事件封装，并通过 class、event 等方式对外，通过 slot 加载实际内容
Sort	排序组件；集成 sortable.js 库，实现再次封装，暴露常见属性
Table	表格组件；封装表头、内容区域，基于 TableCol、TableRow 子组件对外做自定义渲染
Tree	树组件；基于 nodes 渲染树，支持节点自定义，集成节点事件和本地搜索
Wrapper	包裹层组件；作为常用组件的包裹层，自动实现组件在 page 和 popup 中展现，让内容组件关注核心逻辑即可

基于IPopupManager实现的各类选择器组件，如日期选择器、时间选择器、颜色选择器、、、

基于 IPopupManager 实现弹窗管理，自动管理弹窗层级、弹窗生命周期；提供基础 popup 弹窗方法；并扩展 dialog、follow、toast、confirm 弹窗方法

弹窗方法	简介
usePopup	弹窗管理器接口实现接口，后续 popup、dialog 等弹窗的具体实现
popup	通用弹窗方法；管理弹窗生成周期，自动分配弹层，实现属性、事件绑定
dialog	模态弹窗；利用 popup 实现弹窗遮罩，支持关闭前拦截
follow	跟随弹窗；弹窗自动跟随指定 target 元素，实现高度、宽度跟随、位置跟随、位置智能感知
toast	消息提示弹窗；模拟 Android 的 Toast 弹窗提示消息
confirm	确认弹窗；模拟实现原生 confirm 弹窗

封装一些提示性质的通用组件，如数据加载状态、无数据提醒等等