Skip to content

Commit 2b73ce8

Browse files
kouchaokouchao
committed
新增 swich,alert组件
1 parent 5ee6498 commit 2b73ce8

18 files changed

+262
-26
lines changed

‎src/App.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,13 @@
7777
<lay-menu-child-item title="动画" :to="{name: 'animation'}"></lay-menu-child-item>
7878
<lay-menu-child-item title="辅助元素" :to="{name: 'auxiliar'}"></lay-menu-child-item>
7979
</lay-menu-item>
80+
<lay-menu-item :index="3">
81+
<template slot="title">
82+
<span>组件示例</span>
83+
</template>
84+
<lay-menu-child-item title="弹出层" :to="{name: 'layer'}"></lay-menu-child-item>
85+
</lay-menu-item>
86+
8087
</lay-menu>
8188
</lay-side>
8289
<lay-body>

‎src/assets/icon-ext.png

5.77 KB
Loading

‎src/assets/icon.png

11.2 KB
Loading

‎src/assets/layer.css

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/layui.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -820,7 +820,7 @@ a cite {
820820
right: 0;
821821
top: 0;
822822
bottom: 0;
823-
z-index: 998;
823+
z-index: 1000;
824824
width: auto;
825825
overflow: hidden;
826826
overflow-y: auto;

‎src/assets/loading-0.gif

5.66 KB
Loading

‎src/assets/loading-1.gif

701 Bytes
Loading

‎src/assets/loading-2.gif

1.75 KB
Loading

‎src/components/alert/index.js

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

‎src/components/alert/src/alert.vue

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div v-if="visible" style="position: fixed; top: 0;right: 0;bottom: 0;left: 0;z-index: 1000" :class="{
3+
'modal': modal
4+
}">
5+
<div class="layui-layer"
6+
:class="'layui-layer-' + skin"
7+
style="width: 300px; position: relative; margin: 15vh auto auto">
8+
<div class="layui-layer-title">
9+
{{title}}
10+
</div>
11+
<div class="layui-layer-content">
12+
<slot></slot>
13+
</div>
14+
<span class="layui-layer-setwin">
15+
<a @click="handleClose" class="layui-layer-ico layui-layer-close layui-layer-close1"
16+
href="javascript:;"></a>
17+
</span>
18+
<div v-if="buttons.length"
19+
class="layui-layer-btn"
20+
:class="{
21+
'layui-layer-btn-c': btnDirection == 'center',
22+
'layui-layer-btn-l': btnDirection == 'left',
23+
'layui-layer-btn-r': btnDirection == 'right',
24+
}">
25+
<a v-for="item in buttons"
26+
@click="item.handler"
27+
:class="item.isImportant ? 'layui-layer-btn0' : 'layui-layer-btn1'">
28+
{{item.title}}
29+
</a>
30+
</div>
31+
</div>
32+
</div>
33+
34+
</template>
35+
36+
<script>
37+
export default {
38+
name: "LayAlert",
39+
props: {
40+
title: {
41+
type: String,
42+
default(){
43+
return '提示'
44+
}
45+
},
46+
visible: Boolean,
47+
buttons: {
48+
type: Array,
49+
default(){
50+
return []
51+
}
52+
},
53+
modal: Boolean,
54+
btnDirection: {
55+
type: String,
56+
default() {
57+
return 'right'
58+
}
59+
},
60+
skin: {
61+
type: String,
62+
default() {
63+
return 'page'
64+
}
65+
}
66+
},
67+
methods: {
68+
handleClose(){
69+
this.$emit('update:visible', false)
70+
}
71+
}
72+
}
73+
</script>
74+
75+
<style scoped>
76+
.layui-layer-content {
77+
padding: 20px;
78+
}
79+
80+
.modal {
81+
background: rgba(0, 0, 0, .7);
82+
}
83+
</style>

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

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,9 @@
44
<div class="layui-unselect" :class="[{
55
'layui-checkbox-disbaled layui-disabled': disabled
66
},
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>
7+
'layui-form-checkbox',
8+
hasValue ? 'layui-form-checked' : '']" :lay-skin="skin">
9+
<span><slot></slot></span>
1510

1611
<i v-if="skin == 'primary'" class="layui-icon layui-icon-ok"></i>
1712
<i v-if="!skin" class="layui-icon layui-icon-ok"></i>
@@ -36,8 +31,6 @@
3631
disabled: Boolean,
3732
name: String,
3833
skin: [String],
39-
openText: [String],
40-
closeText: [String]
4134
},
4235
methods: {
4336
handleClick: function () {
@@ -48,14 +41,11 @@
4841
let index = this.value.indexOf(this.label)
4942
this.value.splice(index, 1)
5043
}
51-
console.log(this.value)
5244
this.value.includes(this.label) ? this.hasValue = true : this.hasValue = false
5345
if (this.value.includes(this.label)) {
5446
this.hasValue = true
55-
this.text = this.openText
5647
} else {
5748
this.hasValue = false
58-
this.text = this.closeText
5949
}
6050
this.$emit('input', this.value)
6151
}
@@ -64,10 +54,8 @@
6454
created: function () {
6555
if (this.value.includes(this.label)) {
6656
this.hasValue = true
67-
this.text = this.openText
6857
} else {
6958
this.hasValue = false
70-
this.text = this.closeText
7159
}
7260
}
7361
}

‎src/components/switch/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 LaySwitch from './src/switch';
6+
7+
/* istanbul ignore next */
8+
LaySwitch.install = function(Vue) {
9+
Vue.component(LaySwitch.name, LaySwitch);
10+
};
11+
12+
export default LaySwitch;

0 commit comments

Comments
 (0)