Skip to content

Commit f1b6fdc

Browse files
bajianbajian
committed
update for vue2.0
1 parent 3b8314c commit f1b6fdc

File tree

6 files changed

+226
-69
lines changed

6 files changed

+226
-69
lines changed

‎README.md

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# drawerlayout
2-
a vue.js drawer with more function
2+
a vue.js drawer with more function for vue2.x
33
> A Vue.js project
44
55
##demo
@@ -22,7 +22,10 @@ npm run build
2222

2323
```html
2424
<!-- drawer-->
25-
<drawer :show.sync="drawerShow" :pos="pos" :tran="tran">
25+
<drawer
26+
:show="drawerShow"
27+
:pos="pos" :tran="tran"
28+
@change-show="changeDrawerShow">
2629
<!-- drawerlayout with slot="drawer"-->
2730
<div class="layout" slot="drawer" >
2831
<h2><a href="#">bajian drawer</a></h2>
@@ -35,6 +38,11 @@ npm run build
3538
<button v-on:click="tranFlip">tranChange</button><br><br>
3639
<button v-on:click="drawerToggle">toggle</button>
3740
</drawer>
41+
42+
43+
changeDrawerShow(state) {
44+
this.drawerShow=state;
45+
}
3846
```
3947

4048
## Api
@@ -46,6 +54,7 @@ npm run build
4654
| show.sync | `Boolean` | `false` | the drawer visibility，set `true` to show the drawer |
4755
| on-hide | `Function` | `undefined` | the drawer hide listener |
4856
| on-show | `Function` | `undefined` | the drawer show listener |
57+
| change-show | `Function` | `undefined` | as vue2.0 deprecated the `sync`,this event must be called to change drawer state by the component itself |
4958
| ==================== | ========= | ============ | =================== |
5059

5160

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"test": ""
1111
},
1212
"dependencies": {
13-
"vue": "^1.0.21",
13+
"vue": "^2.0.0",
1414
"babel-runtime": "^6.0.0"
1515
},
1616
"devDependencies": {
@@ -35,7 +35,7 @@
3535
"url-loader": "^0.5.7",
3636
"vue-hot-reload-api": "^1.2.0",
3737
"vue-html-loader": "^1.0.0",
38-
"vue-loader": "^8.3.0",
38+
"vue-loader": "^9.0.0",
3939
"vue-style-loader": "^1.0.0",
4040
"webpack": "^1.12.2",
4141
"webpack-dev-middleware": "^1.4.0",

‎src/App.vue

+61-54
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
<template>
22
<div id="app">
3-
<drawer :show.sync="drawerShow"
3+
<drawer :show="drawerShow"
44
:pos="pos"
55
:tran="tran"
6+
@change-show="changeDrawerShow"
67
@on-hide="onHide"
78
@on-show="onShow">
8-
<div class="layout" slot="drawer" >
9-
<h2><a href="#">bajian drawer</a></h2>
10-
<ul>
11-
<li v-for="item in navItems"><a href="#{{item}}">{{item}}</a></li>
12-
</ul>
13-
</div>
14-
<button v-on:click="directionFlip">directionChange</button><br><br>
15-
<button v-on:click="tranFlip">tranChange</button><br><br>
16-
<button v-on:click="drawerToggle">toggle</button>
17-
</drawer>
18-
</div>
9+
<div class="layout" slot="drawer" >
10+
<h2><a href="#">bajian drawer</a></h2>
11+
<ul>
12+
<li v-for="item in navItems"><a :href="'#'+item">{{item}}</a></li>
13+
</ul>
14+
</div>
15+
<button v-on:click="directionFlip">directionChange</button><br><br>
16+
<button v-on:click="tranFlip">tranChange</button><br><br>
17+
<button v-on:click="drawerToggle">toggle</button>
18+
</drawer>
19+
</div>
1920
</template>
2021

2122
<script>
@@ -55,12 +56,16 @@
5556
onHide() {
5657
console.log('hide');
5758
},
58-
onShow() {
59-
console.log('show');
60-
}
61-
},
62-
components: { Drawer }
63-
}
59+
changeDrawerShow(state) {
60+
this.drawerShow=state;
61+
console.log('drawer was changed from components');
62+
},
63+
onShow() {
64+
console.log('show');
65+
}
66+
},
67+
components: { Drawer }
68+
}
6469
</script>
6570

6671
<style>
@@ -71,6 +76,7 @@
7176
}
7277
html {
7378
height: 100%;
79+
7480
}
7581
7682
body {
@@ -82,11 +88,12 @@
8288
8389
#app {
8490
color: #2c3e50;
85-
margin-top: -100px;
86-
max-width: 600px;
91+
height: 100%;
92+
width: 100%;
93+
/*max-width: 600px;*/
8794
font-family: Source Sans Pro, Helvetica, sans-serif;
8895
text-align: center;
89-
background-color: #eee
96+
/*background-color: #eee*/
9097
}
9198
9299
#app a {
@@ -95,38 +102,38 @@
95102
}
96103
.layout{
97104
width: 300px;
98-
}
105+
}
99106
100-
button, input[type="button"], a.button {
101-
color: #fff;
102-
background-color: #3779d0;
103-
border: 0;
104-
font-size: 14px;
105-
border-radius: 4px;
106-
padding: 0px 8px;
107-
height: 40px;
108-
min-width: 40px;
109-
line-height: 40px;
110-
overflow: hidden;
111-
display: inline-block;
112-
outline: none;
113-
-moz-user-select: none;
114-
-webkit-user-select: none;
115-
-ms-user-select: none;
116-
-khtml-user-select: none;
117-
user-select: none;
118-
-webkit-transition: all;
119-
-moz-transition: all;
120-
transition: all;
121-
-webkit-transition-timing-function: linear;
122-
-moz-transition-timing-function: linear;
123-
transition-timing-function: linear;
124-
-webkit-transition-duration: .2s;
125-
-moz-transition-duration: .2s;
126-
transition-duration: .2s;
127-
}
128-
button:active{
129-
color: #fff;
130-
background-color: #377000;
131-
}
107+
button, input[type="button"], a.button {
108+
color: #fff;
109+
background-color: #3779d0;
110+
border: 0;
111+
font-size: 14px;
112+
border-radius: 4px;
113+
padding: 0px 8px;
114+
height: 40px;
115+
min-width: 40px;
116+
line-height: 40px;
117+
overflow: hidden;
118+
display: inline-block;
119+
outline: none;
120+
-moz-user-select: none;
121+
-webkit-user-select: none;
122+
-ms-user-select: none;
123+
-khtml-user-select: none;
124+
user-select: none;
125+
-webkit-transition: all;
126+
-moz-transition: all;
127+
transition: all;
128+
-webkit-transition-timing-function: linear;
129+
-moz-transition-timing-function: linear;
130+
transition-timing-function: linear;
131+
-webkit-transition-duration: .2s;
132+
-moz-transition-duration: .2s;
133+
transition-duration: .2s;
134+
}
135+
button:active{
136+
color: #fff;
137+
background-color: #377000;
138+
}
132139
</style>

‎src/components/drawer.vue

+16-9
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88
<!-- mask -->
99
<div class="mask" :class="show ? 'active' : ''" @click="hideMask"></div>
1010
</div>
11-
<div v-el:drawer class="drawer"
11+
<div ref="drawer" class="drawer"
1212
:class="[pos!='left' ? 'drawer-right' : 'drawer-left', show ? 'active' : '']" >
1313
<!-- drawer -->
1414
<slot name="drawer"></slot>
1515
</div>
1616
</div>
1717
</template>
1818

19-
<script >
19+
<script scoped>
2020
2121
export default {
2222
props: {
@@ -55,29 +55,35 @@
5555
this.translateX=this.pos=='left'?this.drawerWidth:-this.drawerWidth
5656
}
5757
},
58-
ready(){
59-
this.drawerWidth=this.$els.drawer.clientWidth
58+
mounted(){
59+
this.$nextTick(function () {
60+
this.drawerWidth=this.$refs.drawer.clientWidth
61+
})
6062
},
6163
methods: {
6264
hideMask() {
63-
this.show = false;
65+
// this.show = false;
66+
this.$emit('change-show',false)
6467
}
6568
}
6669
}
6770
</script>
6871

69-
<style scoped>
72+
<style >
7073
.vue-drawer {
7174
display: block;
72-
position: absolute;
75+
position: relative;
7376
top: 0;
7477
left: 0;
7578
width: 100%;
7679
height: 100%;
77-
overflow: hidden;
80+
/*overflow: hidden;*/
81+
/*max-width: 600px;*/
7882
}
7983
8084
.vue-drawer > .main {
85+
/*max-width: 600px;*/
86+
height: 100%;
8187
position: absolute;
8288
top: 0;
8389
left: 0;
@@ -104,8 +110,9 @@
104110
}
105111
106112
.vue-drawer > .drawer {
113+
max-width: 600px;
107114
background-color: #fff;
108-
position: fixed;
115+
position: absolute;
109116
top: 0;
110117
height:100%;
111118
overflow: hidden;

0 commit comments

Comments
 (0)