Skip to content

Commit 11f90a7

Browse files
kouchaokouchao
committed
新增 辅助元素demo， 修改 block逻辑
1 parent a71c3d8 commit 11f90a7

File tree

9 files changed

+180
-104
lines changed

9 files changed

+180
-104
lines changed

‎src/App.vue‎

Lines changed: 85 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,98 @@
11
<template>
2-
<div id="app">
2+
<div id="app">
33

4-
<lay-admin>
5-
<lay-header>
6-
<lay-logo>vue-layui</lay-logo>
7-
<lay-menu mode="horizontal" class="layui-layout-left">
8-
<lay-menu-item :index="0">
9-
<template slot="title">
10-
<span>导航一</span>
11-
</template>
12-
<lay-menu-child-item title="test"></lay-menu-child-item>
13-
<lay-menu-child-item title="test"></lay-menu-child-item>
14-
</lay-menu-item>
15-
<lay-menu-item :index="1">
16-
<template slot="title">
17-
<span>导航一</span>
18-
</template>
19-
</lay-menu-item>
20-
<lay-menu-item :index="2">
21-
<template slot="title">
22-
<span>导航一</span>
23-
</template>
24-
</lay-menu-item>
25-
<lay-menu-item :index="3">
26-
<template slot="title">
27-
<span>导航一</span>
28-
</template>
29-
</lay-menu-item>
30-
</lay-menu>
31-
<lay-menu mode="horizontal" class="layui-layout-right">
32-
<lay-menu-item :index="0">
33-
<template slot="title">
34-
<img src="https://avatars1.githubusercontent.com/u/23720738?s=460&v=4" class="layui-nav-img"> admin
35-
</template>
36-
<lay-menu-child-item title="基本资料"></lay-menu-child-item>
37-
<lay-menu-child-item title="安全设置"></lay-menu-child-item>
38-
</lay-menu-item>
39-
<lay-menu-item :index="0">
40-
<template slot="title">
41-
退出
42-
</template>
43-
</lay-menu-item>
44-
</lay-menu>
45-
</lay-header>
46-
<lay-side>
47-
<lay-menu :default-openeds="[0]">
48-
<lay-menu-item :index="0">
49-
<template slot="title">
50-
<span>开发测试</span>
51-
</template>
52-
<lay-menu-child-item title="dev" :to="{name: 'home'}"></lay-menu-child-item>
53-
<lay-menu-child-item title="about" :to="{name: 'about'}"></lay-menu-child-item>
54-
</lay-menu-item>
55-
<lay-menu-item :index="1">
56-
<template slot="title">
57-
<span>布局</span>
58-
</template>
59-
<lay-menu-child-item title="栅格" :to="{name: 'grid'}"></lay-menu-child-item>
60-
<lay-menu-child-item title="后台布局"></lay-menu-child-item>
4+
<lay-admin>
5+
<lay-header>
6+
<lay-logo>vue-layui</lay-logo>
7+
<lay-menu mode="horizontal" class="layui-layout-left">
8+
<lay-menu-item :index="0">
9+
<template slot="title">
10+
<span>导航一</span>
11+
</template>
12+
<lay-menu-child-item title="test"></lay-menu-child-item>
13+
<lay-menu-child-item title="test"></lay-menu-child-item>
14+
</lay-menu-item>
15+
<lay-menu-item :index="1">
16+
<template slot="title">
17+
<span>导航一</span>
18+
</template>
19+
</lay-menu-item>
20+
<lay-menu-item :index="2">
21+
<template slot="title">
22+
<span>导航一</span>
23+
</template>
24+
</lay-menu-item>
25+
<lay-menu-item :index="3">
26+
<template slot="title">
27+
<span>导航一</span>
28+
</template>
29+
</lay-menu-item>
30+
</lay-menu>
31+
<lay-menu mode="horizontal" class="layui-layout-right">
32+
<lay-menu-item :index="0">
33+
<template slot="title">
34+
<img src="https://avatars1.githubusercontent.com/u/23720738?s=460&v=4"
35+
class="layui-nav-img"> admin
36+
</template>
37+
<lay-menu-child-item title="基本资料"></lay-menu-child-item>
38+
<lay-menu-child-item title="安全设置"></lay-menu-child-item>
39+
</lay-menu-item>
40+
<lay-menu-item :index="0">
41+
<template slot="title">
42+
退出
43+
</template>
44+
</lay-menu-item>
45+
</lay-menu>
46+
</lay-header>
47+
<lay-side>
48+
<lay-menu :default-openeds="[0]">
49+
<lay-menu-item :index="0">
50+
<template slot="title">
51+
<span>开发测试</span>
52+
</template>
53+
<lay-menu-child-item title="dev" :to="{name: 'home'}"></lay-menu-child-item>
54+
<lay-menu-child-item title="about" :to="{name: 'about'}"></lay-menu-child-item>
55+
</lay-menu-item>
56+
<lay-menu-item :index="1">
57+
<template slot="title">
58+
<span>布局</span>
59+
</template>
60+
<lay-menu-child-item title="栅格" :to="{name: 'grid'}"></lay-menu-child-item>
61+
<lay-menu-child-item title="后台布局"></lay-menu-child-item>
6162

62-
</lay-menu-item>
63-
<lay-menu-item :index="2">
64-
<template slot="title">
65-
<span>基本元素</span>
66-
</template>
67-
<lay-menu-child-item title="按钮" :to="{name: 'button'}"></lay-menu-child-item>
68-
<lay-menu-child-item title="表单" :to="{name: 'form'}"></lay-menu-child-item>
69-
<lay-menu-child-item title="导航/面包屑" :to="{name: 'nav'}"></lay-menu-child-item>
70-
<lay-menu-child-item title="徽章" :to="{name: 'badge'}"></lay-menu-child-item>
63+
</lay-menu-item>
64+
<lay-menu-item :index="2">
65+
<template slot="title">
66+
<span>基本元素</span>
67+
</template>
68+
<lay-menu-child-item title="按钮" :to="{name: 'button'}"></lay-menu-child-item>
69+
<lay-menu-child-item title="表单" :to="{name: 'form'}"></lay-menu-child-item>
70+
<lay-menu-child-item title="导航/面包屑" :to="{name: 'nav'}"></lay-menu-child-item>
71+
<lay-menu-child-item title="徽章" :to="{name: 'badge'}"></lay-menu-child-item>
72+
<lay-menu-child-item title="辅助元素" :to="{name: 'auxiliar'}"></lay-menu-child-item>
7173

72-
</lay-menu-item>
73-
</lay-menu>
74-
</lay-side>
75-
<lay-body>
76-
<div class="layui-main site-demo-body">
77-
<router-view/>
78-
</div>
74+
</lay-menu-item>
75+
</lay-menu>
76+
</lay-side>
77+
<lay-body>
78+
<div class="layui-main site-demo-body">
79+
<router-view/>
80+
</div>
7981

80-
</lay-body>
81-
<lay-footer>
82-
this is footer
83-
</lay-footer>
82+
</lay-body>
83+
<lay-footer>
84+
this is footer
85+
</lay-footer>
8486

85-
</lay-admin>
87+
</lay-admin>
8688

8789

88-
</div>
90+
</div>
8991
</template>
9092

9193
<style>
9294
93-
.layui-layout-admin .site-demo-body {
94-
top: 30px;
95-
}
95+
.layui-layout-admin .site-demo-body {
96+
top: 30px;
97+
}
9698
</style>

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
<fieldset v-if="title"
33
class="layui-elem-field"
44
:class="{
5-
'layui-field-title': !border
5+
'layui-field-title': !$slots.default
66
}"
77
:style="styleName">
88
<legend>{{title}}</legend>
9-
<div class="layui-field-box" v-if="border">
9+
<div class="layui-field-box" v-if="$slots.default">
1010
<slot></slot>
1111
</div>
1212
</fieldset>
1313
<blockquote v-else class="layui-elem-quote"
1414
:class="'layui-quote-' + theme"
15-
:style="styleName">
15+
:style="styleName">
1616
<slot></slot>
1717
</blockquote>
1818

@@ -25,8 +25,7 @@
2525
props: {
2626
color: String,
2727
title: String,
28-
border: Boolean,
29-
theme: String
28+
theme: String
3029
},
3130
data: function () {
3231
return {
@@ -40,7 +39,7 @@
4039

4140
<style scoped>
4241
/*.layui-elem-quote {*/
43-
/*border-left: 5px solid #009688*/
42+
/*border-left: 5px solid #009688*/
4443
/*}*/
4544
4645
</style>

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

src/components/auxiliary/hr.vue renamed to src/components/line/src/line.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77

88
<script>
99
export default {
10-
name: 'layui-hr',
10+
name: 'LayLine',
1111
props: {
12-
color: String
12+
theme: String
1313
},
1414
data: function () {
1515
return {
16-
className: 'layui-bg-' + this.color
16+
className: 'layui-bg-' + this.theme
1717
}
1818
}
1919
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313
}"
1414
href="javascript:;">
1515
<slot name="title"></slot>
16-
<span class="layui-nav-more" v-if="this.$slots.default"></span>
16+
<span class="layui-nav-more" v-if="$slots.default"></span>
1717
</a>
18-
<dl class="layui-nav-child" :class="this.rootMenu.mode" v-if="this.$slots.default">
18+
<dl class="layui-nav-child" :class="this.rootMenu.mode" v-if="$slots.default">
1919
<slot></slot>
2020
</dl>
2121
</li>

‎src/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import LayTextarea from '@/components/textarea'
2121
import tabs from '@/components/tabs/tabs'
2222
import tabPane from '@/components/tabs/tab-pane'
2323

24-
import hr from '@/components/auxiliary/hr'
24+
import LayLine from '@/components/line'
2525

2626
import LayMenu from '@/components/menu'
2727
import LayMenuItem from '@/components/menu-item'
@@ -61,7 +61,7 @@ const layui = {
6161
LayTextarea,
6262
tabs,
6363
tabPane,
64-
hr,
64+
LayLine,
6565

6666
LayMenu,
6767
LayMenuItem,

‎src/router.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Button from './views/Button.vue'
77
import Form from './views/Form.vue'
88
import Nav from './views/Nav.vue'
99
import Badge from './views/Badge.vue'
10+
import Auxiliar from './views/Auxiliar.vue'
1011

1112
Vue.use(Router)
1213

@@ -46,6 +47,11 @@ export default new Router({
4647
path: '/badge',
4748
name: 'badge',
4849
component: Badge
50+
},
51+
{
52+
path: '/auxiliar',
53+
name: 'auxiliar',
54+
component: Auxiliar
4955
}
5056

5157

‎src/views/Auxiliar.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div>
3+
<lay-block title="引用区块 - 默认风格"></lay-block>
4+
<lay-block>这个貌似不用多介绍，因为你已经在太多的地方都看到</lay-block>
5+
6+
<lay-block title="引用区块 - 一般风格"></lay-block>
7+
<lay-block theme="nm">
8+
<p>猿强，则国强。国强，则猿更强！</p>
9+
<p>——孟子（好吧。。这是贤心大大说的）</p>
10+
11+
</lay-block>
12+
13+
<lay-block title="字段集区块"></lay-block>
14+
15+
<lay-block title="爱好">
16+
你可以在这里放任何内容，比如表单神马的
17+
</lay-block>
18+
19+
<lay-block title="带标题的横线"></lay-block>
20+
内容区域
21+
22+
<lay-block title="分割线"></lay-block>
23+
24+
默认分割线
25+
<LayLine></LayLine>
26+
赤色分割线
27+
<LayLine theme="red"></LayLine>
28+
橙色分割线
29+
<LayLine theme="orange"></LayLine>
30+
墨绿分割线
31+
<LayLine theme="green"></LayLine>
32+
青色分割线
33+
<LayLine theme="cyan"></LayLine>
34+
蓝色分割线
35+
<LayLine theme="blue"></LayLine>
36+
黑色分割线
37+
<LayLine theme="black"></LayLine>
38+
灰色分割线
39+
<LayLine theme="gray"></LayLine>
40+
41+
<lay-block title="纯圆角"></lay-block>
42+
<lay-block theme="nm">
43+
<p>border-radius: 100%;</p>
44+
<p>——这句是我说的</p>
45+
46+
</lay-block>
47+
48+
</div>
49+
</template>
50+
51+
<script>
52+
export default {
53+
name: "Auxiliar"
54+
}
55+
</script>
56+
57+
<style scoped>
58+
59+
</style>

‎src/views/Home.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
<template>
22
<div>
33
<h1>当前展示的页面为开发中 可能存在严重bug 请点击其他模块预览</h1>
4-
<layui-hr color="orange"></layui-hr>
5-
<layui-hr color="green"></layui-hr>
6-
<layui-hr color="cyan"></layui-hr>
74

85

96

107

11-
layui-tabs
12-
<layui-tabs>
13-
<layui-tab-pane name="tab1">tab1</layui-tab-pane>
14-
<layui-tab-pane name="tab2">tab2</layui-tab-pane>
15-
</layui-tabs>
8+
9+
<!--layui-tabs-->
10+
<!--<layui-tabs>-->
11+
<!--<layui-tab-pane name="tab1">tab1</layui-tab-pane>-->
12+
<!--<layui-tab-pane name="tab2">tab2</layui-tab-pane>-->
13+
<!--</layui-tabs>-->
1614
</div>
1715
</template>
1816

0 commit comments

Comments
 (0)