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

---
 uni_modules/wu-icon/components/wu-icon/wu-icon.vue |  225 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 225 insertions(+), 0 deletions(-)

diff --git a/uni_modules/wu-icon/components/wu-icon/wu-icon.vue b/uni_modules/wu-icon/components/wu-icon/wu-icon.vue
new file mode 100644
index 0000000..dea833f
--- /dev/null
+++ b/uni_modules/wu-icon/components/wu-icon/wu-icon.vue
@@ -0,0 +1,225 @@
+<template>
+	<view class="wu-icon" @tap="clickHandler" :class="['wu-icon--' + labelPos]">
+		<!-- 杩欓噷杩涜绌哄瓧绗︿覆鍒ゆ柇锛屽鏋滀粎浠呮槸v-if="label"锛屽彲鑳戒細鍑虹幇浼犻��0鐨勬椂鍊欙紝缁撴灉涔熸棤娉曟樉绀� -->
+		<text v-if="label !== '' && (labelPos == 'left' || labelPos == 'top')" class="wu-icon__label" :style="labelStyle">{{ label }}</text>
+		<image class="wu-icon__img" v-if="isImg" :src="name" :mode="imgMode"
+			:style="[imgStyle, $w.addStyle(customStyle)]"></image>
+		<text v-else class="wu-icon__icon" :class="uClasses" :style="[iconStyle, $w.addStyle(customStyle)]"
+			:hover-class="hoverClass">{{icon}}</text>
+		<!-- 杩欓噷杩涜绌哄瓧绗︿覆鍒ゆ柇锛屽鏋滀粎浠呮槸v-if="label"锛屽彲鑳戒細鍑虹幇浼犻��0鐨勬椂鍊欙紝缁撴灉涔熸棤娉曟樉绀� -->
+		<text v-if="label !== '' && (labelPos == 'right' || labelPos == 'bottom')" class="wu-icon__label" :style="labelStyle">{{ label }}</text>
+	</view>
+</template>
+
+<script>
+	import mpMixin from '@/uni_modules/wu-ui-tools/libs/mixin/mpMixin.js'
+	import mixin from '@/uni_modules/wu-ui-tools/libs/mixin/mixin.js'
+	// #ifdef APP-NVUE
+	// nvue閫氳繃weex鐨刣om妯″潡寮曞叆瀛椾綋锛岀浉鍏虫枃妗e湴鍧�濡備笅锛�
+	// https://weex.apache.org/zh/docs/modules/dom.html#addrule
+	import iconUrl from './wuicons.ttf';
+	const domModule = weex.requireModule('dom');
+	domModule.addRule('fontFace', {
+		'fontFamily': "wuicon-iconfont",
+		'src': "url('" + iconUrl + "')"
+	})
+	// #endif
+	// 寮曞叆鍥炬爣鍚嶇О锛屽凡缁忓搴旂殑unicode
+	import icons from './icons';
+	import props from './props.js';
+	/**
+	 * icon 鍥炬爣
+	 * @description 鍩轰簬瀛椾綋鐨勫浘鏍囬泦锛屽寘鍚簡澶у鏁板父瑙佸満鏅殑鍥炬爣銆�
+	 * @tutorial https://wuui.cn/zh-CN/components/icon.html
+	 * @property {String}			name			鍥炬爣鍚嶇О锛岃嫢甯︽湁 `/` 鎴栭伒寰� `base64` 鍥剧墖鏍煎紡锛屼細琚涓烘槸鍥剧墖鍥炬爣锛屽垯鏂囧瓧鍥炬爣鐩稿叧灞炴�т細澶辨晥銆�
+	 * @property {String}			color			鍥炬爣棰滆壊,鍙帴鍙椾富棰樿壊 锛堥粯璁� color: #606266 锛�
+	 * @property {String | Number}	size			鍥炬爣瀛椾綋澶у皬锛屽崟浣峱x/rpx 锛堥粯璁� '16px' 锛�
+	 * @property {Boolean}			bold			鏄惁鏄剧ず绮椾綋 锛堥粯璁� false 锛�
+	 * @property {String | Number}	index			鐐瑰嚮鍥炬爣鐨勬椂鍊欎紶閫掍簨浠跺嚭鍘荤殑index锛堢敤浜庡尯鍒嗙偣鍑讳簡鍝竴涓級
+	 * @property {String}			hoverClass		鍥炬爣鎸変笅鍘荤殑鏍峰紡绫伙紝鐢ㄦ硶鍚寀ni鐨剉iew缁勪欢鐨刪overClass鍙傛暟锛岃鎯呰瀹樼綉
+	 * @property {String}			customPrefix	鑷畾涔夋墿灞曞墠缂�锛屾柟渚跨敤鎴锋墿灞曡嚜宸辩殑鍥炬爣搴� 锛堥粯璁� 'wuicon' 锛�
+	 * @property {String | Number}	label			鍥炬爣鍙充晶鐨刲abel鏂囧瓧
+	 * @property {String}			labelPos		label鐩稿浜庡浘鏍囩殑浣嶇疆锛堥粯璁� 'right' 锛�
+	 * @value top 涓婃柟
+	 * @value bottom 涓嬫柟
+	 * @value left 宸︿晶
+	 * @value right 鍙充晶
+	 * @property {String | Number}	labelSize		label瀛椾綋澶у皬锛屽崟浣峱x 锛堥粯璁� '15px' 锛�
+	 * @property {String}			labelColor		鍥炬爣鍙充晶鐨刲abel鏂囧瓧棰滆壊 锛� 榛樿 color['wu-content-color'] 锛�
+	 * @property {String | Number}	space			label涓庡浘鏍囩殑璺濈锛屽崟浣峱x 锛堥粯璁� '3px' 锛�
+	 * @property {String}			imgMode			image缁勪欢鐨刴ode锛岃瑙侊細[image](https://uniapp.dcloud.net.cn/component/image.html#image)
+	 * @property {String | Number}	width			鏄剧ず鍥剧墖灏忓浘鏍囨椂鐨勫搴�
+	 * @property {String | Number}	height			鏄剧ず鍥剧墖灏忓浘鏍囨椂鐨勯珮搴�
+	 * @property {String | Number}	top				鍥炬爣鍦ㄥ瀭鐩存柟鍚戜笂鐨勫畾浣� 鐢ㄤ簬瑙e喅鏌愪簺鎯呭喌涓嬶紝璁╁浘鏍囧瀭鐩村眳涓殑鐢ㄩ��  锛堥粯璁� 0 锛�
+	 * @property {Boolean}			stop			鏄惁闃绘浜嬩欢浼犳挱 锛堥粯璁� false 锛�
+	 * @property {Object}			customStyle		icon鐨勬牱寮忥紝瀵硅薄褰㈠紡
+	 * @event {Function} click 鐐瑰嚮鍥炬爣鏃惰Е鍙�
+	 * @event {Function} touchstart 浜嬩欢瑙︽懜鏃惰Е鍙�
+	 * @example <wu-icon name="photo" color="#2979ff" size="28"></wu-icon>
+	 */
+	export default {
+		name: 'wu-icon',
+		emits: ['click'],
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				colorType: [
+					'primary',
+					'success',
+					'info',
+					'error',
+					'warning'
+				]
+			}
+		},
+		computed: {
+			uClasses() {
+				let classes = []
+				classes.push(this.customPrefix)
+				classes.push(this.customPrefix + '-' + this.name)
+				// 涓婚鑹诧紝閫氳繃绫婚厤缃�
+				if (this.color && this.colorType.includes(this.color)) classes.push('wu-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.$w.addUnit(this.size),
+					lineHeight: this.$w.addUnit(this.size),
+					fontWeight: this.bold ? 'bold' : 'normal',
+					// 鏌愪簺鐗规畩鎯呭喌闇�瑕佽缃竴涓埌椤堕儴鐨勮窛绂伙紝鎵嶈兘鏇村ソ鐨勫瀭鐩村眳涓�
+					top: this.$w.addUnit(this.top)
+				}
+				// 闈炰富棰樿壊鍊兼椂锛屾墠褰撲綔棰滆壊鍊�
+				if (this.color && !this.colorType.includes(this.color)) style.color = this.color
+				return style
+			},
+			// 鍒ゆ柇浼犲叆鐨刵ame灞炴�э紝鏄惁鍥剧墖璺緞锛屽彧瑕佸甫鏈�"/"鍧囪涓烘槸鍥剧墖褰㈠紡
+			isImg() {
+				const isBase64 = this.name.indexOf('data:') > -1 && this.name.indexOf('base64') > -1;
+				return this.name.indexOf('/') !== -1 || isBase64;
+			},
+			imgStyle() {
+				let style = {}
+				// 濡傛灉璁剧疆width鍜宧eight灞炴�э紝鍒欎紭鍏堜娇鐢紝鍚﹀垯浣跨敤size灞炴��
+				style.width = this.width ? this.$w.addUnit(this.width) : this.$w.addUnit(this.size)
+				style.height = this.height ? this.$w.addUnit(this.height) : this.$w.addUnit(this.size)
+				return style
+			},
+			// 閫氳繃鍥炬爣鍚嶏紝鏌ユ壘瀵瑰簲鐨勫浘鏍�
+			icon() {
+				// 濡傛灉鍐呯疆鐨勫浘鏍囦腑鎵句笉鍒板搴旂殑鍥炬爣锛屽氨鐩存帴杩斿洖name鍊硷紝鍥犱负鐢ㄦ埛鍙兘浼犲叆鐨勬槸unicode浠g爜
+				const code = icons['wuicon-' + this.name];
+				if (['wuicon'].indexOf(this.customPrefix) > -1) {
+					return code ? unescape(`%u${code}`) : this.name;
+				} else {
+					// #ifndef APP-NVUE
+					return ''
+					// #endif
+					// #ifdef APP-NVUE
+					return unescape(`%u${this.name}`)
+					// #endif
+				}
+			},
+			// label鏍峰紡
+			labelStyle() {
+				let style = {
+					color: this.labelColor,
+					fontSize: this.$w.addUnit(this.labelSize),
+					marginLeft: this.labelPos == 'right' ? this.$w.addUnit(this.space) : 0,
+					marginTop: this.labelPos == 'bottom' ? this.$w.addUnit(this.space) : 0,
+					marginRight: this.labelPos == 'left' ? this.$w.addUnit(this.space) : 0,
+					marginBottom: this.labelPos == 'top' ? this.$w.addUnit(this.space) : 0
+				};
+				return style
+			}
+		},
+		methods: {
+			clickHandler(e) {
+				this.$emit('click', this.index)
+				// 鏄惁闃绘浜嬩欢鍐掓场
+				this.stop && this.preventEvent(e)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '@/uni_modules/wu-ui-tools/libs/css/components.scss';
+	@import '@/uni_modules/wu-ui-tools/libs/css/color.scss';
+	// 鍙橀噺瀹氫箟
+	$wu-icon-primary: $wu-primary !default;
+	$wu-icon-success: $wu-success !default;
+	$wu-icon-info: $wu-info !default;
+	$wu-icon-warning: $wu-warning !default;
+	$wu-icon-error: $wu-error !default;
+	$wu-icon-label-line-height: 1 !default;
+
+	/* #ifndef APP-NVUE */
+	// 闈瀗vue涓嬪姞杞藉瓧浣�
+	@font-face {
+		font-family: 'wuicon-iconfont';
+		src: url('./wuicons.ttf') format('truetype');
+	}
+
+	/* #endif */
+	.wu-icon {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		align-items: center;
+
+		&--left, &--right {
+			flex-direction: row;
+		}
+		
+		&--top, &--bottom {
+			flex-direction: column;
+		}
+
+		&__icon {
+			font-family: wuicon-iconfont;
+			position: relative;
+			@include flex;
+			align-items: center;
+
+			&--primary {
+				color: $wu-icon-primary;
+			}
+
+			&--success {
+				color: $wu-icon-success;
+			}
+
+			&--error {
+				color: $wu-icon-error;
+			}
+
+			&--warning {
+				color: $wu-icon-warning;
+			}
+
+			&--info {
+				color: $wu-icon-info;
+			}
+		}
+
+		&__img {
+			/* #ifndef APP-NVUE */
+			height: auto;
+			will-change: transform;
+			/* #endif */
+		}
+
+		&__label {
+			/* #ifndef APP-NVUE */
+			line-height: $wu-icon-label-line-height;
+			/* #endif */
+		}
+	}
+</style>
\ No newline at end of file

--
Gitblit v1.9.3