<template>
<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass" @touchstart="touchstart"></text>
<text v-if="label" class="u-icon__label" :style="{
color: labelColor,
fontSize: $u.addUnit(labelSize),
marginLeft: labelPos == 'right' ? $u.addUnit(marginLeft) : 0,
marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0,
}">{{label}}</text>
</view>
</template>
<script>
export default {
name: 'u-icon',
props: {
name: {
type: String,
default: ''
},
color: {
type: String,
default: ''
},
size: {
type: [Number, String],
default: '16'
},
bold: {
type: Boolean,
default: false
},
index: {
type: [Number, String],
default: ''
},
hoverClass: {
type: String,
default: ''
},
customPrefix: {
type: String,
default: 'uicon'
},
label: {
type: String,
default: ''
},
labelPos: {
type: String,
default: 'right'
},
labelSize: {
type: [String, Number],
default: '14'
},
labelColor: {
type: String,
default: '#606266'
},
marginLeft: {
type: [String, Number],
default: '6'
},
marginTop: {
type: [String, Number],
default: '6'
},
marginRight: {
type: [String, Number],
default: '6'
},
marginBottom: {
type: [String, Number],
default: '6'
},
imgMode: {
type: String,
default: 'widthFix'
},
customStyle: {
type: Object,
default() {
return {}
}
},
},
computed: {
customClass() {
let classes = [];
classes.push(this.customPrefix + '-' + this.name);
if (this.customPrefix == 'uicon') classes.push('u-iconfont');
else classes.push(this.customPrefix);
if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color);
classes = classes.join(' ');
return classes;
},
iconStyle() {
let style = {};
style = {
fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
fontWeight: this.bold ? 'bold' : 'normal'
};
if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color;
return style;
},
isImg() {
return this.name.indexOf('/') !== -1;
},
imgStyle() {
let style = {};
style.width = this.$u.addUnit(this.size);
style.height = this.$u.addUnit(this.size);
return style;
}
},
methods: {
click() {
this.$emit('click', this.index);
},
touchstart() {
this.$emit('touchstart', this.index);
}
}
};
</script>
<style scoped lang="scss">
@import "../../libs/css/style.components.scss";
@import '../../iconfont.css';
.u-icon {
display: inline-flex;
align-items: center;
&--left {
flex-direction: row-reverse;
align-items: center;
}
&--right {
flex-direction: row;
align-items: center;
}
&--top {
flex-direction: column-reverse;
justify-content: center;
}
&--bottom {
flex-direction: column;
justify-content: center;
}
&__icon {
&--primary {
color: $u-type-primary;
}
&--success {
color: $u-type-success;
}
&--error {
color: $u-type-error;
}
&--warning {
color: $u-type-warning;
}
&--info {
color: $u-type-info;
}
}
&__img {
height: auto;
will-change: transform;
}
&__label {
line-height: 1;
}
}
</style>