Skip to content

Commit 3ce6ac0

Browse files
author
longshihui
committed
feat(navigator-index): 新增"更多信息"栏，移除原有的描述、类型栏
1 parent 1a31fa6 commit 3ce6ac0

File tree

16 files changed

+331
-57
lines changed

16 files changed

+331
-57
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"serve": "vue-cli-service serve",
3535
"build": "rollup -c rollup.config.js",
3636
"lint": "vue-cli-service lint",
37-
"prepublish": "npm run build"
37+
"preversion": "npm run build"
3838
},
3939
"dependencies": {
4040
"@vue/ui": "^0.5.5",

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
77
<title>vue-cli-plugin-navigator</title>
88
</head>
99
<body>

‎src/assets/color.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
$main: #e4f5ef;
1+
$faint: #e4f5ef;
2+
$bright: #42b983;
3+
$dark: #2e4053;

‎src/navigator-index/app.vue

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -9,42 +9,58 @@
99
</h1>
1010
</section>
1111
<section class="section">
12-
<v-input v-model="userInput" placeholder="search your page title..." center/>
12+
<v-input v-model="userInput" placeholder="Search for the page you want to open..." center/>
1313
</section>
1414
<section class="section">
1515
<v-table :data="filterPages" @row-click="rowClickHandler">
16-
<v-table-col label="title" prop="title" />
17-
<v-table-col label="type" prop="type" default="none" />
18-
<v-table-col label="description" prop="description" default="none" />
16+
<v-table-col label="Title" prop="title" />
17+
<v-table-col label="Tags" prop="type" default="none" />
18+
<v-table-col label="More information" default="none">
19+
<template slot-scope="props">
20+
<a class="link" href="javascript:;" @click.stop="open(props.row.description)">more...</a>
21+
</template>
22+
</v-table-col>
1923
</v-table>
2024
</section>
2125
<section class="section">
22-
Note: click any table row will open the page
26+
Tip: Clicking on any row in the table will open the page.
2327
</section>
2428
<footer class="footer">
2529
@ create by vue-cli-plugin-navigator
2630
</footer>
31+
<v-dialog title="Information" :visible.sync="showDetail">
32+
<template slot="body">
33+
{{detailContent}}
34+
</template>
35+
<v-button type="dark" value="close" slot="footer" @click="showDetail = false"/>
36+
</v-dialog>
2737
</div>
2838
</template>
2939

3040
<script lang="ts">
3141
/* eslint-disable prefer-destructuring */
3242
import Vue from 'vue';
33-
import VInput from './components/v-input';
34-
import { VTable, VTableCol } from './components/v-table';
43+
import VInput from '../ui/input';
44+
import { VTable, VTableCol } from '../ui/table';
45+
import VDialog from '../ui/dialog';
46+
import VButton from '../ui/button';
3547
import getConfig from '../utils/getConfig';
3648
3749
export default Vue.extend({
3850
name: 'app',
3951
components: {
4052
VInput,
4153
VTable,
42-
VTableCol
54+
VTableCol,
55+
VDialog,
56+
VButton
4357
},
4458
data() {
4559
return {
4660
userInput: '',
4761
pages: getConfig(),
62+
showDetail: false,
63+
detailContent: ''
4864
};
4965
},
5066
computed: {
@@ -57,25 +73,37 @@ export default Vue.extend({
5773
methods: {
5874
rowClickHandler(row: PageConfig) {
5975
location.href = row.path;
76+
},
77+
open(content: string) {
78+
this.detailContent = content;
79+
this.showDetail = true;
6080
}
6181
},
6282
});
6383
</script>
6484

6585
<style lang="scss">
86+
@import "~@/assets/color";
87+
html {
88+
height: 100%;
89+
}
6690
body {
6791
margin: 0;
6892
padding: 0;
93+
height: 100%;
6994
}
7095
#app {
96+
position: relative;
7197
font-family: sans-serif;
7298
box-sizing: border-box;
7399
color: #2c3e50;
74100
margin-left: auto;
75101
margin-right: auto;
76-
padding: 0 10px;
77-
min-width: 700px;
78-
max-width: 1024px;
102+
padding: 1px 10px 42px;
103+
min-width: 320px; // 移动端最小屏幕
104+
max-width: 1200px; // 最大尺寸
105+
min-height: 100%;
106+
-webkit-overflow-scrolling: touch;
79107
}
80108
81109
.section {
@@ -90,47 +118,7 @@ body {
90118
margin: 0 auto;
91119
width: 150px;
92120
height: 150px;
93-
background: url("data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAABU1BMVEUAAABBuIM1SV5BuINBuINA
94-
sIFBuINBuINBuINAsoE2TmBBuINBuINBuINBuINBuINBuINBuINBuINBuINBuINBuoRBuINBuINB
95-
uINBuINApn5AroBBuINBuINBuINBuINBuINBuIM8d3BBuINBuIM4XGVBuIM5ZmpBuINBuINBuIM8
96-
enI2UWE3VGM3VWNBuINBuIM3V2RBuIM4WmQ5YmhBuIM5Y2k6amtBuINBuIM6bm07cG47b207dG9B
97-
uINBuIMzO1k6Z2o6aGpBuINBuIM1SV5Bt4NDyok0Qlw0QFtCxogzOFk1R10zNldDzIk1Rl00RFwy
98-
NVczPVozO1lCw4dBvIRBvoVBv4VCyIhCwYZBuoM1S187gHEzN1dAqX8/nns+kXc9i3U7eW85bms5
99-
Z2k/o30+mHk4YWc4XGY3V2Q3UmJAroE8hXM6c21Bs4JBsYEzNFfbZAU+AAAARHRSTlMAu7v7IA7y
100-
5sQG/typi3pcQhT27cy9mmoxKAkDoZKDVEk7KhnRv7aSY083G/Xr4+DY2NTLsq+hd3RwZVVJOi2z
101-
u4WBsmbv4tkAAAcESURBVHja7NdZT+JgFMbx44aC+wIqxsQQkShqYjSYuCRq3rcLLW0pmwqI+4LL
102-
97+cGcfMKBbOE1Pu+rsmQHPSk/OnQCAQCAQCgUCAFYv2AKLR5FEvL0GES/TyjpJR7P/FKCYg2Vpd
103-
spwMES7jSFa9lhWQGNGwACiV8lOBfxCZIFhC8g9SeCpXFAEYJqIJgVDU+4ItOfo2wbZ1ybGNe1UR
104-
iAn6rUcgStnbuuSYzj6B9h1Tcuq32ZJA9NAf/dhIsheaJjnaBoE2gC/TLrLYQPrp3aiAqNd5ydJO
105-
CHKiSVb+WhWQUforHIJGcqZUXf5BImkCpCP8g7gR5QwaSChMH8YFQrGucpKl7xBgR5es3JWlCMQ4
106-
/bMsEOXioyE5tnlIrEPTlhzj8awsEMv03xq4ghsFhx/JFrG2+IE4hQa4etfokxGBOFdvcpJjanvE
107-
2NNMycndqOcCMUKfTfZhK/jZ1iVHWw9TR+F1jZ+r/Yyt3r5J+mJMQKwasIL1FHWU0oHVW7MEZIxa
108-
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
133-
rkJggg==");
121+
background: url('../assets/logo.png');
134122
background-size: cover;
135123
}
136124
@@ -144,7 +132,17 @@ rkJggg==");
144132
}
145133
146134
.link {
147-
color: #e83030;
135+
color: $bright;
148136
text-decoration: none;
149137
}
138+
139+
.v-table__row:hover {
140+
.link {
141+
color: #ffffff;
142+
}
143+
}
144+
145+
.tag {
146+
padding: 2px 5px;
147+
}
150148
</style>

‎src/ui/button/button.vue

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<button class="v-button"
3+
type="button"
4+
:class="{
5+
'v-button--normal': type === 'normal',
6+
'v-button--dark': type === 'dark'
7+
}"
8+
@click="$emit('click')"
9+
>{{value}}</button>
10+
</template>
11+
12+
<style lang="scss">
13+
@import "~@/assets/color";
14+
.v-button {
15+
outline: none;
16+
border: none;
17+
border-radius: 2px;
18+
min-width: 80px;
19+
height: 40px;
20+
padding: 0 1em;
21+
font-size: 14px;
22+
&--normal {
23+
background: $bright;
24+
color: #ffffff;
25+
}
26+
&--dark {
27+
background: $dark;
28+
color: #ffffff;
29+
}
30+
}
31+
</style>
32+
33+
<script lang="ts">
34+
import Vue from 'vue';
35+
export default Vue.extend({
36+
name: 'v-button',
37+
props: {
38+
value: String,
39+
type: {
40+
type: String,
41+
default: 'normal'
42+
}
43+
}
44+
});
45+
</script>

‎src/ui/button/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './button.vue';

‎src/ui/dialog/close.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)