Skip to content

Commit a971b13

Browse files
author
anthinkingcoder
committed
插件化组件
1 parent 8565945 commit a971b13

File tree

4 files changed

+95
-90
lines changed

4 files changed

+95
-90
lines changed

‎src/App.vue

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,14 +101,8 @@
101101
</div>
102102
</template>
103103
<script>
104-
import Row from './components/row.vue';
105-
import Col from './components/col.vue';
106104
export default {
107-
name: 'App',
108-
components: {
109-
Row,
110-
Col
111-
}
105+
name: 'App'
112106
}
113107
</script>
114108
<style>

‎src/components/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Col from './col.vue'
2+
import Row from './row.vue'
3+
import '../styles/grid.scss'
4+
const Grid = {
5+
install(Vue) {
6+
Vue.component('Row',Row);
7+
Vue.component('Col',Col);
8+
}
9+
};
10+
export default Grid;

‎src/components/row.vue

Lines changed: 82 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,82 @@
1-
<template>
2-
<div :class="rowClassList" :style="rowStyle">
3-
<slot></slot>
4-
</div>
5-
</template>
6-
7-
<script>
8-
const ROW_PREFIX = 'simple-row';
9-
const ROW_FLEX_PREFIX = `${ROW_PREFIX}-flex`;
10-
export default {
11-
name:ROW_PREFIX,
12-
props: {
13-
gutter: {
14-
type: Number
15-
},
16-
type: {
17-
type: String,
18-
required: false,
19-
validator: function (value) {
20-
return ['', 'flex'].indexOf(value) !== -1;
21-
}
22-
},
23-
justify: {
24-
type: String,
25-
default: 'start',
26-
validator: function (value) {
27-
return ['start', 'end', 'center', 'space-around', 'space-between'].indexOf(value) !== -1;
28-
},
29-
},
30-
align: {
31-
type: String,
32-
default: 'top',
33-
validator: function (value) {
34-
return ['top', 'middle', 'bottom'].indexOf(value) !== -1;
35-
},
36-
},
37-
className: {
38-
type: String
39-
},
40-
},
41-
data() {
42-
return {
43-
}
44-
},
45-
computed: {
46-
rowClassList() {
47-
let list = [this.type == 'flex' ? ROW_FLEX_PREFIX : ROW_PREFIX];
48-
if (this.type === 'flex') {
49-
list.push({
50-
[`${ROW_FLEX_PREFIX}-${this.justify}`]: this.justify,
51-
[`${ROW_FLEX_PREFIX}-${this.align}`]: this.align,
52-
})
53-
}
54-
list.push({[`${this.className}`]: this.className});
55-
return list;
56-
},
57-
rowStyle() {
58-
return this.gutter !== 0 ? {
59-
'margin-left': `${-this.gutter/2}px`,
60-
'margin-right': `${-this.gutter/2}px`
61-
} : {};
62-
}
63-
},
64-
mounted() {
65-
66-
},
67-
methods: {
68-
updateGutter() {
69-
this.$children.forEach(children => {
70-
let componentName = children.$options.name;
71-
if (componentName === 'simple-col') {
72-
children.gutter = this.gutter;
73-
}
74-
});
75-
}
76-
}
77-
}
78-
</script>
79-
80-
<!-- Add "scoped" attribute to limit CSS to this component only -->
81-
<style scoped>
82-
</style>
1+
<template>
2+
<div :class="rowClassList" :style="rowStyle">
3+
<slot></slot>
4+
</div>
5+
</template>
6+
7+
<script>
8+
const ROW_PREFIX = 'simple-row';
9+
const ROW_FLEX_PREFIX = `${ROW_PREFIX}-flex`;
10+
export default {
11+
name:ROW_PREFIX,
12+
props: {
13+
gutter: {
14+
type: Number
15+
},
16+
type: {
17+
type: String,
18+
required: false,
19+
validator: function (value) {
20+
return ['', 'flex'].indexOf(value) !== -1;
21+
}
22+
},
23+
justify: {
24+
type: String,
25+
default: 'start',
26+
validator: function (value) {
27+
return ['start', 'end', 'center', 'space-around', 'space-between'].indexOf(value) !== -1;
28+
},
29+
},
30+
align: {
31+
type: String,
32+
default: 'top',
33+
validator: function (value) {
34+
return ['top', 'middle', 'bottom'].indexOf(value) !== -1;
35+
},
36+
},
37+
className: {
38+
type: String
39+
},
40+
},
41+
data() {
42+
return {
43+
}
44+
},
45+
computed: {
46+
rowClassList() {
47+
let list = [this.type == 'flex' ? ROW_FLEX_PREFIX : ROW_PREFIX];
48+
if (this.type === 'flex') {
49+
list.push({
50+
[`${ROW_FLEX_PREFIX}-${this.justify}`]: this.justify,
51+
[`${ROW_FLEX_PREFIX}-${this.align}`]: this.align,
52+
})
53+
}
54+
list.push({[`${this.className}`]: this.className});
55+
return list;
56+
},
57+
rowStyle() {
58+
return this.gutter !== 0 ? {
59+
'margin-left': `${-this.gutter/2}px`,
60+
'margin-right': `${-this.gutter/2}px`
61+
} : {};
62+
}
63+
},
64+
mounted() {
65+
66+
},
67+
methods: {
68+
updateGutter() {
69+
this.$children.forEach(children => {
70+
let componentName = children.$options.name;
71+
if (componentName === 'simple-col') {
72+
children.gutter = this.gutter;
73+
}
74+
});
75+
}
76+
}
77+
}
78+
</script>
79+
80+
<!-- Add "scoped" attribute to limit CSS to this component only -->
81+
<style lang="sass">
82+
</style>

‎src/main.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
import Vue from 'vue'
44
import App from './App'
55
import router from './router'
6-
import grid from './styles/grid.scss'
6+
import Grid from './components'
7+
Vue.use(Grid);
78
Vue.config.productionTip = false
89
/* eslint-disable no-new */
910
new Vue({

0 commit comments

Comments
 (0)