open-source/eladmin-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

使用栅格布局 (#75)

Browse Source 
* 可根据主题色动态改变菜单栏字体颜色

* 使用栅格布局
This commit is contained in:
xuanzai
2020-02-10 15:04:05 +08:00
committed by GitHub
parent 3e8236a4ac
commit ca877166a7
1 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/components/icons/index.vue
View File

@@ -6,30 +6,34 @@
</aside> </aside>
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane label="Icons"> <el-tab-pane label="Icons">
<div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)"> <div class="grid">
<el-tooltip placement="top"> <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
<div slot="content"> <el-tooltip placement="top">
{{ generateIconCode(item) }} <div slot="content">
</div> {{ generateIconCode(item) }}
<div class="icon-item"> </div>
<svg-icon :icon-class="item" class-name="disabled" /> <div class="icon-item">
<span>{{ item }}</span> <svg-icon :icon-class="item" class-name="disabled" />
</div> <span>{{ item }}</span>
</el-tooltip> </div>
</div> </el-tooltip>
</div>
</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="Element-UI Icons"> <el-tab-pane label="Element-UI Icons">
<div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)"> <div class="grid">
<el-tooltip placement="top"> <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
<div slot="content"> <el-tooltip placement="top">
{{ generateElementIconCode(item) }} <div slot="content">
</div> {{ generateElementIconCode(item) }}
<div class="icon-item"> </div>
<i :class="'el-icon-' + item" /> <div class="icon-item">
<span>{{ item }}</span> <i :class="'el-icon-' + item" />
</div> <span>{{ item }}</span>
</el-tooltip> </div>
</div> </el-tooltip>
</div>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@@ -39,7 +43,6 @@
import clipboard from '@/utils/clipboard' import clipboard from '@/utils/clipboard'
import svgIcons from './svg-icons' import svgIcons from './svg-icons'
import elementIcons from './element-icons' import elementIcons from './element-icons'
export default { export default {
name: 'Icons', name: 'Icons',
data() { data() {
@@ -66,7 +69,12 @@ export default {
.icons-container { .icons-container {
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;
@@ -77,13 +85,11 @@ export default {
color: #24292e; color: #24292e;
cursor: pointer; cursor: pointer;
} }
span { span {
display: block; display: block;
font-size: 16px; font-size: 16px;
margin-top: 10px; margin-top: 10px;
} }
.disabled { .disabled {
pointer-events: none; pointer-events: none;
} }