# wheat-ui
**Repository Path**: dooreasy/wheat-ui
## Basic Information
- **Project Name**: wheat-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-06-27
- **Last Updated**: 2025-06-08
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# wheat-ui
通过 web components 打造全新组件库
## 适配所有框架
无论你的技术栈使用的是 angular、vue、react；不存在框架兼容问题，你就当做标签直接使用
## 示例
## 在 html 中使用
### 将 dist 中的 wheat.ui.min.js 保存在本地或者 CDN 上，然后通过 script 引入即可
```html
Modal
弹框内容
```
## 在 angular、vue、react 项目中使用，
### 安装
```bash
npm i web-component-wheat-ui
```
## 使用
```bash
import 'web-component-wheat-ui'
```
## 在 React 中使用
```jsx
import React, { useState, useEffect } from 'react'
import 'web-component-wheat-ui'
const App = () => {
const [visible, setvisible] = useState(false)
useEffect(() => {
const MyModalDom = document.querySelector('wheat-modal')
MyModalDom.addEventListener('onCancel', (value) => {
const {
detail: { visible }
} = value
console.log('触发取消方法')
setvisible(visible)
})
MyModalDom.addEventListener('onConfirm', (value) => {
console.log('触发确定方法')
setvisible(false)
})
}, [])
return (
弹框内容
)
}
export default App
```
## 在 Vue 中使用
```vue
```
[更多>>](https://github.com/glean-wheat/wheat-ui/tree/master/src)
## 贡献流程
1. 添加 SSH
2. clone 仓库
```
https://github.com/glean-wheat/wheat-ui
```
3. 新建 issue
发现问题或者有开发者提出的问题了后，在`https://github.com/glean-wheat/wheat-ui/issues`创建issue;
4. 在develop中拉取分支
- 根据第三步创建的`issue`后，根据生成的`id`,创建分支，一般`bug`类的 命名为 `hotfix/#+ issueID`; 新增功能 `feature/#+issueID`
eg:
```
feature/#3
```
5. 提交
- 提交的时可根据 `commitlint` 规范进行提交；描述信息为该 `issue`的`id`;这样`github`会根据`id`进行关联
eg:
```
git commit -m "feat: #3"
```
6: 提交PR
master 是保护分支；需要有 review 之后；才可合并
## 物料参考
- https://xiaomi.github.io/hiui/zh-CN
## 文档规划
- [ ] 文档接入； storybook
- [ ] 单测接入
- [ ] react、vue 使用样式案例