Skip to content

Commit 622a8c3

Browse files
committed
refine icon-svg
1 parent 9342ae6 commit 622a8c3

File tree

13 files changed

+45
-116
lines changed

13 files changed

+45
-116
lines changed

src/components/Icon-svg/index.js

Lines changed: 0 additions & 11 deletions
This file was deleted.
Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<svg class="wscn-icon" aria-hidden="true">
2+
<svg class="svg-icon" aria-hidden="true">
33
<use :xlink:href="iconName"></use>
44
</svg>
55
</template>
66

77
<script>
88
export default {
9-
name: 'wscn-icon-svg',
9+
name: 'icon-svg',
1010
props: {
1111
iconClass: {
1212
type: String,
@@ -20,7 +20,3 @@
2020
}
2121
}
2222
</script>
23-
24-
<style lang="scss" scoped>
25-
26-
</style>

src/components/Icon-svg/wscn-icon-stack.vue

Lines changed: 0 additions & 52 deletions
This file was deleted.

src/main.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,21 @@ import 'assets/custom-theme/index.css'; // 换肤版本element-ui css
1010
import NProgress from 'nprogress'; // Progress 进度条
1111
import 'nprogress/nprogress.css';// Progress 进度条 样式
1212
import 'normalize.css/normalize.css';// normalize.css 样式格式化
13-
import 'components/Icon-svg/index'; // 封装的svg组件
1413
import 'assets/iconfont/iconfont'; // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki
1514
import * as filters from './filters'; // 全局vue filter
1615
import Multiselect from 'vue-multiselect';// 使用的一个多选框组件,element-ui的select不能满足所有需求
1716
import 'vue-multiselect/dist/vue-multiselect.min.css';// 多选框组件css
1817
import Sticky from 'components/Sticky'; // 粘性header组件
18+
import IconSvg from 'components/Icon-svg';// svg 组件
1919
import vueWaves from './directive/waves';// 水波纹指令
2020
import errLog from 'store/errLog';// error log组件
2121
import './mock/index.js'; // 该项目所有请求使用mockjs模拟
2222

23+
2324
// register globally
2425
Vue.component('multiselect', Multiselect);
2526
Vue.component('Sticky', Sticky);
27+
Vue.component('icon-svg', IconSvg)
2628
Vue.use(ElementUI);
2729
Vue.use(vueWaves);
2830

src/styles/index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ code {
116116
.text-center{
117117
text-align: center
118118
}
119-
.wscn-icon {
119+
.svg-icon {
120120
width: 1em;
121121
height: 1em;
122122
vertical-align: -0.15em;

src/views/dashboard/editor/index.vue

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<template>
22
<div class="dashboard-editor-container">
3-
43
<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
54
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;"
65
aria-hidden="true">
@@ -11,7 +10,6 @@
1110
fill="currentColor" class="octo-body"></path>
1211
</svg>
1312
</a>
14-
1513
<el-row class="btn-group">
1614
<el-col :span="4" class='text-center'>
1715
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
@@ -38,19 +36,19 @@
3836
<el-card class="box-card">
3937
<div slot="header" class="box-card-header">
4038
<pan-thumb class="panThumb" :image="avatar"> 你的权限:
41-
<span class="pan-info-roles" v-for="item in roles">{{item}}</span>
39+
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
4240
</pan-thumb>
4341
</div>
4442
<span class="display_name">{{name}}</span>
4543
<div class="info-item">
4644
<countTo class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></countTo>
4745
<span class="info-item-text">文章</span>
48-
<wscn-icon-svg icon-class="a" class="dashboard-editor-icon" />
46+
<icon-svg icon-class="a" class="dashboard-editor-icon"></icon-svg>
4947
</div>
5048
<div class="info-item">
5149
<countTo class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></countTo>
5250
<span class="info-item-text">浏览量</span>
53-
<wscn-icon-svg icon-class="b" class="dashboard-editor-icon" />
51+
<icon-svg icon-class="b" class="dashboard-editor-icon"></icon-svg>
5452
</div>
5553
</el-card>
5654
</el-col>

src/views/example/tab/components/tabPane.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828

2929
<el-table-column width="80px" label="重要性">
3030
<template scope="scope">
31-
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
31+
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n"></icon-svg>
3232
</template>
3333
</el-table-column>
3434

src/views/example/table/dragTable.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
<el-table-column width="80px" label="重要性">
3131
<template scope="scope">
32-
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
32+
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n"></icon-svg>
3333
</template>
3434
</el-table-column>
3535

@@ -47,7 +47,7 @@
4747

4848
<el-table-column align="center" label="拖拽" width="95">
4949
<template scope="scope">
50-
<wscn-icon-svg class='drag-handler' icon-class="tuozhuai" />
50+
<icon-svg class='drag-handler' icon-class="tuozhuai" ></icon-svg>
5151
</template>
5252
</el-table-column>
5353

src/views/example/table/inlineEditTable.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323

2424
<el-table-column width="100px" label="重要性">
2525
<template scope="scope">
26-
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
26+
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" ></icon-svg>
2727
</template>
2828
</el-table-column>
2929

src/views/example/table/table.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060

6161
<el-table-column width="80px" label="重要性">
6262
<template scope="scope">
63-
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
63+
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" ></icon-svg>
6464
</template>
6565
</el-table-column>
6666

src/views/layout/SidebarItem.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
<template v-for="item in routes">
44
<router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
55
<el-menu-item :index="item.path+'/'+item.children[0].path">
6-
<wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
6+
<icon-svg v-if='item.icon' :icon-class="item.icon" ></icon-svg>{{item.children[0].name}}
77
</el-menu-item>
88
</router-link>
99
<el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
1010
<template slot="title">
11-
<wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
11+
<icon-svg v-if='item.icon' :icon-class="item.icon" ></icon-svg> {{item.name}}
1212
</template>
1313
<template v-for="child in item.children" v-if='!child.hidden'>
1414
<sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
@@ -36,7 +36,7 @@
3636
</script>
3737

3838
<style rel="stylesheet/scss" lang="scss" scoped>
39-
.wscn-icon {
39+
.svg-icon {
4040
margin-right: 10px;
4141
}
4242
.hideSidebar .menu-indent{

src/views/login/index.vue

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
11
<template>
2-
<div class="login-container">
3-
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
4-
label-width="0px"
5-
class="card-box login-form">
6-
<h3 class="title">系统登录</h3>
7-
<el-form-item prop="email">
8-
<span class="svg-container"><wscn-icon-svg icon-class="jiedianyoujian"/></span>
9-
<el-input name="email" type="text" v-model="loginForm.email" autoComplete="on"
10-
placeholder="邮箱"></el-input>
11-
</el-form-item>
12-
<el-form-item prop="password">
13-
<span class="svg-container"><wscn-icon-svg icon-class="mima"/></span>
14-
<el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password"
15-
autoComplete="on" placeholder="密码"></el-input>
16-
</el-form-item>
17-
<el-form-item>
18-
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
19-
登录
20-
</el-button>
21-
</el-form-item>
22-
<div class='tips'>admin账号为:[email protected] 密码随便填</div>
23-
<div class='tips'>editor账号:[email protected] 密码随便填</div>
24-
</el-form>
25-
<el-dialog title="第三方验证" :visible.sync="showDialog">
26-
邮箱登录成功,请选择第三方验证
27-
<socialSign></socialSign>
28-
</el-dialog>
29-
</div>
2+
<div class="login-container">
3+
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
4+
class="card-box login-form">
5+
<h3 class="title">系统登录</h3>
6+
<el-form-item prop="email">
7+
<span class="svg-container"><icon-svg icon-class="jiedianyoujian"></icon-svg></span>
8+
<el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
9+
</el-form-item>
10+
<el-form-item prop="password">
11+
<span class="svg-container"><icon-svg icon-class="mima"></icon-svg></span>
12+
<el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
13+
placeholder="密码"></el-input>
14+
</el-form-item>
15+
<el-form-item>
16+
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
17+
登录
18+
</el-button>
19+
</el-form-item>
20+
<div class='tips'>admin账号为:[email protected] 密码随便填</div>
21+
<div class='tips'>editor账号:[email protected] 密码随便填</div>
22+
</el-form>
23+
<el-dialog title="第三方验证" :visible.sync="showDialog">
24+
邮箱登录成功,请选择第三方验证
25+
<socialSign></socialSign>
26+
</el-dialog>
27+
</div>
3028
</template>
3129

3230
<script>

src/views/login/socialsignin.vue

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
<template>
22
<div class="social-signup-container">
33
<div class="sign-btn" @click="wechatHandleClick('wechat')">
4-
<span class="wx-svg-container"><wscn-icon-svg icon-class="weixin" class="icon"/></span>
5-
微信
4+
<span class="wx-svg-container"><icon-svg icon-class="weixin" class="icon"></icon-svg></span> 微信
65
</div>
76
<div class="sign-btn" @click="tencentHandleClick('tencent')">
8-
<span class="qq-svg-container"><wscn-icon-svg icon-class="QQ" class="icon"/></span>
9-
QQ
7+
<span class="qq-svg-container"><icon-svg icon-class="QQ" class="icon"></icon-svg></span> QQ
108
</div>
119
</div>
1210
</template>

0 commit comments

Comments
 (0)