Skip to content

Commit 19209d7

Browse files
kouchaokouchao
committed
feat: 新增 grid文档
1 parent bf8b467 commit 19209d7

File tree

14 files changed

+1284
-443
lines changed

14 files changed

+1284
-443
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,16 @@
2020
"@vue/eslint-config-prettier": "^4.0.1",
2121
"axios": "^0.18.0",
2222
"babel-eslint": "^10.0.1",
23+
"cheerio": "^1.0.0-rc.3",
2324
"eslint": "^5.16.0",
2425
"eslint-plugin-vue": "^5.0.0",
26+
"highlight.js": "^9.15.6",
27+
"markdown-it": "^8.4.2",
28+
"markdown-it-chain": "^1.3.0",
29+
"markdown-it-container": "^2.0.0",
30+
"markdown-it-decorate": "^1.2.2",
31+
"markdown-it-task-checkbox": "^1.0.6",
32+
"vue-markdown-loader": "^2.4.1",
2533
"vue-router": "^3.0.3",
2634
"vue-template-compiler": "^2.6.10"
2735
},

‎src/App.vue

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div id="app">
3-
<lay-admin :collapse.sync="collapse">
3+
<lay-admin>
44
<lay-side>
55
<lay-menu :default-openeds="[0, 1, 2]">
66
<lay-menu-item :index="0" icon="component" title="快速开始">
@@ -109,33 +109,10 @@
109109
<div>
110110
<lay-header>
111111
<lay-logo>
112-
<span v-if="!collapse">vue-layui</span>
113-
<img
114-
v-else
115-
width="30"
116-
src="https://cos.jskou.com/vue-layui-logo.png"
117-
alt
118-
/>
112+
<img width="30" src="https://cos.jskou.com/vue-layui-logo.png" />
113+
<span style="margin-left: 5px">vue-layui</span>
119114
</lay-logo>
120-
<lay-menu
121-
mode="horizontal"
122-
class="layui-layout-left"
123-
:class="{
124-
'is-collapse': collapse
125-
}"
126-
>
127-
<lay-menu-item :index="0">
128-
<template slot="title">
129-
<i
130-
@click="collapse = !collapse"
131-
class="layui-icon"
132-
:class="{
133-
'layui-icon-spread-left': collapse,
134-
'layui-icon-shrink-right': !collapse
135-
}"
136-
/>
137-
</template>
138-
</lay-menu-item>
115+
<lay-menu mode="horizontal" class="layui-layout-left">
139116
<lay-menu-item :index="1">
140117
<template slot="title">
141118
<span>导航一</span>
@@ -232,7 +209,29 @@ export default {
232209
transition: 0.5s;
233210
}
234211
235-
.layui-layout-left.is-collapse {
236-
left: 60px;
212+
table.table {
213+
display: block;
214+
width: 100%;
215+
background-color: #fff;
216+
color: #5e6d82;
217+
font-size: 14px;
218+
border-collapse: collapse;
219+
overflow: auto;
220+
margin-bottom: 50px;
221+
}
222+
223+
table.table td,
224+
table.table th {
225+
border-top: 1px solid #f3f7fa;
226+
border-bottom: 1px solid #f3f7fa;
227+
padding: 10px 8px;
228+
}
229+
code.code_inline {
230+
padding: 0.3em 0.5em;
231+
font-size: 0.9em;
232+
vertical-align: middle;
233+
border: 1px solid #ececec;
234+
border-radius: 2px;
235+
background-color: #f7f7f7;
237236
}
238237
</style>

‎src/components/admin/src/admin.vue

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,6 @@ import eventHub from "@/mixins/eventHub";
88
99
export default {
1010
name: "LayAdmin",
11-
props: {
12-
collapse: Boolean
13-
},
14-
provide() {
15-
return {
16-
admin: this
17-
};
18-
},
19-
mixins: [eventHub],
20-
mounted() {
21-
this.eventOnGlobal("change-collapse", this.collapseChange);
22-
},
23-
methods: {
24-
collapseChange(collapse) {
25-
this.$emit("update:collapse", collapse);
26-
}
27-
}
11+
mixins: [eventHub]
2812
};
2913
</script>

‎src/components/demo-block.vue

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<div class="docs-demo-wrapper">
3+
<div :style="{ height: isExpand ? 'auto' : '0' }" class="demo-container">
4+
<div span="14">
5+
<div class="docs-demo docs-demo--expand">
6+
<div class="highlight-wrapper">
7+
<slot name="highlight"></slot>
8+
</div>
9+
</div>
10+
</div>
11+
</div>
12+
<div
13+
class="docs-trans docs-demo__triangle"
14+
:class="isExpand ? 'is-expand' : ''"
15+
@click="toggle"
16+
>
17+
{{ isExpand ? "隐藏代码" : "显示代码" }}
18+
</div>
19+
</div>
20+
</template>
21+
22+
<script>
23+
/* eslint-disable */
24+
import Vue from 'vue'
25+
export default {
26+
data() {
27+
return {
28+
isExpand: false
29+
}
30+
},
31+
methods: {
32+
toggle() {
33+
this.isExpand = !this.isExpand
34+
}
35+
}
36+
}
37+
</script>
38+
39+
<style>
40+
41+
.demo-container {
42+
overflow: hidden;
43+
}
44+
45+
.docs-demo {
46+
background: #282c34;
47+
color: #AAACB6;
48+
}
49+
50+
.docs-demo-wrapper {
51+
padding: 10px;
52+
border: 1px solid #e6e6e6;
53+
border-radius: 2px;
54+
margin-bottom: 50px;
55+
}
56+
57+
.docs-demo {
58+
border-radius: 6px;
59+
overflow: hidden;
60+
}
61+
62+
.docs-demo__triangle {
63+
text-align: center;
64+
cursor: pointer
65+
}
66+
67+
.docs-demo__triangle.is-expand {
68+
margin-top: 10px
69+
}
70+
71+
pre {
72+
padding: 10px;
73+
}
74+
</style>

‎src/components/logo/src/logo.vue

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,11 @@
11
<template>
2-
<div
3-
class="layui-logo"
4-
:class="{
5-
'is-collapse': admin.collapse
6-
}"
7-
>
2+
<div class="layui-logo">
83
<slot></slot>
94
</div>
105
</template>
116
<script>
127
export default {
13-
name: "LayLogo",
14-
inject: ["admin"]
8+
name: "LayLogo"
159
};
1610
</script>
17-
<style scoped>
18-
.layui-layout-admin .layui-logo.is-collapse {
19-
width: 60px;
20-
overflow: hidden;
21-
}
22-
</style>
11+
<style scoped></style>

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

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,16 @@
33
:key="index"
44
class="layui-nav-item"
55
:class="{
6-
'layui-nav-itemed': isActive && !isCollapse
6+
'layui-nav-itemed': isActive
77
}"
88
@mouseleave="onMouseLeave"
99
@mouseenter="onMouseEnter"
1010
>
11-
<a
12-
@click="handleClick"
13-
:class="{
14-
'layui-nav-item-bar-l': isVertical,
15-
'layui-nav-item-bar-b': !isVertical
16-
}"
17-
href="javascript:;"
18-
>
11+
<a @click="handleClick" href="javascript:;">
1912
<i v-if="icon" :class="'layui-icon layui-icon-' + icon"></i>
20-
{{ !isCollapse ? title : "" }}
13+
{{ title }}
2114

22-
<slot v-if="!title && !isCollapse" name="title"></slot>
15+
<slot v-if="!title" name="title"></slot>
2316
<span class="layui-nav-more" v-if="$slots.default"></span>
2417
</a>
2518
<dl
@@ -49,12 +42,11 @@ export default {
4942
}
5043
},
5144
mixins: [eventHub],
52-
inject: ["rootMenu", "admin"],
45+
inject: ["rootMenu"],
5346
methods: {
5447
handleClick() {
5548
if (this.$slots.default && this.rootMenu.mode == "vertical") {
5649
this.eventEmit("menu-item-click", this);
57-
this.eventEmitGlobal("change-collapse", false);
5850
}
5951
},
6052
onMouseEnter() {
@@ -76,10 +68,6 @@ export default {
7668
},
7769
isVertical() {
7870
return this.rootMenu.mode == "vertical";
79-
},
80-
isCollapse() {
81-
const admin = this.admin || {};
82-
return !this.isVertical ? false : admin.collapse;
8371
}
8472
}
8573
};

‎src/components/side/src/side.vue

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,18 @@
11
<template>
2-
<div
3-
class="layui-side layui-bg-black"
4-
:class="{
5-
'is-collapse': admin.collapse
6-
}"
7-
>
2+
<div class="layui-side layui-bg-black">
83
<div class="layui-side-scroll">
94
<slot></slot>
105
</div>
116
</div>
127
</template>
138
<script>
149
export default {
15-
name: "LaySide",
16-
inject: ["admin"]
10+
name: "LaySide"
1711
};
1812
</script>
1913
<style scoped>
2014
.layui-layout-admin .layui-side {
2115
width: 200px;
2216
transition: 0.5s;
2317
}
24-
25-
.layui-layout-admin .layui-side.is-collapse {
26-
width: 60px;
27-
}
2818
</style>

‎src/main.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,13 @@ import layui from "./index";
77
import "@/assets/layui.css";
88
import "@/assets/layer.css";
99
import "@/assets/vue-layui.css";
10-
10+
import "highlight.js/styles/atom-one-dark.css";
1111
Vue.use(layui);
1212
Vue.config.productionTip = false;
1313

14+
import demoBlock from "./components/demo-block.vue";
15+
Vue.component("demo-block", demoBlock);
16+
1417
new Vue({
1518
router,
1619
render: h => h(App)

‎src/router.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Vue from "vue";
22
import Router from "vue-router";
33
import Home from "./views/Home.vue";
44
import About from "./views/About.vue";
5-
import Grid from "./views/Grid.vue";
5+
import Grid from "./views/Grid.md";
66
import Button from "./views/Button.vue";
77
import Form from "./views/Form.vue";
88
import Nav from "./views/Nav.vue";

0 commit comments

Comments
 (0)