uview-ui/components/u-icon/u-icon.vue - dali_platform/mobile - Gitiles

 <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 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,
 			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>
 /**
  * icon 图标
  * @description 基于字体的图标集，包含了大多数常见场景的图标。
  * @tutorial https://www.uviewui.com/components/icon.html
  * @property {String} name 图标名称，见示例图标集
  * @property {String} color 图标颜色（默认inherit）
  * @property {String | Number} size 图标字体大小，单位rpx（默认32）
  * @property {String | Number} label-size label字体大小，单位rpx（默认28）
  * @property {String} label 图标右侧的label文字（默认28）
  * @property {String} label-pos label文字相对于图标的位置，只能right或bottom（默认right）
  * @property {String} label-color label字体颜色（默认#606266）
  * @property {Object} custom-style icon的样式，对象形式
  * @property {String} custom-prefix 自定义字体图标库时，需要写上此值
  * @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
  * @property {String | Number} margin-top label在下方时与图标的距离，单位rpx（默认6）
  * @property {String | Number} margin-bottom label在上方时与图标的距离，单位rpx（默认6）
  * @property {String | Number} margin-right label在左侧时与图标的距离，单位rpx（默认6）
  * @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right）
  * @property {String} index 一个用于区分多个图标的值，点击图标时通过click事件传出
  * @property {String} hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详情见官网
  * @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>
  */
 export default {
 	name: 'u-icon',
 	props: {
 		// 图标类名
 		name: {
 			type: String,
 			default: ''
 		},
 		// 图标颜色，可接受主题色
 		color: {
 			type: String,
 			default: ''
 		},
 		// 字体大小，单位rpx
 		size: {
 			type: [Number, String],
 			default: 'inherit'
 		},
 		// 是否显示粗体
 		bold: {
 			type: Boolean,
 			default: false
 		},
 		// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
 		index: {
 			type: [Number, String],
 			default: ''
 		},
 		// 触摸图标时的类名
 		hoverClass: {
 			type: String,
 			default: ''
 		},
 		// 自定义扩展前缀，方便用户扩展自己的图标库
 		customPrefix: {
 			type: String,
 			default: 'uicon'
 		},
 		// 图标右边或者下面的文字
 		label: {
 			type: [String, Number],
 			default: ''
 		},
 		// label的位置，只能右边或者下边
 		labelPos: {
 			type: String,
 			default: 'right'
 		},
 		// label的大小
 		labelSize: {
 			type: [String, Number],
 			default: '28'
 		},
 		// label的颜色
 		labelColor: {
 			type: String,
 			default: '#606266'
 		},
 		// label与图标的距离(横向排列)
 		marginLeft: {
 			type: [String, Number],
 			default: '6'
 		},
 		// label与图标的距离(竖向排列)
 		marginTop: {
 			type: [String, Number],
 			default: '6'
 		},
 		// label与图标的距离(竖向排列)
 		marginRight: {
 			type: [String, Number],
 			default: '6'
 		},
 		// label与图标的距离(竖向排列)
 		marginBottom: {
 			type: [String, Number],
 			default: '6'
 		},
 		// 图片的mode
 		imgMode: {
 			type: String,
 			default: 'widthFix'
 		},
 		// 自定义样式
 		customStyle: {
 			type: Object,
 			default() {
 				return {}
 			}
 		},
 		// 用于显示图片小图标时，图片的宽度
 		width: {
 			type: [String, Number],
 			default: ''
 		},
 		// 用于显示图片小图标时，图片的高度
 		height: {
 			type: [String, Number],
 			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)
 			// uView的自定义图标类名为u-iconfont
 			if (this.customPrefix == 'uicon') {
 				classes.push('u-iconfont')
 			} else {
 				classes.push(this.customPrefix)
 			}
 			// 主题色，通过类配置
 			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(' ')
 			//#endif
 			return classes
 		},
 		iconStyle() {
 			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.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
 		},
 		imgStyle() {
 			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
 		},
 		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)
 		},
 		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 {
 		position: relative;

 		&--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;
 		}
 	}

 	&__decimal {
 		position: absolute;
 		top: 0;
 		left: 0;
 		display: inline-block;
 		overflow: hidden;
 	}

 	&__img {
 		height: auto;
 		will-change: transform;
 	}

 	&__label {
 		line-height: 1;
 	}
 }
 </style>
	<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 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,
	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>
	/**
	* icon 图标
	* @description 基于字体的图标集，包含了大多数常见场景的图标。
	* @tutorial https://www.uviewui.com/components/icon.html
	* @property {String} name 图标名称，见示例图标集
	* @property {String} color 图标颜色（默认inherit）
	* @property {String \| Number} size 图标字体大小，单位rpx（默认32）
	* @property {String \| Number} label-size label字体大小，单位rpx（默认28）
	* @property {String} label 图标右侧的label文字（默认28）
	* @property {String} label-pos label文字相对于图标的位置，只能right或bottom（默认right）
	* @property {String} label-color label字体颜色（默认#606266）
	* @property {Object} custom-style icon的样式，对象形式
	* @property {String} custom-prefix 自定义字体图标库时，需要写上此值
	* @property {String \| Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
	* @property {String \| Number} margin-top label在下方时与图标的距离，单位rpx（默认6）
	* @property {String \| Number} margin-bottom label在上方时与图标的距离，单位rpx（默认6）
	* @property {String \| Number} margin-right label在左侧时与图标的距离，单位rpx（默认6）
	* @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right）
	* @property {String} index 一个用于区分多个图标的值，点击图标时通过click事件传出
	* @property {String} hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详情见官网
	* @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>
	*/
	export default {
	name: 'u-icon',
	props: {
	// 图标类名
	name: {
	type: String,
	default: ''
	},
	// 图标颜色，可接受主题色
	color: {
	type: String,
	default: ''
	},
	// 字体大小，单位rpx
	size: {
	type: [Number, String],
	default: 'inherit'
	},
	// 是否显示粗体
	bold: {
	type: Boolean,
	default: false
	},
	// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
	index: {
	type: [Number, String],
	default: ''
	},
	// 触摸图标时的类名
	hoverClass: {
	type: String,
	default: ''
	},
	// 自定义扩展前缀，方便用户扩展自己的图标库
	customPrefix: {
	type: String,
	default: 'uicon'
	},
	// 图标右边或者下面的文字
	label: {
	type: [String, Number],
	default: ''
	},
	// label的位置，只能右边或者下边
	labelPos: {
	type: String,
	default: 'right'
	},
	// label的大小
	labelSize: {
	type: [String, Number],
	default: '28'
	},
	// label的颜色
	labelColor: {
	type: String,
	default: '#606266'
	},
	// label与图标的距离(横向排列)
	marginLeft: {
	type: [String, Number],
	default: '6'
	},
	// label与图标的距离(竖向排列)
	marginTop: {
	type: [String, Number],
	default: '6'
	},
	// label与图标的距离(竖向排列)
	marginRight: {
	type: [String, Number],
	default: '6'
	},
	// label与图标的距离(竖向排列)
	marginBottom: {
	type: [String, Number],
	default: '6'
	},
	// 图片的mode
	imgMode: {
	type: String,
	default: 'widthFix'
	},
	// 自定义样式
	customStyle: {
	type: Object,
	default() {
	return {}
	}
	},
	// 用于显示图片小图标时，图片的宽度
	width: {
	type: [String, Number],
	default: ''
	},
	// 用于显示图片小图标时，图片的高度
	height: {
	type: [String, Number],
	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)
	// uView的自定义图标类名为u-iconfont
	if (this.customPrefix == 'uicon') {
	classes.push('u-iconfont')
	} else {
	classes.push(this.customPrefix)
	}
	// 主题色，通过类配置
	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(' ')
	//#endif
	return classes
	},
	iconStyle() {
	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.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
	},
	imgStyle() {
	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
	},
	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)
	},
	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 {
	position: relative;

	&--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;
	}
	}

	&__decimal {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	overflow: hidden;
	}

	&__img {
	height: auto;
	will-change: transform;
	}

	&__label {
	line-height: 1;
	}
	}
	</style>