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-11 15:16:15 +08:00
parent 286a7cc717
commit bdb412b039
4 changed files with 82 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,3 +2,4 @@
node_modules/
dist/
npm-debug.log
example.html

15
index.html
View File

@ -2,23 +2,10 @@
<html>
<head>
<meta charset="utf-8">
<title>vue-manage-system | 基于Vue的后台管理系统</title>
<title>vue-manage-system</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="keywords" content="vue, vue-manage-system, manage-system, 后台管理系统, element" />
<meta name="description" content="基于Vue2 + Element UI 的后台管理系统解决方案" />
</head>
<body>
<div id="app"></div>
<!--<script src="./static/js/vendor.dll.js"></script>-->
<!-- <script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?b455f7e1c6ca6e239edaccf0e6aa11fb";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script> -->
</body>
</html>

2
src/App.vue
View File

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

96
src/components/page/Icon.vue
View File

@ -7,20 +7,20 @@
</div>
<div class="container">
<h2>使用方法</h2>
<p>
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：
<p style="line-height: 50px;">
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）
</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>
<i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i>
<span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
</p>
<p class="example-p">
<i class="el-icon-lx-weibo" style="font-size: 30px;color: red"></i>
<i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></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>
<i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i>
<span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
</p>
<br>
<h2>图标</h2>
@ -83,35 +83,94 @@
'locationfill',
'favor',
'favorfill',
'skin',
'skinfill',
'news',
'newsfill',
'record',
'recordfill',
'emoji',
'emojifill',
'message',
'messagefill',
'goods',
'goodsfill',
'crown',
'crownfill',
'move',
'add',
'hot',
'hotfill',
'service',
'servicefill',
'present',
'presentfill',
'pic',
'picfill',
'rank',
'rankfill',
'male',
'female',
'down',
'top',
'recharge',
'rechargefill',
'forward',
'forwardfill',
'info',
'infofill',
'redpacket',
'redpacket_fill',
'roundadd',
'roundaddfill',
'friendadd',
'friendaddfill',
'cart',
'cartfill',
'more',
'moreandroid',
'back',
'right',
'shop',
'shopfill',
'question',
'questionfill',
'roundclose',
'roundclosefill',
'roundcheck',
'roundcheckfill',
'global',
'mail',
'punch',
'exit',
'upload',
'read',
'file',
'link',
'full',
'text',
'group',
'friend',
'profile',
'addressbook',
'calendar',
'apps',
'text',
'copy',
'share',
'wifi',
'vipcard',
'goods',
'weibo',
'message',
'remind',
'qrcode',
'cart',
'refresh',
'top',
'filter',
'pic',
'settings',
'scan',
'qrcode',
'cascades',
'apps',
'sort',
'searchlist',
'search',
'emoji',
'edit'
]
}
},
@ -121,6 +180,9 @@
return item.indexOf(this.keyword) !== -1;
})
}
},
created(){
console.log(this.iconList.length);
}
}
</script>