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