zss-lit-ui
v0.1.0
Published
A Lit-based Web Component library implementing Element Plus components
Maintainers
zengssReadme
ZSS Lit UI
一个基于 Lit 框架的 Web Components 组件库，实现了 Element Plus 风格的组件。
✨ 特性
- 🚀 基于 Lit 3.x - 使用最新的 Lit 框架构建
- 🎨 Element Plus 风格 - 熟悉的 Element Plus 设计语言
- 📦 Tree Shaking 支持 - 支持按需引入，减小打包体积
- 🔧 TypeScript 支持 - 完整的类型定义
- 🎯 Web Components 标准 - 原生 Web Components，无框架依赖
- 📱 响应式设计 - 适配各种屏幕尺寸
📦 安装
NPM 安装
npm install zss-lit-uiYarn 安装
yarn add zss-lit-uiPNPM 安装
pnpm add zss-lit-ui🚀 快速开始
完整引入
import { ZssButton, ZssInput, ZssTable, ZssMenu, ZssMessage } from 'zss-lit-ui';
import 'zss-lit-ui/dist/zss-lit-ui.min.css';
// 注册所有组件
customElements.define('zss-button', ZssButton);
customElements.define('zss-input', ZssInput);
customElements.define('zss-table', ZssTable);
customElements.define('zss-menu', ZssMenu);按需引入
// 引入单个组件
import { ZssButton } from 'zss-lit-ui/components/basic';
import 'zss-lit-ui/dist/zss-lit-ui.min.css';
// 注册单个组件
customElements.define('zss-button', ZssButton);CDN 引入
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/zss-lit-ui/dist/zss-lit-ui.min.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/zss-lit-ui/dist/zss-lit-ui.umd.js"></script>
<!-- 使用组件 -->
<zss-button type="primary">主要按钮</zss-button>📚 组件使用示例
基础组件
按钮组件
<zss-button type="primary" size="large">主要按钮</zss-button>
<zss-button type="success">成功按钮</zss-button>
<zss-button type="warning">警告按钮</zss-button>
<zss-button type="danger">危险按钮</zss-button>
<zss-button type="text">文本按钮</zss-button>图标组件
<zss-icon name="search" size="20"></zss-icon>
<zss-icon name="home" color="#409eff"></zss-icon>布局组件
<zss-layout>
<div slot="header">头部内容</div>
<div slot="aside">侧边栏内容</div>
<div slot="main">主内容区域</div>
<div slot="footer">底部内容</div>
</zss-layout>表单组件
输入框组件
<zss-input
placeholder="请输入内容"
size="large"
clearable
></zss-input>选择器组件
<zss-select
.options=${[
{ label: '选项一', value: '1' },
{ label: '选项二', value: '2' }
]}
placeholder="请选择"
></zss-select>复选框组件
<zss-checkbox checked>同意协议</zss-checkbox>
<zss-checkbox-group
.options=${[
{ label: '选项A', value: 'a' },
{ label: '选项B', value: 'b' }
]}
></zss-checkbox-group>单选框组件
<zss-radio value="1" checked>选项一</zss-radio>
<zss-radio-group
.options=${[
{ label: '男', value: 'male' },
{ label: '女', value: 'female' }
]}
></zss-radio-group>日期选择器组件
<zss-date-picker
placeholder="选择日期"
format="YYYY-MM-DD"
></zss-date-picker>上传组件
<zss-upload
action="/api/upload"
multiple
accept="image/*"
></zss-upload>数据展示组件
表格组件
<zss-table
.columns=${[
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' }
]}
.data=${[
{ name: '张三', age: 25 },
{ name: '李四', age: 30 }
]}
border
selection
></zss-table>卡片组件
<zss-card
header="卡片标题"
shadow="hover"
>
<div>卡片内容</div>
</zss-card>列表组件
<zss-list
.data=${[
{ id: 1, title: '列表项一', description: '描述信息' },
{ id: 2, title: '列表项二', description: '描述信息' }
]}
border
></zss-list>标签组件
<zss-tag>默认标签</zss-tag>
<zss-tag type="primary">主要标签</zss-tag>
<zss-tag type="success">成功标签</zss-tag>
<zss-tag type="warning">警告标签</zss-tag>
<zss-tag type="danger">危险标签</zss-tag>
<zss-tag closable>可关闭标签</zss-tag>进度条组件
<zss-progress percentage="50" status="success"></zss-progress>
<zss-progress type="circle" percentage="75"></zss-progress>徽章组件
<zss-badge value="5">
<zss-button>消息</zss-button>
</zss-badge>
<zss-badge is-dot>新消息</zss-badge>树形组件
<zss-tree
.data=${[
{
id: 1,
label: '一级节点',
children: [
{ id: 2, label: '二级节点' }
]
}
]}
show-checkbox
></zss-tree>导航组件
菜单组件
<zss-menu
.items=${[
{ label: '首页', value: 'home' },
{ label: '产品', value: 'product' },
{ label: '关于', value: 'about' }
]}
></zss-menu>面包屑组件
<zss-breadcrumb
.items=${[
{ label: '首页', href: '/' },
{ label: '用户管理', href: '/users' },
{ label: '用户详情', href: '/users/123' }
]}
></zss-breadcrumb>分页组件
<zss-pagination
total="100"
page-size="10"
current-page="1"
></zss-pagination>标签页组件
<zss-tabs
.tabs=${[
{ label: '标签一', value: 'tab1' },
{ label: '标签二', value: 'tab2' }
]}
></zss-tabs>反馈组件
消息组件
// 使用静态方法
ZssMessage.success('操作成功');
ZssMessage.error('操作失败');
ZssMessage.warning('警告信息');
ZssMessage.info('提示信息');对话框组件
<zss-button @click=${() => this.showDialog = true}>打开对话框</zss-button>
<zss-dialog
title="对话框标题"
.visible=${this.showDialog}
@close=${() => this.showDialog = false}
>
<div>对话框内容</div>
</zss-dialog>加载组件
<zss-button @click=${() => this.showLoading = true}>显示加载</zss-button>
<zss-loading
.visible=${this.showLoading}
text="加载中..."
></zss-loading>通知组件
ZssNotification.info({
title: '信息通知',
message: '这是一条信息通知'
});
ZssNotification.success({
title: '成功通知',
message: '操作成功完成'
});🔧 开发
环境要求
- Node.js >= 16.0.0
- npm >= 7.0.0 或 pnpm >= 6.0.0
克隆项目
git clone <repository-url>
cd zss-lit-ui安装依赖
npm install
# 或
pnpm install启动开发服务器
npm run dev访问 http://localhost:5173 查看示例页面。
构建项目
# 构建所有目标
npm run build
# 仅构建库文件
npm run build:lib
# 构建 TypeScript 声明文件
npm run build:types
# 构建示例页面
npm run build:examples
# 构建 UMD 格式
npm run build:umd
# 构建 CSS 文件
npm run build:css代码检查
npm run lint代码格式化
npm run format运行测试
npm run test📁 项目结构
zss-lit-ui/
├── src/ # 源代码
│ ├── components/ # 组件目录
│ │ ├── basic/ # 基础组件
│ │ ├── form/ # 表单组件
│ │ ├── data/ # 数据展示组件
│ │ ├── navigation/ # 导航组件
│ │ └── feedback/ # 反馈组件
│ ├── styles/ # 样式文件
│ ├── utils/ # 工具函数
│ └── index.ts # 主入口文件
├── examples/ # 示例代码
├── dist/ # 构建输出
├── scripts/ # 构建脚本
└── package.json # 项目配置📦 发布到 NPM
1. 准备发布
确保已完成以下步骤：
- [ ] 更新
package.json中的版本号 - [ ] 运行
npm run build确保构建成功 - [ ] 运行
npm run test确保测试通过 - [ ] 更新 CHANGELOG.md（如果有）
2. 登录 NPM
npm login3. 发布包
npm publish4. 发布到其他注册表（可选）
# 发布到 GitHub Packages
npm publish --registry=https://npm.pkg.github.com
# 发布到公司私有注册表
npm publish --registry=<your-registry-url>🔗 浏览器兼容性
- Chrome >= 61
- Firefox >= 63
- Safari >= 10.1
- Edge >= 79
🤝 贡献
欢迎贡献代码！请阅读我们的贡献指南。
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开 Pull Request
📄 许可证
本项目基于 MIT 许可证开源。
🔗 相关链接
🙏 致谢
感谢以下项目的启发：
- Lit - 优秀的 Web Components 框架
- Element Plus - 优秀的 Vue 3 UI 组件库
如有问题，请提交 Issue 或通过邮件联系我们。