Skip to content

Commit 666683a

Browse files
kouchaokouchao
committed
修改 表单个组件的逻辑，新增 表单demo
1 parent cfc2efd commit 666683a

File tree

7 files changed

+554
-232
lines changed

7 files changed

+554
-232
lines changed

‎src/components/block/src/block.vue

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<template>
2-
3-
42
<fieldset v-if="title"
53
class="layui-elem-field"
64
:class="{

‎src/components/checkbox/src/checkbox.vue

Lines changed: 65 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,76 @@
11
<template>
2-
<span @click="handleClick">
3-
<input type="checkbox" :name="name" title="写作" :value="label">
4-
<div class="layui-unselect" :class="[{
5-
'layui-radio-disbaled layui-disabled': disabled
6-
},
7-
skin == 'switch' ? 'layui-form-switch' : 'layui-form-checkbox',
8-
hasValue && skin == 'switch' ? 'layui-form-onswitch' : '',
9-
hasValue && skin != 'switch' ? 'layui-form-checked' : '']" :lay-skin="skin">
10-
<span v-if="skin != 'switch'"><slot></slot></span>
2+
<span @click="handleClick">
3+
<input type="checkbox" :name="name" title="写作" :value="label">
4+
<div class="layui-unselect" :class="[{
5+
'layui-checkbox-disbaled layui-disabled': disabled
6+
},
117
12-
<em v-if="skin == 'switch'">{{text}}</em>
13-
<i v-if="skin == 'switch'"></i>
8+
skin == 'switch' ? 'layui-form-switch' : 'layui-form-checkbox',
9+
hasValue && skin == 'switch' ? 'layui-form-onswitch' : '',
10+
hasValue && skin != 'switch' ? 'layui-form-checked' : '']" :lay-skin="skin">
11+
<span v-if="skin != 'switch'"><slot></slot></span>
1412

15-
<i v-if="skin == 'primary'" class="layui-icon layui-icon-ok"></i>
16-
<i v-if="!skin" class="layui-icon layui-icon-ok"></i>
17-
</div>
18-
</span>
13+
<em v-if="skin == 'switch'">{{text}}</em>
14+
<i v-if="skin == 'switch'"></i>
15+
16+
<i v-if="skin == 'primary'" class="layui-icon layui-icon-ok"></i>
17+
<i v-if="!skin" class="layui-icon layui-icon-ok"></i>
18+
</div>
19+
</span>
1920

2021

2122
</template>
2223

2324
<script>
24-
export default {
25-
name: 'LayCheckbox',
26-
data: function () {
27-
return {
28-
hasValue: false,
29-
text: ''
30-
}
31-
},
32-
props: {
33-
value: Array,
34-
label: [String, Number],
35-
disabled: Boolean,
36-
name: String,
37-
skin: [String],
38-
openText: [String],
39-
closeText: [String]
40-
},
41-
methods: {
42-
handleClick: function () {
43-
if (!this.disabled) {
44-
if (!this.value.includes(this.label)) {
45-
this.value.push(this.label)
46-
} else {
47-
let index = this.value.indexOf(this.label)
48-
this.value.splice(index, 1)
49-
}
50-
console.log(this.value)
51-
this.value.includes(this.label) ? this.hasValue = true : this.hasValue = false
52-
this.$emit('input', this.value)
53-
}
54-
}
55-
},
56-
created: function () {
57-
if (this.value.includes(this.label)) {
58-
this.hasValue = true
59-
this.text = this.openText
60-
} else {
61-
this.hasValue = false
62-
this.text = this.closeText
63-
}
64-
}
65-
}
25+
export default {
26+
name: 'LayCheckbox',
27+
data: function () {
28+
return {
29+
hasValue: false,
30+
text: ''
31+
}
32+
},
33+
props: {
34+
value: Array,
35+
label: [String, Number],
36+
disabled: Boolean,
37+
name: String,
38+
skin: [String],
39+
openText: [String],
40+
closeText: [String]
41+
},
42+
methods: {
43+
handleClick: function () {
44+
if (!this.disabled) {
45+
if (!this.value.includes(this.label)) {
46+
this.value.push(this.label)
47+
} else {
48+
let index = this.value.indexOf(this.label)
49+
this.value.splice(index, 1)
50+
}
51+
console.log(this.value)
52+
this.value.includes(this.label) ? this.hasValue = true : this.hasValue = false
53+
if (this.value.includes(this.label)) {
54+
this.hasValue = true
55+
this.text = this.openText
56+
} else {
57+
this.hasValue = false
58+
this.text = this.closeText
59+
}
60+
this.$emit('input', this.value)
61+
}
62+
}
63+
},
64+
created: function () {
65+
if (this.value.includes(this.label)) {
66+
this.hasValue = true
67+
this.text = this.openText
68+
} else {
69+
this.hasValue = false
70+
this.text = this.closeText
71+
}
72+
}
73+
}
6674
</script>
6775

6876
<style>

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

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<template>
2-
<div class="layui-form-item "
2+
3+
<div class="layui-form-item"
34
:class="{
45
'layui-form-pane': border,
56
'is-error': isError,
67
'is-required': isRequired,
8+
'is-textarea': isTextarea
79
}">
810
<label v-if="label" class="layui-form-label">{{label}}</label>
9-
<div :class="block ? 'layui-input-block' : 'layui-input-inline'">
11+
1012
<slot>{{value}}</slot>
11-
</div>
13+
1214
<div v-if="wordAux" class="layui-form-mid layui-word-aux">{{wordAux}}</div>
1315
<div v-if="isError" class="layui-form-item__error">{{message}}</div>
1416
</div>
@@ -29,7 +31,8 @@
2931
return {
3032
isRequired: false,
3133
isError: false,
32-
message: ''
34+
message: '',
35+
isTextarea: false
3336
}
3437
},
3538
inject: ['rootForm'],
@@ -45,6 +48,9 @@
4548
return this.rootForm.model[this.prop]
4649
}
4750
}
51+
},
52+
mounted(){
53+
this.isTextarea = this.$children.find(({mName}) => mName == 'LayTextarea') ? true : false
4854
},
4955
methods: {
5056
validate(){
@@ -91,4 +97,14 @@
9197
border-color: #FF5722!important;
9298
}
9399
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+
94110
</style>

‎src/components/input/src/input.vue

Lines changed: 34 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,41 @@
11
<template>
2-
<input :type="type"
3-
:name="name"
4-
:placeholder="placeholder"
5-
class="layui-input"
6-
@input="handleChange"
7-
:value="value"
8-
:disabled="disabled"
9-
:class="{
10-
'layui-radio-disbaled layui-disabled': disabled
11-
}">
2+
<div :class="$parent.block ? 'layui-input-block' : 'layui-input-inline'">
3+
<input :type="type"
4+
:name="name"
5+
:placeholder="placeholder"
6+
class="layui-input"
7+
@input="handleChange"
8+
:value="value"
9+
:disabled="disabled"
10+
:class="{
11+
'layui-radio-disbaled layui-disabled': disabled
12+
}">
13+
</div>
1214
</template>
1315

1416
<script>
15-
export default {
16-
name: 'LayInput',
17-
props: {
18-
value: [String, Number],
19-
placeholder: String,
20-
disabled: Boolean,
21-
type: {
22-
type: String,
23-
default: 'text'
24-
},
25-
name: String,
26-
required: Boolean
27-
},
28-
methods: {
29-
handleChange: function () {
30-
if (!this.disabled) {
31-
this.$emit('input', event.target.value)
32-
}
33-
}
34-
}
35-
}
17+
export default {
18+
name: 'LayInput',
19+
props: {
20+
value: [String, Number],
21+
placeholder: String,
22+
disabled: Boolean,
23+
type: {
24+
type: String,
25+
default: 'text'
26+
},
27+
name: String,
28+
required: Boolean,
29+
width: Number
30+
},
31+
methods: {
32+
handleChange: function () {
33+
if (!this.disabled) {
34+
this.$emit('input', event.target.value)
35+
}
36+
}
37+
}
38+
}
3639
</script>
3740

3841
<style>

0 commit comments

Comments
 (0)