interru/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

refine icon-svg

Browse source
This commit is contained in:
Pan 2017-07-05 11:42:29 +08:00
parent 9342ae6fc3
commit 622a8c3a69
13 changed files with 45 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/Icon-svg/index.js
View file

@ -1,11 +0,0 @@
import Vue from 'vue'
function registerAllComponents(requireContext) {
return requireContext.keys().forEach(comp => {
const vueComp = requireContext(comp)
const compName = vueComp.name ? vueComp.name.toLowerCase() : /\/([\w-]+)\.vue$/.exec(comp)[1]
Vue.component(compName, vueComp)
})
}
registerAllComponents(require.context('./', false, /\.vue$/))

8
src/components/Icon-svg/wscn-icon-svg.vue → src/components/Icon-svg/index.vue
View file

@ -1,12 +1,12 @@
<template>
<svg class="wscn-icon" aria-hidden="true">
<svg class="svg-icon" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
export default {
name: 'wscn-icon-svg',
name: 'icon-svg',
props: {
iconClass: {
type: String,
@ -20,7 +20,3 @@
}
}
</script>
<style lang="scss" scoped>
</style>

52
src/components/Icon-svg/wscn-icon-stack.vue
View file

@ -1,52 +0,0 @@
<template>
<div class="icon-container" :style="containerStyle">
<slot class="icon"></slot>
</div>
</template>
<script>
export default {
name: 'wscn-icon-stack',
props: {
width: {
type: Number,
default: 20
},
shape: {
type: String,
default: 'circle',
validator: val => {
const validShapes = ['circle', 'square']
return validShapes.indexOf(val) > -1
}
}
},
computed: {
containerStyle() {
return {
width: `${this.width}px`,
height: `${this.width}px`,
fontSize: `${this.width * 0.6}px`,
borderRadius: `${this.shape === 'circle' && '50%'}`
}
}
}
}
</script>
<style lang="scss" scoped>
.icon-container {
display: inline-block;
position: relative;
overflow: hidden;
background: #1482F0;
.icon {
position: absolute;
color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
</style>

4
src/main.js
View file

@ -10,19 +10,21 @@ import 'assets/custom-theme/index.css'; // 换肤版本element-ui css
import NProgress from 'nprogress'; // Progress 进度条
import 'nprogress/nprogress.css';// Progress 进度条 样式
import 'normalize.css/normalize.css';// normalize.css 样式格式化
import 'components/Icon-svg/index'; // 封装的svg组件
import 'assets/iconfont/iconfont'; // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki
import * as filters from './filters'; // 全局vue filter
import Multiselect from 'vue-multiselect';// 使用的一个多选框组件，element-ui的select不能满足所有需求
import 'vue-multiselect/dist/vue-multiselect.min.css';// 多选框组件css
import Sticky from 'components/Sticky'; // 粘性header组件
import IconSvg from 'components/Icon-svg';// svg 组件
import vueWaves from './directive/waves';// 水波纹指令
import errLog from 'store/errLog';// error log组件
import './mock/index.js'; // 该项目所有请求使用mockjs模拟
// register globally
Vue.component('multiselect', Multiselect);
Vue.component('Sticky', Sticky);
Vue.component('icon-svg', IconSvg)
Vue.use(ElementUI);
Vue.use(vueWaves);

2
src/styles/index.scss
View file

@ -116,7 +116,7 @@ code {
.text-center{
text-align: center
}
.wscn-icon {
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;

8
src/views/dashboard/editor/index.vue
View file

@ -1,6 +1,5 @@
<template>
<div class="dashboard-editor-container">
<a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 50px; border: 0; right: 0;"
aria-hidden="true">
@ -11,7 +10,6 @@
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<el-row class="btn-group">
<el-col :span="4" class='text-center'>
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
@ -38,19 +36,19 @@
<el-card class="box-card">
<div slot="header" class="box-card-header">
<pan-thumb class="panThumb" :image="avatar"> 你的权限:
<span class="pan-info-roles" v-for="item in roles">{{item}}</span>
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
</pan-thumb>
</div>
<span class="display_name">{{name}}</span>
<div class="info-item">
<countTo class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></countTo>
<span class="info-item-text">文章</span>
<wscn-icon-svg icon-class="a" class="dashboard-editor-icon" />
<icon-svg icon-class="a" class="dashboard-editor-icon"></icon-svg>
</div>
<div class="info-item">
<countTo class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></countTo>
<span class="info-item-text">浏览量</span>
<wscn-icon-svg icon-class="b" class="dashboard-editor-icon" />
<icon-svg icon-class="b" class="dashboard-editor-icon"></icon-svg>
</div>
</el-card>
</el-col>

2
src/views/example/tab/components/tabPane.vue
View file

@ -28,7 +28,7 @@
<el-table-column width="80px" label="重要性">
<template scope="scope">
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n"></icon-svg>
</template>
</el-table-column>

4
src/views/example/table/dragTable.vue
View file

@ -29,7 +29,7 @@
<el-table-column width="80px" label="重要性">
<template scope="scope">
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n"></icon-svg>
</template>
</el-table-column>
@ -47,7 +47,7 @@
<el-table-column align="center" label="拖拽" width="95">
<template scope="scope">
<wscn-icon-svg class='drag-handler' icon-class="tuozhuai" />
<icon-svg class='drag-handler' icon-class="tuozhuai" ></icon-svg>
</template>
</el-table-column>

2
src/views/example/table/inlineEditTable.vue
View file

@ -23,7 +23,7 @@
<el-table-column width="100px" label="重要性">
<template scope="scope">
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" ></icon-svg>
</template>
</el-table-column>

2
src/views/example/table/table.vue
View file

@ -60,7 +60,7 @@
<el-table-column width="80px" label="重要性">
<template scope="scope">
<wscn-icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" />
<icon-svg v-for="n in +scope.row.importance" icon-class="wujiaoxing" class="meta-item__icon" :key="n" ></icon-svg>
</template>
</el-table-column>

6
src/views/layout/SidebarItem.vue
View file

@ -3,12 +3,12 @@
<template v-for="item in routes">
<router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
<el-menu-item :index="item.path+'/'+item.children[0].path">
<wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
<icon-svg v-if='item.icon' :icon-class="item.icon" ></icon-svg>{{item.children[0].name}}
</el-menu-item>
</router-link>
<el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
<template slot="title">
<wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
<icon-svg v-if='item.icon' :icon-class="item.icon" ></icon-svg> {{item.name}}
</template>
<template v-for="child in item.children" v-if='!child.hidden'>
<sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
@ -36,7 +36,7 @@
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.wscn-icon {
.svg-icon {
margin-right: 10px;
}
.hideSidebar .menu-indent{

54
src/views/login/index.vue
View file

@ -1,32 +1,30 @@
<template>
<div class="login-container">
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
label-width="0px"
class="card-box login-form">
<h3 class="title">系统登录</h3>
<el-form-item prop="email">
<span class="svg-container"><wscn-icon-svg icon-class="jiedianyoujian"/></span>
<el-input name="email" type="text" v-model="loginForm.email" autoComplete="on"
placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item prop="password">
<span class="svg-container"><wscn-icon-svg icon-class="mima"/></span>
<el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password"
autoComplete="on" placeholder="密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
登录
</el-button>
</el-form-item>
<div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
<div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
</el-form>
<el-dialog title="第三方验证" :visible.sync="showDialog">
邮箱登录成功,请选择第三方验证
<socialSign></socialSign>
</el-dialog>
</div>
<div class="login-container">
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
class="card-box login-form">
<h3 class="title">系统登录</h3>
<el-form-item prop="email">
<span class="svg-container"><icon-svg icon-class="jiedianyoujian"></icon-svg></span>
<el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item prop="password">
<span class="svg-container"><icon-svg icon-class="mima"></icon-svg></span>
<el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
placeholder="密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
登录
</el-button>
</el-form-item>
<div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
<div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
</el-form>
<el-dialog title="第三方验证" :visible.sync="showDialog">
邮箱登录成功,请选择第三方验证
<socialSign></socialSign>
</el-dialog>
</div>
</template>
<script>

6
src/views/login/socialsignin.vue
View file

@ -1,12 +1,10 @@
<template>
<div class="social-signup-container">
<div class="sign-btn" @click="wechatHandleClick('wechat')">
<span class="wx-svg-container"><wscn-icon-svg icon-class="weixin" class="icon"/></span>
微信
<span class="wx-svg-container"><icon-svg icon-class="weixin" class="icon"></icon-svg></span> 微信
</div>
<div class="sign-btn" @click="tencentHandleClick('tencent')">
<span class="qq-svg-container"><wscn-icon-svg icon-class="QQ" class="icon"/></span>
QQ
<span class="qq-svg-container"><icon-svg icon-class="QQ" class="icon"></icon-svg></span> QQ
</div>
</div>
</template>