Skip to content

Commit 7110130

Browse files
kouchaokouchao
committed
新增 卡面组件
1 parent c86c79a commit 7110130

File tree

10 files changed

+269
-0
lines changed

10 files changed

+269
-0
lines changed

‎src/App.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,8 @@
6969
<lay-menu-child-item title="表单" :to="{name: 'form'}"></lay-menu-child-item>
7070
<lay-menu-child-item title="导航/面包屑" :to="{name: 'nav'}"></lay-menu-child-item>
7171
<lay-menu-child-item title="进度条" :to="{name: 'progress'}"></lay-menu-child-item>
72+
<lay-menu-child-item title="面板" :to="{name: 'panel'}"></lay-menu-child-item>
73+
7274
<lay-menu-child-item title="徽章" :to="{name: 'badge'}"></lay-menu-child-item>
7375
<lay-menu-child-item title="辅助元素" :to="{name: 'auxiliar'}"></lay-menu-child-item>
7476

‎src/components/card/index.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/8/27
3+
*/
4+
5+
import LayCard from './src/card';
6+
7+
/* istanbul ignore next */
8+
LayCard.install = function(Vue) {
9+
Vue.component(LayCard.name, LayCard);
10+
};
11+
12+
export default LayCard;

‎src/components/card/src/card.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div class="layui-card">
3+
<div class="layui-card-header" v-if="$slots.header">
4+
<slot name="header"></slot>
5+
</div>
6+
<div class="layui-card-body">
7+
<slot></slot>
8+
</div>
9+
10+
11+
</div>
12+
</template>
13+
<script>
14+
export default {
15+
name: 'LayCard'
16+
}
17+
</script>

‎src/components/collapse-item/index.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/8/27
3+
*/
4+
5+
import LayCollapseItem from '../collapse/src/collapse-item';
6+
7+
/* istanbul ignore next */
8+
LayCollapseItem.install = function(Vue) {
9+
Vue.component(LayCollapseItem.name, LayCollapseItem);
10+
};
11+
12+
export default LayCollapseItem;

‎src/components/collapse/index.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* kouchao 创建于 2018/8/31
3+
*/
4+
5+
import LayCollapse from './src/collapse';
6+
7+
/* istanbul ignore next */
8+
LayCollapse.install = function(Vue) {
9+
Vue.component(LayCollapse.name, LayCollapse);
10+
};
11+
12+
export default LayCollapse;

‎src/components/collapse/src/collapse-item.vue

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<template>
2+
3+
<div class="layui-form-item"
4+
:class="{
5+
'layui-form-pane': border,
6+
'is-error': isError,
7+
'is-required': isRequired,
8+
'is-textarea': isTextarea
9+
}">
10+
<label v-if="label" class="layui-form-label">{{label}}</label>
11+
12+
<slot>{{value}}</slot>
13+
14+
<div v-if="wordAux" class="layui-form-mid layui-word-aux">{{wordAux}}</div>
15+
<div v-if="isError" class="layui-form-item__error">{{message}}</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
import asyncValidator from 'async-validator'
21+
export default {
22+
name: 'LayCollapseItem',
23+
props: {
24+
label: String,
25+
block: Boolean,
26+
wordAux: String,
27+
border: Boolean,
28+
prop: String
29+
},
30+
data() {
31+
return {
32+
isRequired: false,
33+
isError: false,
34+
message: '',
35+
isTextarea: false
36+
}
37+
},
38+
inject: ['rootForm'],
39+
created() {
40+
if (this.rootForm && this.rootForm.rules && this.rootForm.model && this.prop && this.rootForm.rules[this.prop]) {
41+
this.isRequired = this.rootForm.rules[this.prop].find(o => o.required) ? true : false
42+
}
43+
},
44+
computed: {
45+
value(){
46+
if (this.rootForm && this.rootForm.rules && this.prop && this.rootForm.rules[this.prop]) {
47+
this.validate()
48+
return this.rootForm.model[this.prop]
49+
}
50+
}
51+
},
52+
mounted(){
53+
this.isTextarea = this.$children.find(({mName}) => mName == 'LayTextarea') ? true : false
54+
},
55+
methods: {
56+
validate(){
57+
const descriptor = {};
58+
descriptor[this.prop] = this.rootForm.rules[this.prop]
59+
let validator = new asyncValidator(descriptor);
60+
validator.validate(this.rootForm.model, (errors, fields) => {
61+
if(errors) {
62+
this.isError = true
63+
this.message = errors[0].message
64+
} else {
65+
this.isError = false
66+
}
67+
});
68+
69+
}
70+
}
71+
}
72+
</script>
73+
74+
<style scoped>
75+
.is-required .layui-form-label:before {
76+
content: "*";
77+
color: #f56c6c;
78+
margin-right: 4px;
79+
}
80+
81+
.layui-form-item__error {
82+
color: #f56c6c;
83+
font-size: 12px;
84+
line-height: 1;
85+
padding-top: 4px;
86+
position: absolute;
87+
top: 100%;
88+
left: 110px;
89+
}
90+
91+
.layui-form-item {
92+
position: relative;
93+
margin-bottom: 22px;
94+
}
95+
96+
.is-error .layui-input {
97+
border-color: #FF5722!important;
98+
}
99+
100+
.is-textarea .layui-form-label {
101+
width: 100%;
102+
text-align: left;
103+
}
104+
105+
.is-textarea .layui-input-block {
106+
margin-left: 1px;
107+
top: -1px;
108+
}
109+
110+
</style>

‎src/components/collapse/src/collapse.vue

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<form class="layui-collapse"
3+
:class="{
4+
'layui-form-pane': border
5+
}">
6+
<slot></slot>
7+
</form>
8+
</template>
9+
10+
<script>
11+
import asyncValidator from 'async-validator'
12+
13+
export default {
14+
name: 'LayCollapse',
15+
props: {
16+
border: Boolean,
17+
model: Object,
18+
rules: Object
19+
},
20+
provide() {
21+
return {
22+
rootForm: this
23+
};
24+
},
25+
methods: {
26+
validate(cb){
27+
let validator = new asyncValidator(this.rules);
28+
validator.validate(this.model, (errors, fields) => {
29+
if(errors) {
30+
cb(false)
31+
} else {
32+
cb(true)
33+
}
34+
35+
36+
});
37+
38+
}
39+
}
40+
}
41+
</script>
42+
43+
<style>
44+
45+
</style>

‎src/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ import LayBadge from '@/components/badge'
3737
import LayBreadcrumb from '@/components/breadcrumb'
3838
import LayBreadcrumbItem from '@/components/breadcrumb-item'
3939
import LayProgress from '@/components/progress'
40+
import LayCard from '@/components/card'
41+
import LayCollapse from '@/components/collapse'
42+
import LayCollapseItem from '@/components/collapse-item'
4043

4144

4245

@@ -78,6 +81,9 @@ const layui = {
7881
LayBreadcrumb,
7982
LayBreadcrumbItem,
8083
LayProgress,
84+
LayCard,
85+
LayCollapse,
86+
LayCollapseItem
8187
]
8288
components.forEach(function (component) {
8389
Vue.component(component.name, component)

‎src/router.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Nav from './views/Nav.vue'
99
import Badge from './views/Badge.vue'
1010
import Auxiliar from './views/Auxiliar.vue'
1111
import Progress from './views/Progress.vue'
12+
import Panel from './views/Panel.vue'
1213

1314
Vue.use(Router)
1415

@@ -58,6 +59,11 @@ export default new Router({
5859
path: '/progress',
5960
name: 'progress',
6061
component: Progress
62+
},
63+
{
64+
path: '/panel',
65+
name: 'panel',
66+
component: Panel
6167
}
6268

6369

‎src/views/Panel.vue

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div>
3+
<lay-block title="卡片面板"></lay-block>
4+
<div style="padding: 20px; background-color: #F2F2F2;">
5+
<lay-row :space="20">
6+
<lay-col :md="6">
7+
<lay-card>
8+
<div slot="header">卡片面板</div>
9+
<div>
10+
<p>卡片式面板面板通常用于非白色背景色的主体内</p>
11+
<p>从而映衬出边框投影</p>
12+
</div>
13+
</lay-card>
14+
</lay-col>
15+
<lay-col :md="6">
16+
<lay-card>
17+
<div slot="header">卡片面板</div>
18+
<div>
19+
<p>结合 layui 的栅格系统</p>
20+
<p>轻松实现响应式布局</p>
21+
</div>
22+
</lay-card>
23+
</lay-col>
24+
</lay-row>
25+
<lay-row>
26+
<lay-card>
27+
<div slot="header">标题</div>
28+
<div>
29+
内容
30+
</div>
31+
</lay-card>
32+
</lay-row>
33+
</div>
34+
35+
<lay-block title="常规折叠面板" style="margin-top: 30px;"></lay-block>
36+
</div>
37+
</template>
38+
39+
<script>
40+
export default {
41+
name: "Panel"
42+
}
43+
</script>
44+
45+
<style scoped>
46+
47+
</style>

0 commit comments

Comments
 (0)