Skip to content

Commit 94d3a08

Browse files
wangkaiwdwangkaiwd
committed
feat: 删除功能实现
1 parent 8e14b21 commit 94d3a08

File tree

4 files changed

+157
-1
lines changed

4 files changed

+157
-1
lines changed

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
88
<title>vue-admin</title>
9-
<script src="//at.alicdn.com/t/font_1140806_ww48lyk0pns.js"></script>
9+
<script src="//at.alicdn.com/t/font_1140806_dhvm6w8hwgr.js"></script>
1010
</head>
1111
<body>
1212
<noscript>

‎src/layouts/header/index.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
<admin-icon icon="menu"></admin-icon>
55
</div>
66
<div class="base-header-user">
7+
<span class="base-header-user-github">
8+
9+
</span>
710
<span class="base-header-user-name">{{userInfo.username}}</span>
811
<el-dropdown @command="onCommand">
912
<img

‎src/router/index.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,21 @@ const authRoutes = [
9191
meta: { access: 'mapForm' },
9292
}
9393
]
94+
},
95+
{
96+
path: '/',
97+
name: '个人页',
98+
component: lazyLoading('home'),
99+
iconCls: 'el-icon-setting',
100+
meta: { access: true },
101+
children: [
102+
{
103+
path: '/userCenter',
104+
name: '个人中心',
105+
component: lazyLoading('personal/userCenter'),
106+
meta: { access: true },
107+
}
108+
]
94109
}
95110
];
96111
const commonRoutes = [

‎src/views/personal/userCenter/index.vue‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<template>
2+
<el-row type="flex" justify="center" class="user-center">
3+
<el-col :span="18">
4+
<el-card class="box-card">
5+
<el-row class="user-center-wrapper">
6+
<el-col class="user-center-item personal-avatar" :span="18">
7+
<img class="user-avatar" src="~img/defaultAvatar.png" alt="">
8+
<span class="user-name">
9+
wangkaiwd
10+
</span>
11+
<span class="user-motto">
12+
Enjoy what you are doing!
13+
</span>
14+
</el-col>
15+
<el-col
16+
class="user-center-item"
17+
:span="18"
18+
v-for="item in userJobInfo"
19+
:key="item.id"
20+
>
21+
<admin-icon :icon="item.icon"></admin-icon>
22+
<span class="detail-text">{{item.text}}</span>
23+
</el-col>
24+
</el-row>
25+
<el-row class="user-center-wrapper">
26+
<el-col :span="18" class="user-center-tag-title">标签</el-col>
27+
<el-col class="user-center-tag-content" :span="18">
28+
<el-tag
29+
class="user-center-tag-item"
30+
:key="tag"
31+
v-for="tag in tags"
32+
size="small"
33+
closable
34+
@close="onTagClose(tag)">
35+
{{tag}}
36+
</el-tag>
37+
<el-input
38+
class="user-center-tag-item new-tag-input"
39+
v-if="inputVisible"
40+
v-model="inputValue"
41+
ref="saveTagInput"
42+
size="small"
43+
@keyup.enter.native="onInputConfirm"
44+
@blur="onInputConfirm"
45+
>
46+
</el-input>
47+
<el-button
48+
v-else
49+
class="user-center-tag-item"
50+
size="small"
51+
@click="showInput"
52+
>
53+
+ New Tag
54+
</el-button>
55+
</el-col>
56+
</el-row>
57+
</el-card>
58+
</el-col>
59+
</el-row>
60+
</template>
61+
62+
<script>
63+
const userJobInfo = [
64+
{ icon: 'job', text: 'web前端工程师', id: 1, },
65+
{ icon: 'department', text: '某某公司－某某某事业群－某某平台部－某某技术部－front developer', id: 2 },
66+
{ icon: 'address', text: '浙江省 杭州市 萧山区', id: 3 },
67+
{ icon: 'github', text: 'https://github.com/wangkaiwd', id: 4 }
68+
];
69+
import AdminIcon from 'components/icon';
70+
71+
export default {
72+
name: 'UserCenter',
73+
components: { AdminIcon },
74+
data () {
75+
return {
76+
userJobInfo,
77+
tags: ['很有想法的', '专注学习', '王者荣耀', '抖音', '乒乓球'],
78+
inputVisible: false,
79+
inputValue: ''
80+
};
81+
},
82+
methods: {
83+
onTagClose (tag) {
84+
const i = this.tags.findIndex(item => item === tag);
85+
this.tags.splice(i, 1);
86+
},
87+
onInputConfirm () {
88+
89+
},
90+
showInput () {
91+
this.inputVisible = true;
92+
}
93+
}
94+
};
95+
</script>
96+
97+
<style lang="scss" scoped>
98+
.user-center {
99+
.box-card {
100+
.personal-avatar {
101+
display: flex;
102+
flex-direction: column;
103+
align-items: center;
104+
margin-bottom: 10px;
105+
}
106+
.user-avatar {
107+
width: 200px;
108+
height: 200px;
109+
border-radius: 50%;
110+
}
111+
.user-name {
112+
display: inline-block;
113+
margin: 10px 0;
114+
font-size: 28px;
115+
font-weight: 500;
116+
}
117+
}
118+
&-wrapper {
119+
display: flex;
120+
flex-direction: column;
121+
align-items: center;
122+
}
123+
&-tag-title {
124+
margin: 20px 0;
125+
}
126+
&-tag-content {margin-left: -6px; margin-top: -6px;}
127+
&-tag-item {margin-left: 6px;margin-top: 6px;}
128+
&-item:not(:first-child) {
129+
margin: 6px 0;
130+
}
131+
.detail-text {
132+
margin-left: 6px;
133+
}
134+
.new-tag-input {
135+
width: 80px;
136+
}
137+
}
138+
</style>

0 commit comments

Comments
 (0)