Skip to content

Commit 5cadd17

Browse files
hzsrchzsrc
committed
引入slot-layout样例
1 parent 8ee1719 commit 5cadd17

File tree

12 files changed

+224
-137
lines changed

12 files changed

+224
-137
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ npm install
4040

4141
启用方法：
4242
1、npm run dev默认会同时启动mock服务。
43-
2、单独运行：npm run mock
43+
2、单独运行：npm run mock。
4444

4545
配置文件：
4646
1、config/serverMap.js中的接口服务地址为：base: '"//localhost:8085"'

‎build/webpack.base.conf.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ module.exports = {
5151
},
5252
{
5353
test: /\.js$/,
54-
include: [resolve('src'), resolve('test')],
54+
include: [resolve('src'), resolve('test'), resolve('node_modules/slot-layout')],
5555
use: [
5656
//step-2
5757
{

‎mock/root/api/getMenus.js

+5
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ module.exports = {
1616
url: '/theme',
1717
icon: 'el-icon-theme'
1818
},
19+
{
20+
title: 'Layout',
21+
url: '/layout',
22+
icon: 'el-icon-grid'
23+
},
1924
{
2025
title: 'Page1',
2126
url: '/stage1',

‎package-lock.json

+104-99
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/component/topHeader.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
{{menu.title}}
2828
</nav>
2929
</div>
30-
<debug-info :info="topMenus"></debug-info>
30+
<!--<debug-info :info="topMenus"></debug-info>-->
3131
</header>
3232
</template>
3333

‎src/css/utils.scss

+54-14
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,20 @@ body, input, select, textarea, button {
5656
}
5757

5858
.lined {
59-
background-position: bottom;
60-
background-repeat: no-repeat;
61-
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdib3g9IjAsMCwxLDEiPjxsaW5lIHkxPSIxMDAlIiB4MT0iMCIgeTI9IjEwMCUiIHgyPSI5OTk5IiBzdHJva2U9IiNjY2MiIGZpbGw9Im5vbmUiLz48L3N2Zz4=');
62-
min-height: 1px;
59+
border-bottom: 1px solid #eee;
60+
}
61+
62+
.toplined {
63+
border-top: 1px solid #eee;
64+
}
65+
66+
.shaddowed {
67+
box-shadow: 0 0 4px 1px rgba(#000, 0.1);
6368
}
6469

6570
.pre {
6671
white-space: pre-wrap;
67-
line-height: 1.1em;
72+
line-height: 1.5;
6873
word-break: break-all;
6974
}
7075

@@ -86,10 +91,13 @@ body, input, select, textarea, button {
8691

8792
.bordered {
8893
border: 1px solid #ddd;
94+
}
95+
96+
.radius {
8997
border-radius: 4px;
9098
}
9199

92-
.pointer {
100+
.pointer, .pointer * {
93101
cursor: pointer;
94102
}
95103

@@ -161,6 +169,14 @@ body, input, select, textarea, button {
161169
flex-shrink: 0;
162170
}
163171

172+
.f-grow {
173+
flex-grow: 1;
174+
}
175+
176+
.f-end {
177+
justify-content: flex-end;
178+
}
179+
164180
.t-right {
165181
text-align: right;
166182
}
@@ -212,16 +228,12 @@ table {
212228
overflow: auto;
213229
}
214230

215-
.pd-10 {
216-
padding: 10px;
217-
}
218-
219-
.pd-20 {
220-
padding: 20px;
231+
.absolute {
232+
position: absolute;
221233
}
222234

223-
.mg-10 {
224-
margin: 10px;
235+
.relative {
236+
position: relative;
225237
}
226238

227239
.white-bg {
@@ -231,3 +243,31 @@ table {
231243
.pre {
232244
white-space: pre-wrap;
233245
}
246+
247+
.bold {
248+
font-weight: bold;
249+
}
250+
251+
//最大4块，自动调整为4、3、2、1块并撑满
252+
.flex-4 {
253+
flex-basis: 21%;
254+
flex-grow: 1;
255+
}
256+
257+
@media (max-width: 1400px) {
258+
.flex-4 {
259+
flex-basis: 26%;
260+
}
261+
}
262+
263+
@media (max-width: 1100px) {
264+
.flex-4 {
265+
flex-basis: 34%;
266+
}
267+
}
268+
269+
@media (max-width: 800px) {
270+
.flex-4 {
271+
flex-basis: 51%;
272+
}
273+
}

‎src/iconfont/fonts/_font-preview.html

+30-13
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
flex-flow: column;
2323
flex: 0 0 240px;
2424
align-items: center;
25-
margin-bottom: 50px;
25+
padding-bottom: 50px;
2626
}
2727

2828
.flex-tb > section > header {
@@ -40,6 +40,7 @@
4040
position: absolute;
4141
background: #fff;
4242
border: 1px solid #ddd;
43+
top: 20px;
4344
}
4445

4546
.flex-tb div:hover > i {
@@ -48,37 +49,53 @@
4849
body{
4950
background: #ddd;
5051
}
52+
td { padding: 5px 10px; }
53+
input { border: 0; outline: 0; width: 150px; text-align: center; background: transparent; }
54+
section { position: relative; }
5155
</style>
56+
<script>
57+
function copyCls(el){
58+
el = el.querySelector('input')
59+
el.focus();
60+
el.select()
61+
document.execCommand('copy', false, null);
62+
}
63+
</script>
5264
<body>
65+
<h3 align="center"><a href="https://segmentfault.com/a/1190000017480480">webpack-iconfont-plugin-nodejs</a></h3>
66+
<h4>
67+
Modify or add a svg file in dir [src/iconfont/svgs], they will be parsed to iconfonts with css, and hot-loaded. <br/>
68+
修改或者添加svg文件到[src/iconfont/svgs]目录，将自动生成为iconfonts以及配套的css，支持热重载。</h4>
69+
<hr/>
5370
<div class="info">
54-
<h3>my-app-icon (5)</h3>
55-
<div>Class name prefix: my-icon-</div>
71+
<h3>my-app-icon (5 icons, click to copy)</h3>
72+
Class name prefix: <b>my-icon-</b> &emsp; You can use it like: &lt;i class="my-icon-success"&gt;&lt;/i&gt;
5673
</div>
5774
<hr/>
5875
<div class="flex-tb">
5976

60-
<section>
61-
<header contenteditable>my-icon-bookmark</header>
77+
<section onclick="copyCls(this)">
78+
<input value="my-icon-bookmark" />
6279
<div><i class="my-icon-bookmark"></i></div>
6380
</section>
6481

65-
<section>
66-
<header contenteditable>my-icon-calendar</header>
82+
<section onclick="copyCls(this)">
83+
<input value="my-icon-calendar" />
6784
<div><i class="my-icon-calendar"></i></div>
6885
</section>
6986

70-
<section>
71-
<header contenteditable>my-icon-state-beinvited</header>
87+
<section onclick="copyCls(this)">
88+
<input value="my-icon-state-beinvited" />
7289
<div><i class="my-icon-state-beinvited"></i></div>
7390
</section>
7491

75-
<section>
76-
<header contenteditable>my-icon-success</header>
92+
<section onclick="copyCls(this)">
93+
<input value="my-icon-success" />
7794
<div><i class="my-icon-success"></i></div>
7895
</section>
7996

80-
<section>
81-
<header contenteditable>my-icon-warning</header>
97+
<section onclick="copyCls(this)">
98+
<input value="my-icon-warning" />
8299
<div><i class="my-icon-warning"></i></div>
83100
</section>
84101

‎src/iconfont/fonts/my-app-icon.ttf

16 Bytes
Binary file not shown.

‎src/iconfont/fonts/my-app-icon.woff

16 Bytes
Binary file not shown.

‎src/iconfont/fonts/my-app-icon.woff2

8 Bytes
Binary file not shown.

‎src/router/routerMain.js

+4
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ const router = new Router({
3535
component: () => spinRoute.require(import('../views/iconfontPreview/iconfontPreview.vue'))
3636
},
3737
{ path: '/zrest', component: () => spinRoute.require(import('../views/zrest/zrest.vue')) },
38+
{
39+
path: '/layout',
40+
component: () => spinRoute.require(import('../views/slot-layout.vue'))
41+
},
3842
{ path: '*', component: () => spinRoute.require(import('../views/home/404.vue')) }
3943
],
4044
},

‎src/views/iconfontPreview/iconfontPreview.vue

+24-8
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
flex-flow: column;
1515
flex: 0 0 240px;
1616
align-items: center;
17-
margin-bottom: 50px;
17+
padding-bottom: 50px;
1818
}
1919
2020
.flex-tb > section > header {
@@ -33,25 +33,33 @@
3333
position: absolute;
3434
background: #fff;
3535
border: 1px solid #ddd;
36+
top: 20px;
3637
}
3738
3839
.flex-tb div:hover > i {
3940
font-size: 200px;
4041
}
42+
43+
td { padding: 5px 10px; }
44+
input { border: 0; outline: 0; width: 150px; text-align: center; background: transparent; }
45+
section { position: relative; }
4146
</style>
4247
<template>
4348
<div>
44-
<div class="info">
45-
<h2>my-app-icon (5)</h2>
46-
<div>Class name prefix: my-icon-</div>
47-
</div>
49+
<h4>
50+
Modify or add a svg file in dir [src/iconfont/svgs], they will be parsed to iconfonts with css, and hot-loaded. <br/>
51+
修改或者添加svg文件到[src/iconfont/svgs]目录，将自动生成为iconfonts以及配套的css，支持热重载。</h4>
52+
<hr/>
53+
<div class="info">
54+
<h3>my-app-icon (5 icons, click to copy)</h3>
55+
Class name prefix: <b>my-icon-</b> &emsp; You can use it like: &lt;i class="my-icon-success"&gt;&lt;/i&gt;
56+
</div>
4857
<hr/>
4958
<div class="flex-tb">
50-
<section v-for="font in fontList" :key="font.name">
51-
<header contenteditable>my-icon-{{font.name}}</header>
59+
<section v-for="font in fontList" :key="font.name" @click="copyCls">
60+
<input :value="'my-icon-'+font.name" />
5261
<div><i :class="'my-icon-'+font.name"></i></div>
5362
</section>
54-
5563
</div>
5664

5765
<foot-code></foot-code>
@@ -67,6 +75,14 @@
6775
fontList
6876
}
6977
},
78+
methods:{
79+
copyCls(e){
80+
var el = e.currentTarget.querySelector('input')
81+
el.focus();
82+
el.select()
83+
document.execCommand('copy', false, null);
84+
}
85+
},
7086
components: { footCode }
7187
}
7288
</script>

0 commit comments

Comments
 (0)