Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
T
teddi
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
wildfirecode13
teddi
Commits
ca43b3ee
Commit
ca43b3ee
authored
Nov 16, 2020
by
AU-PRO
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add new code
parent
e66c474a
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
128 additions
and
37 deletions
+128
-37
PopRotate.jsx
project/src/components/pop/PopRotate/PopRotate.jsx
+1
-1
readme.md
readme.md
+127
-16
tsconfig.json
tsconfig.json
+0
-20
No files found.
project/src/components/pop/PopRotate/PopRotate.jsx
View file @
ca43b3ee
...
@@ -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=
""
/>
...
...
readme.md
View file @
ca43b3ee
# 安装
## 简介
```
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
>
);
}
}
```
```
tsconfig.json
deleted
100644 → 0
View file @
e66c474a
{
"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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment