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

perf[views/icons]: use grid (#2803)

This commit is contained in:
xuanzai 2019-12-01 15:48:30 +08:00 committed by 花裤衩
parent b2f8373a5b
commit ad444fe3ae
1 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/icons/index.vue
View File

@ -6,6 +6,7 @@
</aside> </aside>
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane label="Icons"> <el-tab-pane label="Icons">
<div class="grid">
<div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)"> <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
<el-tooltip placement="top"> <el-tooltip placement="top">
<div slot="content"> <div slot="content">
@ -17,8 +18,10 @@
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Element-UI Icons"> <el-tab-pane label="Element-UI Icons">
<div class="grid">
<div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)"> <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
<el-tooltip placement="top"> <el-tooltip placement="top">
<div slot="content"> <div slot="content">
@ -30,6 +33,7 @@
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@ -67,6 +71,12 @@ export default {
margin: 10px 20px 0; margin: 10px 20px 0;
overflow: hidden; overflow: hidden;
.grid {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.icon-item { .icon-item {
margin: 20px; margin: 20px;
height: 85px; height: 85px;