优化全局组件里 element icon 的使用

This commit is contained in:
hooray 2021-11-04 16:03:14 +08:00
parent 3b1c46a22b
commit 4a47d97c2d
6 changed files with 18 additions and 14 deletions

View File

@ -11,7 +11,7 @@
drag
>
<div class="slot">
<i class="el-icon-upload" />
<el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
</div>
<template #tip>

View File

@ -23,10 +23,10 @@
<div class="mask">
<div class="actions">
<span title="预览" @click.stop="preview">
<i class="el-icon-zoom-in" />
<el-icon><el-icon-zoom-in /></el-icon>
</span>
<span title="移除" @click.stop="remove">
<i class="el-icon-delete" />
<el-icon><el-icon-delete /></el-icon>
</span>
</div>
</div>
@ -155,7 +155,6 @@ function onSuccess(res) {
top: 0;
width: 100%;
height: 100%;
font-size: 24px;
background-color: rgb(0 0 0 / 50%);
transition: all 0.3s;
.actions {
@ -179,6 +178,9 @@ function onSuccess(res) {
&:hover:not(.disabled) {
transform: scale(1.5);
}
.el-icon {
font-size: 24px;
}
}
}
}

View File

@ -5,16 +5,16 @@
<div class="mask">
<div class="actions">
<span title="预览" @click="preview(index)">
<i class="el-icon-zoom-in" />
<el-icon><el-icon-zoom-in /></el-icon>
</span>
<span title="移除" @click="remove(index)">
<i class="el-icon-delete" />
<el-icon><el-icon-delete /></el-icon>
</span>
<span v-show="url.length > 1" title="左移" :class="{'disabled': index == 0}" @click="move(index, 'left')">
<i class="el-icon-back" />
<el-icon><el-icon-back /></el-icon>
</span>
<span v-show="url.length > 1" title="右移" :class="{'disabled': index == url.length - 1}" @click="move(index, 'right')">
<i class="el-icon-right" />
<el-icon><el-icon-right /></el-icon>
</span>
</div>
</div>
@ -186,7 +186,6 @@ function onSuccess(res) {
top: 0;
width: 100%;
height: 100%;
font-size: 24px;
background-color: rgb(0 0 0 / 50%);
transition: all 0.3s;
.actions {
@ -210,6 +209,9 @@ function onSuccess(res) {
&:hover:not(.disabled) {
transform: scale(1.5);
}
.el-icon {
font-size: 24px;
}
}
}
}

View File

@ -10,7 +10,7 @@
<div v-if="title" class="title-container">{{ title }}</div>
<slot />
<div v-if="collaspeData" class="collaspe" title="展开" @click="unCollaspe">
<i class="el-icon-arrow-down" />
<el-icon><el-icon-arrow-down /></el-icon>
</div>
</div>
</template>

View File

@ -1,13 +1,13 @@
<template>
<div class="result">
<div v-if="type === 'success'" class="icon icon-success">
<i class="el-icon-success" />
<el-icon><el-icon-success-filled /></el-icon>
</div>
<div v-else-if="type === 'warning'" class="icon icon-warning">
<i class="el-icon-warning" />
<el-icon><el-icon-warning-filled /></el-icon>
</div>
<div v-else class="icon icon-error">
<i class="el-icon-error" />
<el-icon><el-icon-circle-close-filled /></el-icon>
</div>
<h1>{{ title }}</h1>
<div v-if="desc" class="desc">{{ desc }}</div>

View File

@ -3,7 +3,7 @@
<span v-if="prefix" class="prefix">{{ prefix }}</span>
<span class="text">{{ value }}</span>
<span v-if="suffix" class="suffix">{{ suffix }}</span>
<i :class="`${isUp ? 'el-icon-caret-top' : 'el-icon-caret-bottom'}`" />
<svg-icon :name="`${isUp ? 'el-icon-caret-top' : 'el-icon-caret-bottom'}`" />
</div>
</template>