Skip to content

Commit 9694cd3

Browse files
kouchaokouchao
committed
新增 面板组件，新增 面板demo
1 parent 003e4e3 commit 9694cd3

File tree

3 files changed

+159
-113
lines changed

3 files changed

+159
-113
lines changed

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

Lines changed: 32 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,57 @@
11
<template>
22

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>
3+
<div class="layui-colla-item">
4+
5+
<h2 class="layui-colla-title" @click="handleClick">
6+
<slot name="title"></slot>
7+
<i class="layui-icon layui-colla-icon "
8+
:class="{
9+
'layui-icon-down': isActive,
10+
'layui-icon-right': !isActive
11+
}"></i>
12+
</h2>
13+
<div class="layui-colla-content"
14+
:class="{
15+
'layui-show': isActive
16+
}">
17+
<slot></slot>
18+
</div>
1119

12-
<slot>{{value}}</slot>
1320

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>
1621
</div>
1722
</template>
1823

1924
<script>
20-
import asyncValidator from 'async-validator'
25+
import eventHub from '@/mixins/eventHub';
26+
2127
export default {
2228
name: 'LayCollapseItem',
2329
props: {
24-
label: String,
25-
block: Boolean,
26-
wordAux: String,
27-
border: Boolean,
28-
prop: String
29-
},
30+
index: {
31+
type: Number,
32+
required: true
33+
}
34+
},
35+
mixins: [eventHub],
3036
data() {
31-
return {
32-
isRequired: false,
33-
isError: false,
34-
message: '',
35-
isTextarea: false
36-
}
37+
return {}
3738
},
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
39+
inject: ['rootCollapse'],
40+
methods: {
41+
handleClick() {
42+
this.eventEmit('collapse-item-click', this);
4243
}
4344
},
4445
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-
});
46+
isActive() {
6847
48+
const isActive = this.rootCollapse.openeds.findIndex(o => o == this.index) != -1
49+
return isActive
6950
}
7051
}
7152
}
7253
</script>
7354

7455
<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-
}
10956
11057
</style>

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

Lines changed: 38 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,54 @@
11
<template>
2-
<form class="layui-collapse"
3-
:class="{
4-
'layui-form-pane': border
5-
}">
2+
<div class="layui-collapse">
3+
64
<slot></slot>
7-
</form>
5+
</div>
86
</template>
97

108
<script>
11-
import asyncValidator from 'async-validator'
12-
9+
import eventHub from '@/mixins/eventHub';
1310
export default {
1411
name: 'LayCollapse',
1512
props: {
16-
border: Boolean,
17-
model: Object,
18-
rules: Object
13+
defaultOpeneds: {
14+
type: Array,
15+
default() {
16+
return []
17+
}
18+
},
19+
accordion: {
20+
type: Boolean,
21+
default(){
22+
return false
23+
}
24+
}
1925
},
20-
provide() {
26+
data(){
27+
return {
28+
openeds: this.defaultOpeneds
29+
}
30+
},
31+
provide() {
2132
return {
22-
rootForm: this
33+
rootCollapse: this
2334
};
2435
},
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-
}
36+
mixins: [eventHub],
37+
methods: {
38+
handleItemClick(item) {
39+
const {index} = item
40+
const activeIndex = this.openeds.findIndex(o => o == index)
41+
if (activeIndex == -1) {
42+
this.accordion ? this.openeds = [index] : this.openeds.push(index)
43+
} else {
44+
this.openeds.splice(activeIndex, 1)
45+
}
3446
35-
36-
});
37-
38-
}
39-
}
47+
}
48+
},
49+
mounted() {
50+
this.eventOn('collapse-item-click', this.handleItemClick);
51+
}
4052
}
4153
</script>
4254

‎src/views/Panel.vue

Lines changed: 89 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<div class="site-demo site-demo-body">
33
<lay-block title="卡片面板"></lay-block>
44
<div style="padding: 20px; background-color: #F2F2F2;">
55
<lay-row :space="20">
@@ -33,6 +33,91 @@
3333
</div>
3434

3535
<lay-block title="常规折叠面板" style="margin-top: 30px;"></lay-block>
36+
<lay-collapse>
37+
<lay-collapse-item :index="0">
38+
<template slot="title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</template>
39+
<p>有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊</p>
40+
</lay-collapse-item>
41+
<lay-collapse-item :index="1">
42+
<template slot="title">为什么前端工程师多不愿意用 Bootstrap 框架？</template>
43+
<p>因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo</p>
44+
</lay-collapse-item>
45+
<lay-collapse-item :index="2">
46+
<template slot="title">vue-layui 更适合哪些开发者？</template>
47+
<p>layui是前后端开发者都比较喜欢的框架，由于各种不可描述的原因，有的老板要求前端开发者既要使用vue又要用layui，因此vue-layui诞生了。</p>
48+
</lay-collapse-item>
49+
<lay-collapse-item :index="3">
50+
<template slot="title">贤心是男是女？</template>
51+
<p>反正他自己说是个男的。。。</p>
52+
</lay-collapse-item>
53+
</lay-collapse>
54+
55+
<lay-block title="手风琴折叠" style="margin-top: 30px;"></lay-block>
56+
<lay-collapse accordion>
57+
<lay-collapse-item :index="0">
58+
<template slot="title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</template>
59+
<p>有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊</p>
60+
</lay-collapse-item>
61+
<lay-collapse-item :index="1">
62+
<template slot="title">为什么前端工程师多不愿意用 Bootstrap 框架？</template>
63+
<p>因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo</p>
64+
</lay-collapse-item>
65+
<lay-collapse-item :index="2">
66+
<template slot="title">vue-layui 更适合哪些开发者？</template>
67+
<p>layui是前后端开发者都比较喜欢的框架，由于各种不可描述的原因，有的老板要求前端开发者既要使用vue又要用layui，因此vue-layui诞生了。</p>
68+
</lay-collapse-item>
69+
<lay-collapse-item :index="3">
70+
<template slot="title">贤心是男是女？</template>
71+
<p>反正他自己说是个男的。。。</p>
72+
</lay-collapse-item>
73+
</lay-collapse>
74+
75+
76+
<lay-block title="面板嵌套" style="margin-top: 30px;"></lay-block>
77+
<lay-collapse accordion>
78+
<lay-collapse-item :index="0">
79+
<template slot="title">文豪</template>
80+
<lay-collapse accordion>
81+
<lay-collapse-item :index="0">
82+
<template slot="title">唐代</template>
83+
<lay-collapse accordion>
84+
<lay-collapse-item :index="0">
85+
<template slot="title">杜甫</template>
86+
<p>伟大的诗人</p>
87+
</lay-collapse-item>
88+
<lay-collapse-item :index="1">
89+
<template slot="title">李白</template>
90+
<p>据说是韩国人</p>
91+
</lay-collapse-item>
92+
<lay-collapse-item :index="2">
93+
<template slot="title">王勃</template>
94+
<p>千古绝唱《滕王阁序》</p>
95+
</lay-collapse-item>
96+
</lay-collapse>
97+
</lay-collapse-item>
98+
<lay-collapse-item :index="1">
99+
<template slot="title">宋代</template>
100+
<p>比如苏轼、李清照</p>
101+
</lay-collapse-item>
102+
<lay-collapse-item :index="2">
103+
<template slot="title">当代</template>
104+
<p>比如贤心</p>
105+
</lay-collapse-item>
106+
</lay-collapse>
107+
</lay-collapse-item>
108+
<lay-collapse-item :index="1">
109+
<template slot="title">科学家</template>
110+
<p>伟大的科学家</p>
111+
</lay-collapse-item>
112+
<lay-collapse-item :index="2">
113+
<template slot="title">艺术家</template>
114+
<p>浑身散发着艺术细胞</p>
115+
</lay-collapse-item>
116+
</lay-collapse>
117+
118+
<br>
119+
<p>支持无限嵌套，应用场景非常多！</p>
120+
36121
</div>
37122
</template>
38123

@@ -43,5 +128,7 @@
43128
</script>
44129

45130
<style scoped>
46-
131+
.site-demo {
132+
margin: 15px;
133+
}
47134
</style>

0 commit comments

Comments
 (0)