通过 web components 打造全新组件库
无论你的技术栈使用的是 angular、vue、react;不存在框架兼容问题,你就当做标签直接使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Modal</title>
</head>
<style></style>
<body>
<button onclick="showModal()">显示弹框</button>
<wheat-modal title="弹窗" visible="false" maskCloseable="true">
<div slot="content">
弹框内容
</div>
</wheat-modal>
</body>
<script src="./dist/wheat.ui.min.js"></script>
<script>
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)
}
</script>
</html>
npm i web-component-wheat-ui
import 'web-component-wheat-ui'
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 (
<div className="App">
<button
onClick={() => {
setvisible(true)
}}
>
显示弹框
</button>
<wheat-modal title="title" visible={visible}>
<div slot="content">弹框内容</div>
</wheat-modal>
</div>
)
}
export default App
<template>
<div>
<button @click="showModal">
显示弹框
</button>
<wheat-modal title="title" :visible="visible.toString()">
<div slot="content">弹框内容</div>
</wheat-modal>
<div>{{ visible }}</div>
</div>
</template>
<script>
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
}
}
}
</script>
- 添加 SSH
- clone 仓库
https://github.com/glean-wheat/wheat-ui
- 新建 issue
发现问题或者有开发者提出的问题了后,在https://github.com/glean-wheat/wheat-ui/issues
创建issue;
- 在develop中拉取分支
- 根据第三步创建的
issue
后,根据生成的id
,创建分支,一般bug
类的 命名为hotfix/#+ issueID
; 新增功能feature/#+issueID
eg:
feature/#3
- 提交
- 提交的时可根据
commitlint
规范进行提交;描述信息为该issue
的id
;这样github
会根据id
进行关联
eg:
git commit -m "feat: #3"
6: 提交PR
master 是保护分支;需要有 review 之后;才可合并
- 文档接入; storybook
- 单测接入
- react、vue 使用样式案例