Commit 279115b4 authored by TtTao's avatar TtTao

新增:图标ICON进度/半星显示,为评分半星做支持

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