Skip to content

Commit 8e60609

Browse files
jin5354jin5354
committed
add component MessageBox
1 parent 744b3cb commit 8e60609

13 files changed

+689
-2
lines changed

‎.eslintrc.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "wdfe",
3+
"plugins": [
4+
"vue"
5+
],
6+
"parser": "babel-eslint"
7+
}

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
移动端组件库

‎package.json

+6-2
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@
22
"name": "wdui",
33
"version": "0.0.1",
44
"description": "wdui",
5-
"main": "index.js",
5+
"main": "src/index.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1"
88
},
99
"author": "wdfe",
1010
"license": "MIT",
1111
"devDependencies": {
12-
"lerna": "2.0.0-beta.30"
12+
"eslint": "^3.12.2",
13+
"eslint-config-wdfe": "http://10.8.96.35:2009/package/eslint-config-wdfe/latest",
14+
"eslint-plugin-vue": "^1.0.0",
15+
"lerna": "2.0.0-beta.30",
16+
"vue": "^2.1.7"
1317
}
1418
}

‎packages/MessageBox/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
MessageBox

‎packages/MessageBox/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './src/Message.js'

‎packages/MessageBox/src/MessageBox.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import Vue from 'vue'
2+
import MessageBoxComponent from './MessageBox.vue'
3+
4+
const MessageBoxConstructor = Vue.extend(MessageComponent)
5+
6+
const init = () => {
7+
return new MessageBoxConstructor({
8+
el: document.createElement('div')
9+
})
10+
}
11+
12+
const MessageBox = {
13+
alert(options = {}) {
14+
const instance = init()
15+
instance.open = options.open || true
16+
instance.title = options.title
17+
instance.text = options.text
18+
instance.type = 'alert'
19+
instance.isShowCancelButton = false
20+
instance.onMaskClick = options.onMaskClick ? options.onMaskClick.bind(null, instance) : (() => {})
21+
instance.onClickOutSide = options.onClickOutSide ? options.onClickOutSide.bind(null, instance) : (() => {})
22+
instance.onConfirm = options.onConfirm ? options.onConfirm.bind(null, instance) : (() => {instance.open = false})
23+
instance.onCancel = options.onCancel ? options.onCancel.bind(null, instance) : (() => {instance.open = false})
24+
instance.onShow = options.onShow ? options.onShow.bind(null, instance) : (() => {})
25+
instance.onHide = options.onHide ? options.onHide.bind(null, instance) : (() => {})
26+
document.body.appendChild(instance.$el)
27+
return instance
28+
},
29+
confirm(options = {}) {
30+
const instance = init()
31+
instance.open = options.open || true
32+
instance.title = options.title
33+
instance.text = options.text
34+
instance.type = 'confirm'
35+
instance.isShowCancelButton = true
36+
instance.isColumnButton = options.isColumnButton || false
37+
instance.onMaskClick = options.onMaskClick ? options.onMaskClick.bind(null, instance) : (() => {})
38+
instance.onClickOutSide = options.onClickOutSide ? options.onClickOutSide.bind(null, instance) : (() => {})
39+
instance.onConfirm = options.onConfirm ? options.onConfirm.bind(null, instance) : (() => {instance.open = false})
40+
instance.onCancel = options.onCancel ? options.onCancel.bind(null, instance) : (() => {instance.open = false})
41+
instance.onShow = options.onShow ? options.onShow.bind(null, instance) : (() => {})
42+
instance.onHide = options.onHide ? options.onHide.bind(null, instance) : (() => {})
43+
document.body.appendChild(instance.$el)
44+
return instance
45+
},
46+
prompt(options = {}) {
47+
const instance = init()
48+
instance.open = options.open || true
49+
instance.title = options.title
50+
instance.text = options.text
51+
instance.type = 'prompt'
52+
instance.isShowCancelButton = options.isShowCancelButton || true
53+
instance.isColumnButton = options.isColumnButton || false
54+
instance.isShowInput = true
55+
instance.onMaskClick = options.onMaskClick ? options.onMaskClick.bind(null, instance) : (() => {})
56+
instance.onClickOutSide = options.onClickOutSide ? options.onClickOutSide.bind(null, instance) : (() => {})
57+
instance.onConfirm = options.onConfirm ? options.onConfirm.bind(null, instance) : (() => {instance.open = false})
58+
instance.onCancel = options.onCancel ? options.onCancel.bind(null, instance) : (() => {instance.open = false})
59+
instance.onShow = options.onShow ? options.onShow.bind(null, instance) : (() => {})
60+
instance.onHide = options.onHide ? options.onHide.bind(null, instance) : (() => {})
61+
instance.validate = options.validate
62+
document.body.appendChild(instance.$el)
63+
return instance
64+
}
65+
}
66+
67+
Vue.$MessageBox = Vue.prototype.$MessageBox = MessageBox
68+
export default MessageBox

‎packages/MessageBox/src/MessageBox.vue

+261
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
<template>
2+
<span>
3+
<transition :name="messageBoxTransition" @after-enter="onShow()" @after-leave="onHide()">
4+
<div class="wd-messagebox" ref="popup" v-if="open" :style="{'z-index': zIndex}">
5+
<div class="wd-messagebox-content">
6+
<header v-if="title">{{ title }}</header>
7+
<p class="wd-messagebox-content-text">{{ text }}</p>
8+
<input class="wd-messagebox-content-input" v-if="isShowInput" v-model="inputValue" ref="input"></input>
9+
</div>
10+
<footer :class="{'wd-messagebox-footer-row': !isColumnButton, 'wd-messagebox-footer-column': isColumnButton}">
11+
<span @click="onCancel" v-if="isShowCancelButton">{{ cancelText }}</span>
12+
<span @click="confirmHandler" :class="{disabled: isConfirmDisabled}">{{ confirmText }}</span>
13+
</footer>
14+
</div>
15+
</transition>
16+
</span>
17+
</template>
18+
19+
<script>
20+
21+
import Popup from '../../util/popup/index.js'
22+
23+
export default {
24+
name: 'MessageBox',
25+
mixins: [Popup],
26+
props: {
27+
transition: {
28+
type: String,
29+
default: 'fade'
30+
},
31+
title: {
32+
type: [String, Number],
33+
default: ''
34+
},
35+
text: {
36+
type: [String, Number],
37+
default: ''
38+
},
39+
type: {
40+
type: [String],
41+
default: 'alert'
42+
},
43+
isShowInput: {
44+
type: Boolean,
45+
default: false
46+
},
47+
isShowCancelButton: {
48+
type: Boolean,
49+
default: false
50+
},
51+
isColumnButton: {
52+
type: Boolean,
53+
default: false
54+
},
55+
inputType: {
56+
type: [String],
57+
default: 'text'
58+
},
59+
confirmText: {
60+
type: [String, Number],
61+
default: '确定'
62+
},
63+
cancelText: {
64+
type: [String, Number],
65+
default: '取消'
66+
},
67+
onShow: {
68+
type: Function,
69+
default: () => {}
70+
},
71+
onHide: {
72+
type: Function,
73+
default: () => {}
74+
},
75+
onConfirm: {
76+
type: Function,
77+
default: () => {}
78+
},
79+
onCancel: {
80+
type: Function,
81+
default: () => {}
82+
},
83+
onMaskClick: {
84+
type: Function,
85+
default: () => {}
86+
},
87+
onClickOutSide: {
88+
type: Function,
89+
default: () => {}
90+
},
91+
validate: {
92+
type: Function,
93+
default: () => {return false}
94+
}
95+
},
96+
data() {
97+
return {
98+
inputValue: ''
99+
}
100+
},
101+
computed: {
102+
messageBoxTransition() {
103+
if(this.transition) {
104+
return `messagebox-${this.transition}`
105+
}else {
106+
return ''
107+
}
108+
},
109+
isConfirmDisabled() {
110+
if(this.type === 'prompt') {
111+
return !this.validate(this.inputValue)
112+
}else {
113+
return false
114+
}
115+
}
116+
},
117+
created() {
118+
},
119+
watch: {
120+
inputType(val) {
121+
this.handleInputType(val)
122+
}
123+
},
124+
methods: {
125+
maskClick() {
126+
this.onMaskClick()
127+
},
128+
clickOutSide() {
129+
this.onClickOutSide()
130+
},
131+
handleInputType(val) {
132+
if (val === 'range' || !this.$refs.input) {
133+
return
134+
}
135+
this.$refs.input.type = val
136+
},
137+
confirmHandler() {
138+
if(!this.isConfirmDisabled) {
139+
this.onConfirm()
140+
}
141+
}
142+
}
143+
}
144+
145+
</script>
146+
147+
<style lang="sass">
148+
149+
$background-color: #FFFFFF;
150+
$title-color: #222222;
151+
$text-color: #737373;
152+
$border-color: #dddddd;
153+
$button-text-color: #4384d8;
154+
$button-disabled-text-color: #cacaca;
155+
$input-border-color: #9a9a9a;
156+
$title-font-size: 36px;
157+
$text-font-size: 28px;
158+
$button-font-size: 32px;
159+
160+
.wd-messagebox {
161+
width: 600px;
162+
position: fixed;
163+
background-color: $background-color;
164+
top: 50%;
165+
left: 50%;
166+
transform: translate3d(-50%, -50%, 0);
167+
backface-visibility: hidden;
168+
overflow: hidden;
169+
border-radius: 16px;
170+
171+
.wd-messagebox-content {
172+
display: flex;
173+
flex-direction: column;
174+
align-items: center;
175+
justify-content: center;
176+
padding: 56px;
177+
min-height: 200px;
178+
box-sizing: border-box;
179+
180+
header {
181+
margin-bottom: 16px;
182+
text-align: center;
183+
align-self: stretch;
184+
font-size: $title-font-size; /* px */
185+
line-height: 50px;
186+
color: $title-color;
187+
font-weight: bold;
188+
189+
&+.wd-messagebox-content-text {
190+
font-size: 28px; /* px */
191+
color: $text-color;
192+
line-height: 40px;
193+
}
194+
}
195+
196+
.wd-messagebox-content-text {
197+
text-align: center;
198+
line-height: 50px;
199+
font-size: $title-font-size; /* px */
200+
}
201+
202+
input {
203+
margin-top: 40px;
204+
padding: 16px;
205+
width: 488px;
206+
height: 64px;
207+
font-size: 28px;
208+
line-height: 64px;
209+
border: 1px solid $input-border-color; /* no */
210+
border-radius: 4px; /* no */
211+
box-sizing: border-box;
212+
}
213+
}
214+
215+
footer {
216+
display: flex;
217+
border-top: 1px solid $border-color; /* no */
218+
219+
span {
220+
display: flex;
221+
flex: 1;
222+
height: 88px;
223+
align-items: center;
224+
justify-content: center;
225+
font-size: $button-font-size; /* px */
226+
color: $button-text-color;
227+
228+
&.disabled {
229+
color: $button-disabled-text-color;
230+
}
231+
}
232+
233+
&.wd-messagebox-footer-row {
234+
flex-direction: row;
235+
236+
span {
237+
&:first-child {
238+
border-right: 1px solid $border-color; /* no */
239+
}
240+
}
241+
}
242+
&.wd-messagebox-footer-column {
243+
flex-direction: column;
244+
245+
span {
246+
&:first-child {
247+
border-bottom: 1px solid $border-color; /* no */
248+
}
249+
}
250+
}
251+
}
252+
}
253+
.messagebox-fade-enter-active,
254+
.messagebox-fade-leave-active {
255+
transition: opacity .3s;
256+
}
257+
.messagebox-fade-enter,
258+
.messagebox-fade-leave-active {
259+
opacity: 0;
260+
}
261+
</style>

‎src/index.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import MessageBox from '../packages/MessageBox/index.js'
2+
3+
const install = function() {
4+
if(typeof window !== 'undefined' && window.WDUIInstalled) {
5+
return
6+
}
7+
}
8+
9+
if (typeof window !== 'undefined' && window.Vue) {
10+
install(window.Vue)
11+
window.WDUIInstalled = true
12+
}
13+
14+
module.exports = {
15+
MessageBox
16+
}

0 commit comments

Comments
 (0)