Commit ca43b3ee authored by AU-PRO's avatar AU-PRO

add new code

parent e66c474a
...@@ -117,7 +117,7 @@ class PopRotate extends Component { ...@@ -117,7 +117,7 @@ class PopRotate extends Component {
render() { render() {
const { resList, type, turnTableList } = this.state const { resList, type, turnTableList } = this.state
return ( return (
<div className={type === 'spot' ? 'pop_commontt pop_spottt' : 'pop_commontt'}> <div className="pop_commontt">
<img className='comPop_close_btn poprotate_close' src={resList['95e51d5a-c54c-4e03-9aa6-bfec258bc7d4'].url} onClick={this.rotateClose} alt=""/> <img className='comPop_close_btn poprotate_close' src={resList['95e51d5a-c54c-4e03-9aa6-bfec258bc7d4'].url} onClick={this.rotateClose} alt=""/>
......
# 安装 ## 简介
```bash 1.0
npm i git+ssh://git@gitlab2.dui88.com:wanghongyuan/teddi.git --save >基于redux做的全局状态管理 本质通过 Provider、connect 链接组件去共享一个state
>
>使用 state.stateInitPop.popArr 这个 数组管理复数个弹窗;通过 AUPOP组件 渲染弹窗并维持 弹窗实例在需要时不被消除
>
>第一个版本比较笨重,后期会逐渐将方法封装,减少使用时对文件的改动。并增加记录指针,支持回退或前进到 某个 弹窗 上。下个版本考虑去redux的可能性
## 改造项目以为使用
### app.jsx
>进行简单的改造
```js
import store from './redux/store' // Redux --> store
import { Provider } from 'react-redux' // Redux --> Provider
import AUPop from "./components/AUPop/AUPop.jsx" // Redux --> AUPop
import PageHome from "./pages/PageHome/PageHome.jsx";
class App extends Component {
render() {
return (
<Provider store={store}>
<>
{/* 页面 */}
<PageHome />
{/* 弹窗 */}
<AUPop/>
</>
</Provider>
);
}
}
```
### PageHome.jsx
>此处对应页面级的 Components
```js
import { AUConnect } from '../../redux/auConnect';
// some code about Page Components build
class PageHome extends Component {
}
// 此步骤为使用 connect 将组件包裹为 provider 的消费者
export default AUConnect(PageHome)
``` ```
# 使用 ### components/AUPop/popMap.js
>将需要用到的弹窗组件放入 map文件中
```js ```js
import { Countdown } from "teddi"; import PopA from '../pop/PopA/PopA.jsx'
class Pageindex extends Component { import PopB from '../pop/PopB/PopB.jsx'
componentDidMount() {
const countdwon = new Countdown("剩余时间:{0}", 3600, "hhmmss"); let popMap = new Map()
countdwon.on("update", this.onTimer, this);
countdwon.start(); popMap.set("PopA", PopA) // 定义弹窗别名 PopA
popMap.set("PopB", PopB)
export default popMap
```
## 在页面中调用
#### PageHome.jsx
```js
// 开启弹窗 - 下个版本封装下
this.props.showPop({
type: 'PopDefault', // 弹窗别名
data: {}, // 传递的参数 (选填)
fn: () => {}, // 设置回调函数 (选填) (this 指向为当前调用弹窗的父元素)
cover: true, // 设置该弹窗 的出现模式,true:覆盖在上个弹窗之上,false/不填:替换上个弹窗
ctx: this // 当前调用父元素的 context,防止需要执行的父组件函数过多,或者不满足具体需求时 (选填)
})
// 关闭弹窗最上层弹窗 - 下个版本封装下
this.props.showPop({ type: 0 })
// 关闭所有弹窗 - 下个版本发
// clearAll()
// 关闭某层弹窗 - 下个版本发
// closeBack(-1)
```
## 弹窗接受 传递参数 / 回调函数 / 父元素context
#### PopA.jsx
```js
class PopRotate extends Component {
constructor(props) {
super(props)
this.state = this.state || {
data: this.props.data,
fn: this.props.fn,
ctx: this.props.ctx
}
} }
onTimer(data) { close = () => {
console.log(data); // 每个弹窗都自带关闭方法可调用
this.setState({ text: data }); this.props.onClose()
} }
} demoFun01 = () => {
export default Pageindex; // 调用父元素回传的回调
this.props.fn()
}
demoFun02 = () => {
// 调用父元素身上的 方法
this.props.ctx.someParentsFunc()
}
render() {
const { resList, type, turnTableList } = this.state
return (
<div className="pop_wrapper">
<div className='pop_close_btn' onClick={this.close}></div>
<div className='pop_some_btn' onClick={this.demoFun01}></div>
<div className='pop_some_btn' onClick={this.demoFun02}></div>
</div>
);
}
}
``` ```
{
"compilerOptions": {
"noImplicitAny": true,
"target": "es5",
"module": "commonjs",
"declaration": true,
"outDir": "./dist",
"declarationDir": "./dist",
"strict": true,
"lib": [
"DOM",
"ES2015",
]
},
"exclude": [
"node_modules",
"dist",
"types"
]
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment