Skip to content

Commit b3ca3c1

Browse files
kouchaokouchao
committed
新增 开关模式
1 parent a7f0ab2 commit b3ca3c1

File tree

2 files changed

+63
-24
lines changed

2 files changed

+63
-24
lines changed

‎src/App.vue

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,18 @@
4848
</layui-form-item>
4949

5050
<layui-form-item label="复选框" block>
51-
<layui-checkbox v-model="checkbox" label="1" primary>原始复选框</layui-checkbox>
52-
<layui-checkbox v-model="checkbox" label="2" primary>未选中</layui-checkbox>
53-
<layui-checkbox v-model="checkbox" label="3" primary disabled>禁用</layui-checkbox>
51+
<layui-checkbox v-model="checkbox" label="1" skin="primary">原始复选框</layui-checkbox>
52+
<layui-checkbox v-model="checkbox" label="2" skin="primary">未选中</layui-checkbox>
53+
<layui-checkbox v-model="checkbox" label="3" skin="primary" disabled>禁用</layui-checkbox>
5454
<layui-checkbox v-model="checkbox" label="4">美化复选框</layui-checkbox>
5555
<layui-checkbox v-model="checkbox" label="5">未选中</layui-checkbox>
56-
<layui-checkbox v-model="checkbox" label="6">禁用</layui-checkbox>
56+
<layui-checkbox v-model="checkbox" label="6" disabled>禁用</layui-checkbox>
57+
</layui-form-item>
58+
59+
<layui-form-item label="开关" block>
60+
<layui-checkbox v-model="checkbox" label="7" skin="switch" open-text="开" close-text="关"></layui-checkbox>
61+
<layui-checkbox v-model="checkbox" label="8" skin="switch" open-text="开" close-text="关"></layui-checkbox>
62+
<layui-checkbox v-model="checkbox" label="9" skin="switch" open-text="禁用" close-text="禁用" disabled></layui-checkbox>
5763
</layui-form-item>
5864

5965
<div class="layui-form-item">
@@ -70,12 +76,7 @@
7076
</div>
7177
</div>
7278

73-
<div class="layui-form-item">
74-
<label class="layui-form-label">开关</label>
75-
<div class="layui-input-block">
76-
<input type="checkbox" name="switch" lay-skin="switch">
77-
</div>
78-
</div>
79+
7980

8081
<div class="layui-form-item layui-form-text">
8182
<label class="layui-form-label">文本域</label>
@@ -100,7 +101,7 @@
100101
return {
101102
radio: 1,
102103
input: 'test',
103-
checkbox: ['1', '3', '4', '6']
104+
checkbox: ['1', '4', '7']
104105
}
105106
},
106107
created: function () {

‎src/components/form/checkbox.vue

Lines changed: 51 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,64 @@
11
<template>
2-
<span @click="handleClick">
3-
<input type="checkbox" :name="name" title="写作" :value="label">
4-
<div class="layui-unselect layui-form-checkbox " :class="{
5-
'layui-form-checked': hasValue,
6-
'layui-radio-disbaled layui-disabled': disabled
7-
}" :lay-skin="primary ? 'primary' : ''">
8-
<span><slot></slot></span>
9-
<i v-if="primary" class="layui-icon"></i>
10-
<i v-else class="layui-icon"></i>
11-
</div>
2+
<span>
3+
<span @click="handleClick">
4+
<input type="checkbox" :name="name" title="写作" :value="label">
5+
<div class="layui-unselect" :class="[{
6+
'layui-radio-disbaled layui-disabled': disabled
7+
},
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>
12+
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"></i>
17+
<i v-if="!skin" class="layui-icon"></i>
18+
</div>
19+
</span>
20+
21+
<!--<span v-if="skin && skin == 'switch'">-->
22+
<!--<input type="checkbox" name="open" lay-text="ON|OFF">-->
23+
<!--<div class="layui-unselect layui-form-switch layui-form-onswitch "-->
24+
<!--:class="{-->
25+
<!--'layui-form-checked': hasValue,-->
26+
<!--'layui-radio-disbaled layui-disabled': disabled-->
27+
<!--}"-->
28+
<!--lay-skin="_switch">-->
29+
<!--<em>ON</em>-->
30+
<!--<i></i>-->
31+
<!--</div>-->
32+
33+
<!--<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">-->
34+
<!--<div class="layui-unselect layui-form-switch" lay-skin="_switch">-->
35+
<!--<em>OFF</em><i></i>-->
36+
<!--</div>-->
37+
38+
<!--</span>-->
1239
</span>
1340

41+
42+
1443
</template>
1544

1645
<script>
1746
export default {
1847
name: 'layui-checkbox',
1948
data: function () {
2049
return {
21-
hasValue: false
50+
hasValue: false,
51+
text: ''
2252
}
2353
},
2454
props: {
2555
value: Array,
2656
label: [String, Number],
2757
disabled: Boolean,
2858
name: String,
29-
primary: Boolean
59+
skin: [String],
60+
openText: [String],
61+
closeText: [String]
3062
},
3163
methods: {
3264
handleClick: function () {
@@ -44,7 +76,13 @@
4476
}
4577
},
4678
created: function () {
47-
this.value.includes(this.label) ? this.hasValue = true : this.hasValue = false
79+
if (this.value.includes(this.label)) {
80+
this.hasValue = true
81+
this.text = this.openText
82+
} else {
83+
this.hasValue = false
84+
this.text = this.closeText
85+
}
4886
}
4987
}
5088
</script>

0 commit comments

Comments
 (0)