https://github.com/glean-wheat/wheat-ui

Web Components 组件库；拍平框架差异
https://github.com/glean-wheat/wheat-ui

lit-html react scss storybook vue webcomponents

Last synced: about 1 month ago
JSON representation

Web Components 组件库；拍平框架差异

• Host: GitHub
• URL: https://github.com/glean-wheat/wheat-ui
• Owner: glean-wheat
• Created: 2020-11-14T22:50:31.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-13T13:14:39.000Z (over 1 year ago)
• Last Synced: 2024-09-29T00:42:13.074Z (about 2 months ago)
• Topics: lit-html, react, scss, storybook, vue, webcomponents
• Language: SCSS
• Homepage: https://glean-wheat.github.io/wheat-ui/storybook-static/
• Size: 8.43 MB
• Stars: 26
• Watchers: 3
• Forks: 5
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# wheat-ui

通过 web components 打造全新组件库

## 适配所有框架

无论你的技术栈使用的是 angular、vue、react；不存在框架兼容问题，你就当做标签直接使用

## 示例

![image](https://user-images.githubusercontent.com/24740506/121101469-7a400980-c82e-11eb-9b25-ba99cc5a4041.png)

## 在 html 中使用

### 将 dist 中的 wheat.ui.min.js 保存在本地或者 CDN 上，然后通过 script 引入即可

```html

  

    

    

    

    Modal

  

  

  

    显示弹框

    

      


        弹框内容

      

    

  

  

  

    const MyModalDom = document.querySelector('wheat-modal')


    MyModalDom.addEventListener('onCancel', (value) => {

      const {

        detail: { visible }

      } = value

      console.log('触发取消方法')

      MyModalDom.setAttribute('visible', visible)

    })

    MyModalDom.addEventListener('onConfirm', (value) => {

      console.log('触发确定方法')

      MyModalDom.setAttribute('visible', false)

    })

    const showModal = () => {

      MyModalDom.setAttribute('visible', true)

    }

  

```

## 在 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 (

    


       {

          setvisible(true)

        }}

      >

        显示弹框

      

      

        
弹框内容

      

    

  )

}


export default App

```

## 在 Vue 中使用

```vue

  


    

      显示弹框

    

    

      
弹框内容

    

    
{{ visible }}

  


import 'web-component-wheat-ui'

export default {

  data() {

    return {

      visible: false

    }

  },

  mounted() {

    const MyModalDom = document.querySelector('wheat-modal')

    MyModalDom.addEventListener('onCancel', (value) => {

      const {

        detail: { visible }

      } = value

      console.log('触发取消方法', value)

      this.visible = visible

    })

    MyModalDom.addEventListener('onConfirm', (value) => {

      console.log('触发确定方法', value)

      this.visible = false

      this.hidden()

    })

  },

  methods: {

    showModal() {

      this.visible = true

    },

    hidden() {

      this.visible = false

    }

  }

}

```

[更多>>](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 之后；才可合并