加入图标

This commit is contained in:
2021-02-10 01:26:13 +08:00
parent 90b5df824f
commit 09fedd9934
19 changed files with 103 additions and 0 deletions

67
src/components/Icon.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<i class="fn-icon bg-center-contain" :style="iconStyle"></i>
</template>
<script>
export default {
name: 'Icon',
props: {
// 来源inner、outer
from: {
type: String,
default: 'inner'
},
// 路径
// 若为 inner自动添加 @/assets/icon/
path: {
type: String,
default: 'unknown.svg'
},
// 尺寸
size: {
type: String,
default: '1em'
},
// 显示图标
showIcon: {
type: Boolean,
default: true
}
},
computed: {
// 图标样式
iconStyle() {
var style = {
width: this.size,
height: this.size
};
var iconPath = '';
// 不显示图标内容
if (!this.showIcon) {
return style;
}
if (this.from == 'inner') {
// 内部
iconPath = require(`@/assets/icon/${this.path}`);
} else if (this.from == 'outer') {
// 外部
iconPath = this.path;
}
style.backgroundImage = `url('${iconPath}')`;
return style;
}
}
}
</script>
<style lang="less" scoped>
.fn-icon {
display: inline-block;
vertical-align: middle;
font-style: normal;
}
</style>