|
@@ -1,7 +1,12 @@
|
|
|
<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-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass"
|
|
|
+ @touchstart="touchstart">
|
|
|
+ <text v-if="showDecimalIcon" :style="[decimalIconStyle]" :class="decimalIconClass" :hover-class="hoverClass"
|
|
|
+ class="u-icon__decimal">
|
|
|
+ </text>
|
|
|
+ </text>
|
|
|
<!-- 这里进行空字符串判断,如果仅仅是v-if="label",可能会出现传递0的时候,结果也无法显示 -->
|
|
|
<text v-if="label !== ''" class="u-icon__label" :style="{
|
|
|
color: labelColor,
|
|
@@ -10,7 +15,8 @@
|
|
|
marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
|
|
|
marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
|
|
|
marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0,
|
|
|
- }">{{label}}</text>
|
|
|
+ }">{{ label }}
|
|
|
+ </text>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -38,6 +44,11 @@
|
|
|
* @property {String} width 显示图片小图标时的宽度
|
|
|
* @property {String} height 显示图片小图标时的高度
|
|
|
* @property {String} top 图标在垂直方向上的定位
|
|
|
+ * @property {String} top 图标在垂直方向上的定位
|
|
|
+ * @property {String} top 图标在垂直方向上的定位
|
|
|
+ * @property {Boolean} show-decimal-icon 是否为DecimalIcon
|
|
|
+ * @property {String} inactive-color 背景颜色,可接受主题色,仅Decimal时有效
|
|
|
+ * @property {String | Number} percent 显示的百分比,仅Decimal时有效
|
|
|
* @event {Function} click 点击图标时触发
|
|
|
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
|
|
|
*/
|
|
@@ -145,71 +156,120 @@ export default {
|
|
|
top: {
|
|
|
type: [String, Number],
|
|
|
default: 0
|
|
|
+ },
|
|
|
+ // 是否为DecimalIcon
|
|
|
+ showDecimalIcon: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ // 背景颜色,可接受主题色,仅Decimal时有效
|
|
|
+ inactiveColor: {
|
|
|
+ type: String,
|
|
|
+ default: '#ececec'
|
|
|
+ },
|
|
|
+ // 显示的百分比,仅Decimal时有效
|
|
|
+ percent: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: '50'
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
customClass() {
|
|
|
- let classes = [];
|
|
|
- classes.push(this.customPrefix + '-' + this.name);
|
|
|
+ let classes = []
|
|
|
+ classes.push(this.customPrefix + '-' + this.name)
|
|
|
// uView的自定义图标类名为u-iconfont
|
|
|
- if (this.customPrefix == 'uicon') classes.push('u-iconfont');
|
|
|
- else classes.push(this.customPrefix);
|
|
|
+ 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);
|
|
|
+ if (this.showDecimalIcon && this.inactiveColor && this.$u.config.type.includes(this.inactiveColor)) {
|
|
|
+ classes.push('u-icon__icon--' + this.inactiveColor)
|
|
|
+ } else if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
|
|
|
// 阿里,头条,百度小程序通过数组绑定类名时,无法直接使用[a, b, c]的形式,否则无法识别
|
|
|
// 故需将其拆成一个字符串的形式,通过空格隔开各个类名
|
|
|
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
|
|
- classes = classes.join(' ');
|
|
|
+ classes = classes.join(' ')
|
|
|
//#endif
|
|
|
- return classes;
|
|
|
+ return classes
|
|
|
},
|
|
|
iconStyle() {
|
|
|
- let style = {};
|
|
|
+ let style = {}
|
|
|
style = {
|
|
|
fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
|
|
|
fontWeight: this.bold ? 'bold' : 'normal',
|
|
|
// 某些特殊情况需要设置一个到顶部的距离,才能更好的垂直居中
|
|
|
top: this.$u.addUnit(this.top)
|
|
|
- };
|
|
|
+ }
|
|
|
// 非主题色值时,才当作颜色值
|
|
|
- if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color;
|
|
|
- return style;
|
|
|
+ if (this.showDecimalIcon && this.inactiveColor && !this.$u.config.type.includes(this.inactiveColor)) {
|
|
|
+ style.color = this.inactiveColor
|
|
|
+ } else if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color
|
|
|
+
|
|
|
+ return style
|
|
|
},
|
|
|
// 判断传入的name属性,是否图片路径,只要带有"/"均认为是图片形式
|
|
|
isImg() {
|
|
|
- return this.name.indexOf('/') !== -1;
|
|
|
+ return this.name.indexOf('/') !== -1
|
|
|
},
|
|
|
imgStyle() {
|
|
|
- let style = {};
|
|
|
+ let style = {}
|
|
|
// 如果设置width和height属性,则优先使用,否则使用size属性
|
|
|
- style.width = this.width ? this.$u.addUnit(this.width) : this.$u.addUnit(this.size);
|
|
|
- style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size);
|
|
|
- return style;
|
|
|
+ style.width = this.width ? this.$u.addUnit(this.width) : this.$u.addUnit(this.size)
|
|
|
+ style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size)
|
|
|
+ return style
|
|
|
+ },
|
|
|
+ decimalIconStyle() {
|
|
|
+ let style = {}
|
|
|
+ style = {
|
|
|
+ fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
|
|
|
+ fontWeight: this.bold ? 'bold' : 'normal',
|
|
|
+ // 某些特殊情况需要设置一个到顶部的距离,才能更好的垂直居中
|
|
|
+ top: this.$u.addUnit(this.top),
|
|
|
+ width: this.percent + '%'
|
|
|
+ }
|
|
|
+ // 非主题色值时,才当作颜色值
|
|
|
+ if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color
|
|
|
+ return style
|
|
|
+ },
|
|
|
+ decimalIconClass() {
|
|
|
+ let classes = []
|
|
|
+ classes.push(this.customPrefix + '-' + this.name)
|
|
|
+ // uView的自定义图标类名为u-iconfont
|
|
|
+ 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)
|
|
|
+ else classes.push('u-icon__icon--primary')
|
|
|
+ // 阿里,头条,百度小程序通过数组绑定类名时,无法直接使用[a, b, c]的形式,否则无法识别
|
|
|
+ // 故需将其拆成一个字符串的形式,通过空格隔开各个类名
|
|
|
+ //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
|
|
+ classes = classes.join(' ')
|
|
|
+ //#endif
|
|
|
+ return classes
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
click() {
|
|
|
- this.$emit('click', this.index);
|
|
|
+ this.$emit('click', this.index)
|
|
|
},
|
|
|
touchstart() {
|
|
|
- this.$emit('touchstart', this.index);
|
|
|
+ this.$emit('touchstart', this.index)
|
|
|
}
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@import "../../libs/css/style.components.scss";
|
|
|
-/* #ifndef APP-NVUE */
|
|
|
-// 目前由于nvue对定义字体时的content属性报错,所以nvue先不引入
|
|
|
@import '../../iconfont.css';
|
|
|
-/* #endif */
|
|
|
|
|
|
.u-icon {
|
|
|
- /* #ifndef APP-NVUE */
|
|
|
display: inline-flex;
|
|
|
- /* #endif */
|
|
|
- flex-direction: row;
|
|
|
align-items: center;
|
|
|
|
|
|
&--left {
|
|
@@ -234,7 +294,7 @@ export default {
|
|
|
|
|
|
&__icon {
|
|
|
position: relative;
|
|
|
-
|
|
|
+
|
|
|
&--primary {
|
|
|
color: $u-type-primary;
|
|
|
}
|
|
@@ -256,11 +316,17 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ &__decimal {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
&__img {
|
|
|
- /* #ifndef APP-PLUS */
|
|
|
height: auto;
|
|
|
will-change: transform;
|
|
|
- /* #endif */
|
|
|
}
|
|
|
|
|
|
&__label {
|