Skip to content
This repository was archived by the owner on Oct 27, 2021. It is now read-only.

Commit 4c92270

Browse files
author
pengshanglong
committed
feat: add Modal
1 parent b902321 commit 4c92270

File tree

6 files changed

+257
-1
lines changed

6 files changed

+257
-1
lines changed

‎src/components/modal/action/index.jsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import classNames from 'classnames'
2+
3+
export default {
4+
name: 'ModalAction',
5+
props: {
6+
isSimple: {
7+
type: Boolean,
8+
default: false,
9+
},
10+
className: {
11+
type: [Object, String],
12+
default: () => '',
13+
},
14+
},
15+
render() {
16+
const rootClass = classNames(
17+
'at-modal__footer',
18+
{
19+
'at-modal__footer--simple': this.isSimple,
20+
},
21+
this.className
22+
)
23+
24+
return (
25+
<view class={rootClass}>
26+
<view class="at-modal__action">{this.$slots.default}</view>
27+
</view>
28+
)
29+
},
30+
}

‎src/components/modal/content/index.jsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import classNames from 'classnames'
2+
3+
export default {
4+
name: 'ModalContent',
5+
props: {
6+
className: {
7+
type: [Object, String],
8+
default: () => '',
9+
},
10+
},
11+
render() {
12+
const rootClass = classNames('at-modal__content', this.className)
13+
return (
14+
<scroll-view scrollY class={rootClass}>
15+
{this.$slots.default}
16+
</scroll-view>
17+
)
18+
},
19+
}

‎src/components/modal/header/index.jsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import classNames from 'classnames'
2+
3+
export default {
4+
name: 'ModalHeader',
5+
props: {
6+
className: {
7+
type: [Object, String],
8+
default: () => '',
9+
},
10+
},
11+
render() {
12+
const rootClass = classNames('at-modal__header', this.className)
13+
return <view class={rootClass}>{this.$slots.default}</view>
14+
},
15+
}

‎src/components/modal/index.jsx

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import classNames from 'classnames'
2+
import ModalAction from './action/index'
3+
import ModalContent from './content/index'
4+
import ModalHeader from './header/index'
5+
// import Button from '../button/index'
6+
import { getEnvs } from '../../utils/common'
7+
8+
export default {
9+
name: 'Modal',
10+
props: {
11+
title: {
12+
type: String,
13+
default: '',
14+
},
15+
isOpened: {
16+
type: Boolean,
17+
default: false,
18+
},
19+
closeOnClickOverlay: {
20+
type: Boolean,
21+
default: false,
22+
},
23+
onCancel: {
24+
type: Function,
25+
default: () => () => {},
26+
},
27+
onConfirm: {
28+
type: Function,
29+
default: () => () => {},
30+
},
31+
onClose: {
32+
type: Function,
33+
default: () => () => {},
34+
},
35+
content: {
36+
type: String,
37+
default: '',
38+
},
39+
cancelText: {
40+
type: String,
41+
default: '',
42+
},
43+
confirmText: {
44+
type: String,
45+
default: '',
46+
},
47+
},
48+
data() {
49+
return {
50+
state: {
51+
...getEnvs(),
52+
_isOpened: this.isOpened,
53+
},
54+
}
55+
},
56+
watch: {
57+
isOpened(val) {
58+
if (val !== this.state._isOpened) {
59+
this.setState({
60+
_isOpened: val,
61+
})
62+
}
63+
},
64+
},
65+
methods: {
66+
setState(newState) {
67+
const ks = Object.keys(newState)
68+
if (Array.isArray(ks)) {
69+
ks.forEach((k) => {
70+
if (k in this.state) {
71+
this.state[k] = newState[k]
72+
}
73+
})
74+
}
75+
},
76+
handleClickOverlay() {
77+
if (this.closeOnClickOverlay) {
78+
this.setState(
79+
{
80+
_isOpened: false,
81+
},
82+
this.handleClose
83+
)
84+
}
85+
},
86+
87+
handleClose(event) {
88+
if (typeof this.onClose === 'function') {
89+
this.onClose(event)
90+
}
91+
},
92+
93+
handleCancel(event) {
94+
if (typeof this.onCancel === 'function') {
95+
this.onCancel(event)
96+
}
97+
},
98+
99+
handleConfirm(event) {
100+
if (typeof this.onConfirm === 'function') {
101+
this.onConfirm(event)
102+
}
103+
},
104+
105+
handleTouchMove(e) {
106+
e.stopPropagation()
107+
},
108+
},
109+
render() {
110+
const { _isOpened, isWEB } = this.state
111+
const { title, content, cancelText, confirmText } = this
112+
const rootClass = classNames(
113+
'at-modal',
114+
{
115+
'at-modal--active': _isOpened,
116+
},
117+
this.className
118+
)
119+
console.log('rootClass', rootClass)
120+
if (title || content) {
121+
const isRenderAction = cancelText || confirmText
122+
return (
123+
<view class={rootClass}>
124+
<view onTap={this.handleClickOverlay} class="at-modal__overlay" />
125+
<view class="at-modal__container">
126+
{title && (
127+
<ModalHeader>
128+
<view>{title}</view>
129+
</ModalHeader>
130+
)}
131+
{content && (
132+
<ModalContent>
133+
<view class="content-simple">
134+
{isWEB ? (
135+
<view
136+
// @ts-ignore
137+
dangerouslySetInnerHTML={{
138+
__html: content.replace(/\n/g, '<br/>'),
139+
}}></view>
140+
) : (
141+
<view>{content}</view>
142+
)}
143+
</view>
144+
</ModalContent>
145+
)}
146+
{isRenderAction && (
147+
<ModalAction isSimple>
148+
{cancelText && <button onTap={this.handleCancel}>{cancelText}</button>}
149+
{confirmText && <button onTap={this.handleConfirm}>{confirmText}</button>}
150+
</ModalAction>
151+
)}
152+
</view>
153+
</view>
154+
)
155+
}
156+
157+
return (
158+
<view onTouchMove={this.handleTouchMove} class={rootClass}>
159+
<view class="at-modal__overlay" onTap={this.handleClickOverlay} />
160+
<view class="at-modal__container">{this.$slots.default}</view>
161+
</view>
162+
)
163+
},
164+
}

‎src/components/notes.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
- Noticebar marquee 属性 还不可用
1+
- Noticebar marquee 属性 还不可用
2+
- Button 未完成，Invalid handler for event "getPhoneNumber": got undefined 等错误

‎src/pages/index/index.vue

+27
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,25 @@
22
<view
33
class="index"
44
>
5+
<Modal>
6+
<ModalHeader>标题</ModalHeader>
7+
<ModalContent>
8+
这里是正文内容，欢迎加入京东凹凸实验室
9+
这里是正文内容，欢迎加入京东凹凸实验室
10+
这里是正文内容，欢迎加入京东凹凸实验室
11+
</ModalContent>
12+
<ModalAction> <button>取消</button> <button>确定</button> </ModalAction>
13+
</Modal>
14+
<Modal
15+
is-opened
16+
title="标题"
17+
cancel-text="取消"
18+
confirm-text="确认"
19+
:on-close="onClick"
20+
:on-cancel="onClick"
21+
:on-confirm="onClick"
22+
content="欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室"
23+
/>
524
<Progress :percent="80" />
625
<ActionSheet>
726
<ActionSheetItem>
@@ -119,6 +138,10 @@ import Divider from '../../components/divider/index.jsx'
119138
import ActionSheet from '../../components/action-sheet/index.jsx'
120139
import ActionSheetItem from '../../components/action-sheet/body/item/index.jsx'
121140
import Progress from '../../components/progress/index.jsx'
141+
import Modal from '../../components/modal/index.jsx'
142+
import ModalHeader from '../../components/modal/header/index.jsx'
143+
import ModalContent from '../../components/modal/content/index.jsx'
144+
import ModalAction from '../../components/modal/action/index.jsx'
122145
123146
export default {
124147
name: 'Index',
@@ -138,6 +161,10 @@ export default {
138161
ActionSheet,
139162
ActionSheetItem,
140163
Progress,
164+
Modal,
165+
ModalHeader,
166+
ModalContent,
167+
ModalAction,
141168
},
142169
data() {
143170
return {

0 commit comments

Comments
 (0)