zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refine icon-svg

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> <template>
<svg class="wscn-icon" aria-hidden="true"> <svg class="svg-icon" aria-hidden="true">
<use :xlink:href="iconName"></use> <use :xlink:href="iconName"></use>
</svg> </svg>
</template> </template>
<script> <script>
export default { export default {
name: 'wscn-icon-svg', name: 'icon-svg',
props: { props: {
iconClass: { iconClass: {
type: String, type: String,
@ -20,7 +20,3 @@
} }
} }
</script> </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 from 'nprogress'; // Progress 进度条
import 'nprogress/nprogress.css';// Progress 进度条 样式 import 'nprogress/nprogress.css';// Progress 进度条 样式
import 'normalize.css/normalize.css';// normalize.css 样式格式化 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 'assets/iconfont/iconfont'; // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki
import * as filters from './filters'; // 全局vue filter import * as filters from './filters'; // 全局vue filter
import Multiselect from 'vue-multiselect';// 使用的一个多选框组件，element-ui的select不能满足所有需求 import Multiselect from 'vue-multiselect';// 使用的一个多选框组件，element-ui的select不能满足所有需求
import 'vue-multiselect/dist/vue-multiselect.min.css';// 多选框组件css import 'vue-multiselect/dist/vue-multiselect.min.css';// 多选框组件css
import Sticky from 'components/Sticky'; // 粘性header组件 import Sticky from 'components/Sticky'; // 粘性header组件
import IconSvg from 'components/Icon-svg';// svg 组件
import vueWaves from './directive/waves';// 水波纹指令 import vueWaves from './directive/waves';// 水波纹指令
import errLog from 'store/errLog';// error log组件 import errLog from 'store/errLog';// error log组件
import './mock/index.js'; // 该项目所有请求使用mockjs模拟 import './mock/index.js'; // 该项目所有请求使用mockjs模拟
// register globally // register globally
Vue.component('multiselect', Multiselect); Vue.component('multiselect', Multiselect);
Vue.component('Sticky', Sticky); Vue.component('Sticky', Sticky);
Vue.component('icon-svg', IconSvg)
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(vueWaves); Vue.use(vueWaves);

2
src/styles/index.scss
View File

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

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

@ -1,6 +1,5 @@
<template> <template>
<div class="dashboard-editor-container"> <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"> <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;" <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"> aria-hidden="true">
@ -11,7 +10,6 @@
fill="currentColor" class="octo-body"></path> fill="currentColor" class="octo-body"></path>
</svg> </svg>
</a> </a>
<el-row class="btn-group"> <el-row class="btn-group">
<el-col :span="4" class='text-center'> <el-col :span="4" class='text-center'>
<router-link class="pan-btn blue-btn" to="/components/index">Components</router-link> <router-link class="pan-btn blue-btn" to="/components/index">Components</router-link>
@ -38,19 +36,19 @@
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="box-card-header"> <div slot="header" class="box-card-header">
<pan-thumb class="panThumb" :image="avatar"> 你的权限: <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> </pan-thumb>
</div> </div>
<span class="display_name">{{name}}</span> <span class="display_name">{{name}}</span>
<div class="info-item"> <div class="info-item">
<countTo class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></countTo> <countTo class="info-item-num" :startVal='0' :endVal='statisticsData.article_count' :duration='3400'></countTo>
<span class="info-item-text">文章</span> <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>
<div class="info-item"> <div class="info-item">
<countTo class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></countTo> <countTo class="info-item-num" :startVal='0' :endVal='statisticsData.pageviews_count' :duration='3600'></countTo>
<span class="info-item-text">浏览量</span> <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> </div>
</el-card> </el-card>
</el-col> </el-col>

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

@ -28,7 +28,7 @@
<el-table-column width="80px" label="重要性"> <el-table-column width="80px" label="重要性">
<template scope="scope"> <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> </template>
</el-table-column> </el-table-column>

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

@ -29,7 +29,7 @@
<el-table-column width="80px" label="重要性"> <el-table-column width="80px" label="重要性">
<template scope="scope"> <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> </template>
</el-table-column> </el-table-column>
@ -47,7 +47,7 @@
<el-table-column align="center" label="拖拽" width="95"> <el-table-column align="center" label="拖拽" width="95">
<template scope="scope"> <template scope="scope">
<wscn-icon-svg class='drag-handler' icon-class="tuozhuai" /> <icon-svg class='drag-handler' icon-class="tuozhuai" ></icon-svg>
</template> </template>
</el-table-column> </el-table-column>

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

@ -23,7 +23,7 @@
<el-table-column width="100px" label="重要性"> <el-table-column width="100px" label="重要性">
<template scope="scope"> <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> </template>
</el-table-column> </el-table-column>

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

@ -60,7 +60,7 @@
<el-table-column width="80px" label="重要性"> <el-table-column width="80px" label="重要性">
<template scope="scope"> <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> </template>
</el-table-column> </el-table-column>

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

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

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

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

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

@ -1,12 +1,10 @@
<template> <template>
<div class="social-signup-container"> <div class="social-signup-container">
<div class="sign-btn" @click="wechatHandleClick('wechat')"> <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>
<div class="sign-btn" @click="tencentHandleClick('tencent')"> <div class="sign-btn" @click="tencentHandleClick('tencent')">
<span class="qq-svg-container"><wscn-icon-svg icon-class="QQ" class="icon"/></span> <span class="qq-svg-container"><icon-svg icon-class="QQ" class="icon"></icon-svg></span> QQ
QQ
</div> </div>
</div> </div>
</template> </template>