82 lines
1.7 KiB
Vue
82 lines
1.7 KiB
Vue
<template>
|
|
<!-- 网络图标 -->
|
|
<img
|
|
v-if="isNetworkIcon"
|
|
class="category-icon image-icon"
|
|
:src="value"
|
|
alt="栏目图标"
|
|
:style="{ width: sizeWidth }"
|
|
/>
|
|
<!-- class图标 -->
|
|
<i
|
|
v-else-if="isClassIcon"
|
|
class="category-icon"
|
|
:class="value"
|
|
:style="{ 'font-size': size }"
|
|
></i>
|
|
<!-- 不正确的图标 -->
|
|
<span class="category-icon holder" v-else-if="withHolder"><em>x</em></span>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: 'CategoryIcon',
|
|
props: {
|
|
// 图标值
|
|
value: {},
|
|
// 尺寸
|
|
size: {
|
|
default: 'inherit'
|
|
},
|
|
// 如果图标不存在，是否显示占位符
|
|
withHolder: {
|
|
default: true
|
|
}
|
|
},
|
|
computed: {
|
|
// size对应的width值
|
|
sizeWidth () {
|
|
if (this.size === 'inherit') {
|
|
return '16px'
|
|
}
|
|
return this.size
|
|
},
|
|
// 判断是否为class图标
|
|
isClassIcon () {
|
|
if (this.value == null || this.value === '') {
|
|
return false
|
|
}
|
|
return !this.value.startsWith('/') &&
|
|
!this.value.startsWith('http://') && !this.value.startsWith('https://')
|
|
},
|
|
// 判断是否为网络图标
|
|
isNetworkIcon () {
|
|
if (this.value == null || this.value === '') {
|
|
return false
|
|
}
|
|
return this.value.startsWith('/') ||
|
|
this.value.startsWith('http://') || this.value.startsWith('https://')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.holder {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: red !important;
|
|
background: #e0e0e0;
|
|
em {
|
|
position: relative;
|
|
top: -1px;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
</style>
|