forgetest5
/
vue-manage-system1
mirror of https://mirror.trustie.net/testforgeroot/vue-manage-system1.git
1
0
Fork 0
Code Issues Releases Wiki Activity

'添加自定义图标'

This commit is contained in:
lin-xin 2018-09-10 16:37:33 +08:00
parent 90f44405ba
commit cd96319f97
8 changed files with 195 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -1,4 +1,4 @@
# manage-system #
# vue-manage-system #
基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/)
[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
@ -31,6 +31,7 @@
- [x] 权限测试
- [x] 404 / 403
- [x] 三级菜单
- [x] 自定义图标
## 目录结构介绍 ##
@ -53,6 +54,7 @@
| |-- BaseTable.vue // 基础表格
| |-- DashBoard.vue // 系统首页
| |-- DragList.vue // 拖拽列表组件
| |-- Icon.vue // 自定义图标组件
| |-- Login.vue // 登录
| |-- Markdown.vue // markdown组件
| |-- Premission.vue // 权限测试组件

4
README_EN.md
View File

@ -1,4 +1,4 @@
# manage-system #
# vue-manage-system #
The web management system solution based on Vue2 and Element-UI。[live demo](http://blog.gdfengshuo.com/example/work/)
## Donation
@ -22,6 +22,8 @@ The scheme as a set of multi-function background frame templates, suitable for m
- [x] List drag sort
- [x] Permission
- [x] 404 / 403
- [x] Three level menu
- [x] Custom icon
## Directory structure ##

1
src/App.vue
View File

@ -4,6 +4,7 @@
</div>
</template>
<style>
@import 'http://at.alicdn.com/t/font_830376_95kzqdmphss.css';
@import "../static/css/main.css";
@import "../static/css/color-dark.css"; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; 浅绿色主题*/

17
src/components/common/Sidebar.vue
View File

@ -39,22 +39,22 @@
collapse: false,
items: [
{
icon: 'el-icon-setting',
icon: 'el-icon-lx-home',
index: 'dashboard',
title: '系统首页'
},
{
icon: 'el-icon-tickets',
icon: 'el-icon-lx-cascades',
index: 'table',
title: '基础表格'
},
{
icon: 'el-icon-message',
icon: 'el-icon-lx-copy',
index: 'tabs',
title: 'tab选项卡'
},
{
icon: 'el-icon-date',
icon: 'el-icon-lx-calendar',
index: '3',
title: '表单相关',
subs: [
@ -83,7 +83,12 @@
]
},
{
icon: 'el-icon-star-on',
icon: 'el-icon-lx-emoji',
index: 'icon',
title: '自定义图标'
},
{
icon: 'el-icon-lx-favor',
index: 'charts',
title: 'schart图表'
},
@ -93,7 +98,7 @@
title: '拖拽列表'
},
{
icon: 'el-icon-error',
icon: 'el-icon-lx-warn',
index: '6',
title: '错误处理',
subs: [

6
src/components/page/Dashboard.vue
View File

@ -36,7 +36,7 @@
<el-col :span="8">
<el-card shadow="hover" :body-style="{padding: '0px'}">
<div class="grid-content grid-con-1">
<i class="el-icon-view grid-con-icon"></i>
<i class="el-icon-lx-people grid-con-icon"></i>
<div class="grid-cont-right">
<div class="grid-num">1234</div>
<div>用户访问量</div>
@ -47,7 +47,7 @@
<el-col :span="8">
<el-card shadow="hover" :body-style="{padding: '0px'}">
<div class="grid-content grid-con-2">
<i class="el-icon-message grid-con-icon"></i>
<i class="el-icon-lx-notice grid-con-icon"></i>
<div class="grid-cont-right">
<div class="grid-num">321</div>
<div>系统消息</div>
@ -58,7 +58,7 @@
<el-col :span="8">
<el-card shadow="hover" :body-style="{padding: '0px'}">
<div class="grid-content grid-con-3">
<i class="el-icon-goods grid-con-icon"></i>
<i class="el-icon-lx-goods grid-con-icon"></i>
<div class="grid-cont-right">
<div class="grid-num">5000</div>
<div>数量</div>

166
src/components/page/Icon.vue Normal file
View File

@ -0,0 +1,166 @@
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-warning"></i> 自定义图标</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<h2>使用方法</h2>
<p>
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：
</p>
<p class="example-p">
<i class="el-icon-lx-delete" style="font-size: 30px;"></i>
<span>&lt;i class=&quot;el-icon-lx-delete&quot;&gt;&lt;/i&gt;</span>
</p>
<p class="example-p">
<i class="el-icon-lx-weibo" style="font-size: 30px;color: red"></i>
<span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
</p>
<p class="example-p">
<i class="el-icon-lx-favorfill" style="font-size: 30px;color: #ffc300"></i>
<span>&lt;i class=&quot;el-icon-lx-favorfill&quot;&gt;&lt;/i&gt;</span>
</p>
<br>
<h2>图标</h2>
<div class="search-box">
<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
</div>
<ul>
<li class="icon-li" v-for="(item,index) in list" :key="index">
<div class="icon-li-content">
<i :class="`el-icon-lx-${item}`"></i>
<span>{{item}}</span>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data: function(){
return {
keyword: '',
iconList: [
'attentionforbid',
'attentionforbidfill',
'attention',
'attentionfill',
'tag',
'tagfill',
'people',
'peoplefill',
'notice',
'noticefill',
'mobile',
'mobilefill',
'voice',
'voicefill',
'unlock',
'lock',
'home',
'homefill',
'delete',
'deletefill',
'notification',
'notificationfill',
'notificationforbidfill',
'like',
'likefill',
'comment',
'commentfill',
'camera',
'camerafill',
'warn',
'warnfill',
'time',
'timefill',
'location',
'locationfill',
'favor',
'favorfill',
'full',
'text',
'group',
'friend',
'profile',
'addressbook',
'calendar',
'apps',
'copy',
'share',
'wifi',
'vipcard',
'goods',
'weibo',
'message',
'remind',
'qrcode',
'cart',
'refresh',
'top',
'filter',
'pic',
'settings',
'scan',
'cascades',
'search',
'emoji',
'edit'
]
}
},
computed: {
list(){
return this.iconList.filter((item) => {
return item.indexOf(this.keyword) !== -1;
})
}
}
}
</script>
<style scoped>
.example-p{
height: 45px;
display: flex;
align-items: center;
}
.search-box{
text-align: center;
margin-top: 10px;
}
.search{
width: 300px;
}
ul,li{
list-style: none;
}
.icon-li{
display: inline-block;
padding: 10px;
width: 120px;
height: 120px;
}
.icon-li-content{
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.icon-li-content i{
font-size: 36px;
color: #606266;
}
.icon-li-content span{
margin-top: 10px;
color: #787878;
}
</style>

5
src/router/index.js
View File

@ -19,6 +19,11 @@ export default new Router({
component: resolve => require(['../components/page/Dashboard.vue'], resolve),
meta: { title: '系统首页' }
},
{
path: '/icon',
component: resolve => require(['../components/page/Icon.vue'], resolve),
meta: { title: '自定义图标' }
},
{
path: '/table',
component: resolve => require(['../components/page/BaseTable.vue'], resolve),

3
static/css/main.css
View File

@ -19,6 +19,9 @@ body {
a {
text-decoration: none
}
[class*=" el-icon-lx"], [class^=el-icon-lx] {
font-family: lx-iconfont!important;
}
.content-box {
position: absolute;