Skip to content

Commit 5e9a5c5

Browse files
zepangzepang
committed
完善文档
1 parent 0e73d25 commit 5e9a5c5

File tree

3 files changed

+245
-21
lines changed

3 files changed

+245
-21
lines changed

‎docs/.vuepress/components/modal/index.vue‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@
44
<div class="lai-modal-overlay" v-if="overlay && isShow"></div>
55
</transition>
66
<transition name="fade-modal">
7-
<div class="lai-modal" v-if="isShow" v-click-outside="hide" style="min-width: 560px; min-height: 280px;">
7+
<div
8+
class="lai-modal"
9+
v-if="isShow"
10+
v-click-outside="hide"
11+
style="min-width: 560px; min-height: 280px;"
12+
>
813
<button class="modal-close close-button" @click="hide">x</button>
914
<div class="modal-content">
1015
<slot></slot>
@@ -14,7 +19,7 @@
1419
</div>
1520
</template>
1621
<script>
17-
import clickOutside from '../../directives/click-outside'
22+
import clickOutside from "../../directives/click-outside";
1823
export default {
1924
props: {
2025
overlay: {
@@ -30,32 +35,31 @@ export default {
3035
default: () => {}
3136
}
3237
},
33-
data () {
38+
data() {
3439
return {
35-
isShow: this.value,
36-
}
40+
isShow: this.value
41+
};
3742
},
3843
directives: {
39-
'click-outside': clickOutside
44+
"click-outside": clickOutside
4045
},
4146
methods: {
42-
hide () {
43-
this.isShow = false
44-
this.$emit('input', this.isShow)
47+
hide() {
48+
this.isShow = false;
49+
this.$emit("input", this.isShow);
4550
}
4651
},
4752
watch: {
48-
value (val) {
53+
value(val) {
4954
if (this.ishow !== val) {
50-
this.isShow = val
55+
this.isShow = val;
5156
}
5257
}
5358
}
54-
}
59+
};
5560
</script>
5661

5762
<style lang="less" scoped>
58-
5963
.modal-wrapper {
6064
position: absolute;
6165
top: 0;
@@ -71,7 +75,7 @@ export default {
7175
bottom: 0;
7276
left: 0;
7377
z-index: 99;
74-
background-color: rgba(0,0,0,.4);
78+
background-color: rgba(0, 0, 0, 0.4);
7579
z-index: 90;
7680
}
7781
.modal-main {
@@ -86,7 +90,7 @@ export default {
8690
height: 300px;
8791
background-color: #ffffff;
8892
border-radius: 4px;
89-
box-shadow: 0px 0px 6px rgba(0, 0, 0, .1);
93+
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
9094
}
9195
}
9296
@@ -136,19 +140,23 @@ export default {
136140
}
137141
}
138142
139-
.fade-overlay-enter, .fade-overlay-leave-to {
143+
.fade-overlay-enter,
144+
.fade-overlay-leave-to {
140145
display: block;
141146
opacity: 0;
142147
}
143-
.fade-overlay-enter-active, .fade-overlay-leave-active {
148+
.fade-overlay-enter-active,
149+
.fade-overlay-leave-active {
144150
transition: 500ms opacity 500ms ease;
145151
}
146-
.fade-overlay-enter-to, .fade-overlay-leave {
152+
.fade-overlay-enter-to,
153+
.fade-overlay-leave {
147154
display: block;
148155
opacity: 1;
149156
}
150157
151-
.fade-modal-enter, .fade-modal-leave-to {
158+
.fade-modal-enter,
159+
.fade-modal-leave-to {
152160
top: -300vh;
153161
}
154162
.fade-modal-enter-active {
@@ -157,7 +165,8 @@ export default {
157165
.fade-modal-leave-active {
158166
transition: 500ms top ease;
159167
}
160-
.fade-modal-enter-to, .fade-modal-leave {
168+
.fade-modal-enter-to,
169+
.fade-modal-leave {
161170
top: 50%;
162171
opacity: 1;
163172
}

‎docs/.vuepress/public/img/vue-js.png‎

7.63 KB
Loading

‎docs/posts/tutorial/1.md‎

Lines changed: 216 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,23 @@
11
# 组件介绍
22

3+
## 什么是组件？？
4+
5+
通常认为页面上能看到所有内容都可以认为是组件。在开发上可以认为是UI和逻辑的一个整体。比较具体一点可以从`.vue`单文件结构来看：
6+
```vue
7+
<template>
8+
<!-- html -->
9+
</template>
10+
<style>
11+
/** css **/
12+
</style>
13+
<script>
14+
// js
15+
</script>
16+
```
17+
除此之外，还应具体生命周期。可以认为是页面的缩影。
18+
19+
## Vue 组件
20+
321
从概念和使用方向来划分组件，一般可以分为下面三类：
422

523
### 1. 页面级别的组件
@@ -14,7 +32,204 @@
1432

1533

1634
##### 原生组件和Vue组件
35+
```js
36+
import "./Modal.less"
37+
;(function(window) {
38+
function extendDefaults(source, properties) {
39+
var property
40+
for (property in properties) {
41+
if (properties.hasOwnProperty(property)) {
42+
source[property] = properties[property]
43+
}
44+
}
45+
return source
46+
}
47+
48+
function getTransitionEnd() {
49+
var el = document.createElement("div")
50+
if (el.style.WebkitTransition) {
51+
return "webkitTransitionEnd"
52+
}
53+
return "transitionEnd"
54+
}
55+
56+
function buildOut() {
57+
var content, contetnHolder, docFrag
58+
if (typeof this.options.content === "string") {
59+
content = this.options.content
60+
} else {
61+
content = this.options.content.innerHTML
62+
}
63+
64+
docFrag = document.createDocumentFragment()
65+
66+
this.modal = document.createElement("div")
67+
this.modal.className = "modal " + this.options.className
68+
this.modal.style.minWidth = this.options.minWidth + "px"
69+
this.modal.style.minHeight = this.options.minHeight + "px"
70+
71+
if (this.options.closeButton) {
72+
this.closeButton = document.createElement("button")
73+
this.closeButton.className = "modal-close close-button"
74+
this.closeButton.innerHTML = "x"
75+
this.modal.appendChild(this.closeButton)
76+
}
77+
78+
if (this.options.overlay) {
79+
this.overlay = document.createElement("div")
80+
this.overlay.className = "modal-overlay " + this.options.className
81+
docFrag.appendChild(this.overlay)
82+
}
83+
84+
contetnHolder = document.createElement("div")
85+
contetnHolder.className = "modal-content"
86+
contetnHolder.innerHTML = content
87+
this.modal.appendChild(contetnHolder)
88+
89+
docFrag.appendChild(this.modal)
90+
91+
document.body.appendChild(docFrag)
92+
}
93+
94+
function initializeEvents() {
95+
if (this.closeButton) {
96+
this.closeButton.addEventListener("click", this.close.bind(this))
97+
}
98+
99+
if (this.overlay) {
100+
this.overlay.addEventListener("click", this.close.bind(this))
101+
}
102+
}
103+
window.Modal = function() {
104+
var defaults = {
105+
content: "",
106+
overlay: true,
107+
minWidth: 560,
108+
minHeight: 280,
109+
closeButton: true,
110+
className: "fade-and-drop"
111+
}
112+
113+
this.closeButton = null
114+
this.modal = null
115+
this.overlay = null
116+
if (arguments[0] && typeof arguments[0] === "object") {
117+
this.options = extendDefaults(defaults, arguments[0])
118+
}
119+
}
120+
121+
window.Modal.prototype.open = function() {
122+
buildOut.call(this)
123+
initializeEvents.call(this)
124+
125+
window.getComputedStyle(this.modal)
126+
127+
this.modal.className =
128+
this.modal.className +
129+
(this.modal.offsetHeight > window.innerHeight
130+
? " modal-open modal-anchored"
131+
: " modal-open")
132+
this.overlay.className = this.overlay.className + " modal-open"
133+
}
134+
135+
window.Modal.prototype.close = function() {
136+
var $this = this
137+
this.modal.className = this.modal.className.replace(" modal-open", "")
138+
this.overlay.className = this.overlay.className.replace(" modal-open", "")
139+
140+
this.modal.addEventListener("webkitTransitionEnd", function() {
141+
$this.modal.parentNode.removeChild($this.modal)
142+
})
143+
144+
this.overlay.addEventListener("webkitTransitionEnd", function() {
145+
$this.overlay.parentNode.removeChild($this.overlay)
146+
})
147+
}
148+
})(window)
149+
```
150+
151+
```vue
152+
<template>
153+
<div>
154+
<transition name="fade-overlay">
155+
<div class="lai-modal-overlay" v-if="overlay && isShow"></div>
156+
</transition>
157+
<transition name="fade-modal">
158+
<div
159+
class="lai-modal"
160+
v-if="isShow"
161+
v-click-outside="hide"
162+
style="min-width: 560px; min-height: 280px;"
163+
>
164+
<button class="modal-close close-button" @click="hide">x</button>
165+
<div class="modal-content">
166+
<slot></slot>
167+
</div>
168+
</div>
169+
</transition>
170+
</div>
171+
</template>
172+
<script>
173+
import clickOutside from "../../directives/click-outside";
174+
export default {
175+
props: {
176+
overlay: {
177+
type: Boolean,
178+
default: true
179+
},
180+
value: {
181+
type: Boolean,
182+
default: false
183+
},
184+
styles: {
185+
type: Object,
186+
default: () => {}
187+
}
188+
},
189+
data() {
190+
return {
191+
isShow: this.value
192+
};
193+
},
194+
directives: {
195+
"click-outside": clickOutside
196+
},
197+
methods: {
198+
hide() {
199+
this.isShow = false;
200+
this.$emit("input", this.isShow);
201+
}
202+
},
203+
watch: {
204+
value(val) {
205+
if (this.ishow !== val) {
206+
this.isShow = val;
207+
}
208+
}
209+
}
210+
};
211+
</script>
212+
<style lang="less" scoped>
213+
...
214+
</style>
215+
```
17216

18217
<box>
19218
<global-modal-demo></global-modal-demo>
20-
</box>
219+
</box>
220+
221+
##### 一个modal的组件的开发：
222+
223+
1. 原生
224+
225+
* 初始化 options
226+
* 创建生产 dom 和移除 dom 的方法
227+
* 通过直接调用原生的 dom 操作方式来控制 modal 的显示和隐藏
228+
229+
2. vue
230+
* 初始化 `props`
231+
* 直接通过 vue render template 内容生产 `dom`
232+
* 通过 `vue` 自发的监听变量，来渲染dom （通过集成的 `virtural dom` 间接调用原生的 `dom` 操作方法）
233+
234+
![](/img/vue-js.png)
235+

0 commit comments

Comments
 (0)