yyzone
Version:
yyzone vue components and utils
291 lines (288 loc) • 8.14 kB
Markdown
图标列表
```vue
<template>
<div class="article">
<div class="icon-content" v-for="icon in icons" :key="icon">
<div class="item" :title="`icon-${icon}`">
<YYIcon :type="icon"/>
</div>
<span class="icon-name">{{icon}}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
icons: [
'back-to-top',
'zihaojia',
'zihaojian',
'tingyong',
'search-2',
'liebiao',
'youkongjian',
'bianji',
'bianji-1',
'bianji-2',
'loading-',
'xiaoyou',
'lajitong',
'xuanze-fangxing',
'guanbi-fangxing',
'guanbi-yuanxing',
'xuanze-yuanxing',
'guanbi',
'xuanze',
'caidan',
'chucun',
'fuzhi',
'zhuanfa',
'jiandao',
'shezhi',
'fenxiang',
'fenxiang-1',
'at-sign',
'xiangji',
'qubiezhen',
'yinle',
'tupian',
'xinxing-tianchong',
'xinxing',
'tishi-yuanxing',
'tishi-sanjiaoxing',
'tishi',
'shijian',
'rili',
'shuaxin',
'shaixuan',
'shaixuan-1',
'gengduo',
'gengduo-1',
'renyuan-guanbi',
'renyuan-xuanze',
'renyuanzu',
'renyuan-fenxi',
'renyuan-xinzeng',
'renyuan',
'renyuanxinxi',
'renyuan-shanchu',
'jingli',
'qipao-yuanxing',
'qipao-fangxing',
'biaoqing',
'shexiangji',
'dianhua',
'youjian',
'zengjia',
'lishijilu',
'jiantou-you',
'jiantou-zuo',
'jiantou-xia',
'jiantou-shang',
'jiantou-zuoshang',
'jiantou-zuoxia',
'jiantou-youshang',
'jiantou-youxia',
'shuangVjiantou-shang',
'shuangVjiantou-zuo',
'shuanVjiantou-xia',
'shuangVjiantou-you',
'Vjiantou-you',
'Vjiantou-shang',
'Vjiantou-zuo',
'Vjiantou-xia',
'guaijiao-xiazuo',
'guaijiao-xiayou',
'guaijiao-zuoshang',
'guaijiao-youshang',
'guaijiao-shangzuo',
'guaijiao-shangyou',
'guaijiao-zuoxia',
'guaijiao-youxia',
'wenjianjia',
'wenjianjia-chuanshu',
'wenjianjia-xiangmu',
'wenjian',
'wenjian-wenben',
'wenjian-shanchu',
'wenjian-xinzeng',
'zuoduiqi',
'juzhongduiqi',
'youduiqi',
'liangbianduiqi',
'ziti',
'shuqian',
'shanchu',
'biaoqian',
'jiantieban',
'chouti',
'number-sign',
'suoxiao',
'fangda',
'shunshizhen',
'nishizhen',
'quanping',
'quanping-1',
'tuichuquanping',
'tuichuquanping-1',
'suo',
'suo-dakai',
'yanjing',
'yanjing-guanbi',
'lingdang',
'lingdang-guanbi',
'denglu',
'dengchu',
'maikefeng',
'maikefeng-guanbi',
'xuanze-fangxing-zhanshi',
'xuanze-yuanxing-zhanshi',
'yangshengqi-',
'yangshengqi-guanbi-',
'qiehuan-',
'bofang',
'zanting',
'tingzhi',
'zhongfu',
'yidong',
'jinzhi',
'kaiguan',
'chumo',
'gongxiang',
'renjijiaohu',
'dianji',
'cmd',
'touping',
'dingwei',
'guangbiao',
'dayinji',
'sousuoqingkong',
'zan',
'quanxian',
'cai',
'shangchuan',
'xiazai',
'chuangkouhuazhankai',
'chuangkouhuashouqi',
'lianjie',
'lianjie-1',
'xingxing-kong',
'xingxing-quan',
'xingxing-ban',
'yunxiazai',
'yunshangchuan',
'yun',
'xinzeng-fangxing',
'xinzeng',
'xinzeng-yuanxing',
'xinzeng-yuanxing-xuxian',
'shanchu-yuanxing-xuxian',
'shanchu-fangxing',
'shanchu1',
'shanchu-yuanxing',
'guangbo',
'saoyisao',
'wifi',
'cebianlan',
'buju',
'cengji',
'wangge-kapian',
'fuxuan-banxuan',
'fuxuan-xuanzhong',
'shuxingjiegoukongjian-shouqizhankai',
'shuxingjiegoukongjian-shouqi',
'fangxing',
'sanjiaoxing',
'yuan',
'yuanhuan',
'bingzhuangtu',
'zhuzhuangtu',
'zhuzhuangtu-1',
'zhexianshangsheng',
'zhexianxiajiang',
'liuchengtu',
'liuchengtu-1',
'zuzhi',
'bodong',
'gonggong',
'xiangmu',
'xiangmu-1',
'dangan',
'danju',
'danju-1',
'shenpi',
'shenpi-1',
'shenpi-2',
'shenqing',
'baobiao',
'xinzi',
'HRrili',
'renzhizige',
'chashebao',
'fangan',
'wenda',
'qiyejieshao',
'ruzhiditu',
'yulan',
'fuyong',
'arrow-down',
'arrow-left',
'arrow-right',
'arrow-up',
'check-circle-fill',
'check-circle',
'check',
'close-circle-fill',
'close-circle',
'close',
'heart-fill',
'heart',
'loading',
'message-square',
'search',
'list',
'prev',
'more',
'next',
'calendar',
'filter-fill',
'filter',
'sort-asc',
'sort-desc'
]
}
}
}
</script>
<style scoped>
.article {
color: #000;
display: flex;
flex-wrap: wrap;
}
.article .icon-content {
width: 100px;
padding: 10px;
border: 1px solid #f0f0f0;
}
.article .icon-content .item {
font-size: 24px;
display: inline-block;
background-color: #fff;
width: 80px;
height: 40px;
color: #E14C46;
margin: 10px;
border-radius: 2px;
text-align: center;
line-height: 38px;
}
.article .icon-content .icon-name {
word-break: break-all;
display: inline-block;
width: 100%;
text-align: center;
}
</style>
```