From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目

---
 uview-ui/components/u-icon/u-icon.vue |  336 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 336 insertions(+), 0 deletions(-)

diff --git a/uview-ui/components/u-icon/u-icon.vue b/uview-ui/components/u-icon/u-icon.vue
new file mode 100644
index 0000000..e09a831
--- /dev/null
+++ b/uview-ui/components/u-icon/u-icon.vue
@@ -0,0 +1,336 @@
+<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 鍥炬爣棰滆壊锛堥粯璁nherit锛�
+ * @property {String | Number} size 鍥炬爣瀛椾綋澶у皬锛屽崟浣峳px锛堥粯璁�32锛�
+ * @property {String | Number} label-size label瀛椾綋澶у皬锛屽崟浣峳px锛堥粯璁�28锛�
+ * @property {String} label 鍥炬爣鍙充晶鐨刲abel鏂囧瓧锛堥粯璁�28锛�
+ * @property {String} label-pos label鏂囧瓧鐩稿浜庡浘鏍囩殑浣嶇疆锛屽彧鑳絩ight鎴朾ottom锛堥粯璁ight锛�
+ * @property {String} label-color label瀛椾綋棰滆壊锛堥粯璁�#606266锛�
+ * @property {Object} custom-style icon鐨勬牱寮忥紝瀵硅薄褰㈠紡
+ * @property {String} custom-prefix 鑷畾涔夊瓧浣撳浘鏍囧簱鏃讹紝闇�瑕佸啓涓婃鍊�
+ * @property {String | Number} margin-left label鍦ㄥ彸渚ф椂涓庡浘鏍囩殑璺濈锛屽崟浣峳px锛堥粯璁�6锛�
+ * @property {String | Number} margin-top label鍦ㄤ笅鏂规椂涓庡浘鏍囩殑璺濈锛屽崟浣峳px锛堥粯璁�6锛�
+ * @property {String | Number} margin-bottom label鍦ㄤ笂鏂规椂涓庡浘鏍囩殑璺濈锛屽崟浣峳px锛堥粯璁�6锛�
+ * @property {String | Number} margin-right label鍦ㄥ乏渚ф椂涓庡浘鏍囩殑璺濈锛屽崟浣峳px锛堥粯璁�6锛�
+ * @property {String} label-pos label鐩稿浜庡浘鏍囩殑浣嶇疆锛屽彧鑳絩ight鎴朾ottom锛堥粯璁ight锛�
+ * @property {String} index 涓�涓敤浜庡尯鍒嗗涓浘鏍囩殑鍊硷紝鐐瑰嚮鍥炬爣鏃堕�氳繃click浜嬩欢浼犲嚭
+ * @property {String} hover-class 鍥炬爣鎸変笅鍘荤殑鏍峰紡绫伙紝鐢ㄦ硶鍚寀ni鐨剉iew缁勪欢鐨刪over-class鍙傛暟锛岃鎯呰瀹樼綉
+ * @property {String} width 鏄剧ず鍥剧墖灏忓浘鏍囨椂鐨勫搴�
+ * @property {String} height 鏄剧ず鍥剧墖灏忓浘鏍囨椂鐨勯珮搴�
+ * @property {String} top 鍥炬爣鍦ㄥ瀭鐩存柟鍚戜笂鐨勫畾浣�
+ * @property {String} top 鍥炬爣鍦ㄥ瀭鐩存柟鍚戜笂鐨勫畾浣�
+ * @property {String} top 鍥炬爣鍦ㄥ瀭鐩存柟鍚戜笂鐨勫畾浣�
+ * @property {Boolean} show-decimal-icon 鏄惁涓篋ecimalIcon
+ * @property {String} inactive-color 鑳屾櫙棰滆壊锛屽彲鎺ュ彈涓婚鑹诧紝浠匘ecimal鏃舵湁鏁�
+ * @property {String | Number} percent 鏄剧ず鐨勭櫨鍒嗘瘮锛屼粎Decimal鏃舵湁鏁�
+ * @event {Function} click 鐐瑰嚮鍥炬爣鏃惰Е鍙�
+ * @example <u-icon name="photo" color="#497bff" size="28"></u-icon>
+ */
+export default {
+	name: 'u-icon',
+	props: {
+		// 鍥炬爣绫诲悕
+		name: {
+			type: String,
+			default: ''
+		},
+		// 鍥炬爣棰滆壊锛屽彲鎺ュ彈涓婚鑹�
+		color: {
+			type: String,
+			default: ''
+		},
+		// 瀛椾綋澶у皬锛屽崟浣峳px
+		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'
+		},
+		// 鍥剧墖鐨刴ode
+		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
+		},
+		// 鏄惁涓篋ecimalIcon
+		showDecimalIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 鑳屾櫙棰滆壊锛屽彲鎺ュ彈涓婚鑹诧紝浠匘ecimal鏃舵湁鏁�
+		inactiveColor: {
+			type: String,
+			default: '#ececec'
+		},
+		// 鏄剧ず鐨勭櫨鍒嗘瘮锛屼粎Decimal鏃舵湁鏁�
+		percent: {
+			type: [Number, String],
+			default: '50'
+		}
+	},
+	computed: {
+		customClass() {
+			let classes = []
+			classes.push(this.customPrefix + '-' + this.name)
+			// uView鐨勮嚜瀹氫箟鍥炬爣绫诲悕涓簎-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
+		},
+		// 鍒ゆ柇浼犲叆鐨刵ame灞炴�э紝鏄惁鍥剧墖璺緞锛屽彧瑕佸甫鏈�"/"鍧囪涓烘槸鍥剧墖褰㈠紡
+		isImg() {
+			return this.name.indexOf('/') !== -1
+		},
+		imgStyle() {
+			let style = {}
+			// 濡傛灉璁剧疆width鍜宧eight灞炴�э紝鍒欎紭鍏堜娇鐢紝鍚﹀垯浣跨敤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鐨勮嚜瀹氫箟鍥炬爣绫诲悕涓簎-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>

--
Gitblit v1.9.3