Skip to content

Commit 2b73ce8

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

File tree

18 files changed

+262
-26
lines changed

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>

0 commit comments

Comments
 (0)