From bd99a5211f3a5fcaa051e5da868d87bb870148f5 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 01 Mar 2024 09:58:45 +0800 Subject: [PATCH] fix:手持设备 --- uni_modules/uview-ui/components/u-icon/u-icon.vue | 234 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 234 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-icon/u-icon.vue b/uni_modules/uview-ui/components/u-icon/u-icon.vue new file mode 100644 index 0000000..9340328 --- /dev/null +++ b/uni_modules/uview-ui/components/u-icon/u-icon.vue @@ -0,0 +1,234 @@ +<template> + <view + class="u-icon" + @tap="clickHandler" + :class="['u-icon--' + labelPos]" + > + <image + class="u-icon__img" + v-if="isImg" + :src="name" + :mode="imgMode" + :style="[imgStyle, $u.addStyle(customStyle)]" + ></image> + <text + v-else + class="u-icon__icon" + :class="uClasses" + :style="[iconStyle, $u.addStyle(customStyle)]" + :hover-class="hoverClass" + >{{icon}}</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(space) : 0, + marginTop: labelPos == 'bottom' ? $u.addUnit(space) : 0, + marginRight: labelPos == 'left' ? $u.addUnit(space) : 0, + marginBottom: labelPos == 'top' ? $u.addUnit(space) : 0, + }" + >{{ label }}</text> + </view> +</template> + +<script> + // #ifdef APP-NVUE + // nvue������weex���dom������������������������������������������������ + // https://weex.apache.org/zh/docs/modules/dom.html#addrule + const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf' + const domModule = weex.requireModule('dom') + domModule.addRule('fontFace', { + 'fontFamily': "uicon-iconfont", + 'src': `url('${fontUrl}')` + }) + // #endif + + // ������������������������������������unicode + import icons from './icons' + + import props from './props.js';; + + /** + * icon ������ + * @description ��������������������������������������������������������������������� + * @tutorial https://www.uviewui.com/components/icon.html + * @property {String} name ��������������������������������� + * @property {String} color ������������,������������������ ��������� color['u-content-color'] ��� + * @property {String | Number} size ���������������������������px ��������� '16px' ��� + * @property {Boolean} bold ������������������ ��������� false ��� + * @property {String | Number} index ������������������������������������������index������������������������������������ + * @property {String} hoverClass ���������������������������������������uni���view���������hoverClass������������������������ + * @property {String} customPrefix ������������������������������������������������������������ ��������� 'uicon' ��� + * @property {String | Number} label ���������������label������ + * @property {String} labelPos label���������������������������������right���bottom ��������� 'right' ��� + * @property {String | Number} labelSize label���������������������px ��������� '15px' ��� + * @property {String} labelColor ���������������label������������ ��� ������ color['u-content-color'] ��� + * @property {String | Number} space label���������������������������px ��������� '3px' ��� + * @property {String} imgMode ���������mode + * @property {String | Number} width ��������������������������������� + * @property {String | Number} height ��������������������������������� + * @property {String | Number} top ��������������������������������� ������������������������������������������������������������ ��������� 0 ��� + * @property {Boolean} stop ������������������������ ��������� false ��� + * @property {Object} customStyle icon������������������������ + * @event {Function} click ��������������������� + * @event {Function} touchstart ��������������������� + * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon> + */ + export default { + name: 'u-icon', + data() { + return { + + } + }, + mixins: [uni.$u.mpMixin, uni.$u.mixin,props], + computed: { + uClasses() { + 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 && uni.$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: uni.$u.addUnit(this.size), + lineHeight: uni.$u.addUnit(this.size), + fontWeight: this.bold ? 'bold' : 'normal', + // ������������������������������������������������������������������������������������ + top: uni.$u.addUnit(this.top) + } + // ��������������������������������������� + if (this.color && !uni.$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 ? uni.$u.addUnit(this.width) : uni.$u.addUnit(this.size) + style.height = this.height ? uni.$u.addUnit(this.height) : uni.$u.addUnit(this.size) + return style + }, + // ��������������������������������������� + icon() { + // ������������������������������������������������������������������name������������������������������������unicode������ + return icons['uicon-' + this.name] || this.name + } + }, + methods: { + clickHandler(e) { + this.$emit('click', this.index) + // ������������������������ + this.stop && this.preventEvent(e) + } + } + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + + // ������������ + $u-icon-primary: $u-primary !default; + $u-icon-success: $u-success !default; + $u-icon-info: $u-info !default; + $u-icon-warning: $u-warning !default; + $u-icon-error: $u-error !default; + $u-icon-label-line-height:1 !default; + + /* #ifndef APP-NVUE */ + // ���nvue��������������� + @font-face { + font-family: 'uicon-iconfont'; + src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype'); + } + + /* #endif */ + + .u-icon { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + 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 { + font-family: uicon-iconfont; + position: relative; + @include flex; + align-items: center; + + &--primary { + color: $u-icon-primary; + } + + &--success { + color: $u-icon-success; + } + + &--error { + color: $u-icon-error; + } + + &--warning { + color: $u-icon-warning; + } + + &--info { + color: $u-icon-info; + } + } + + &__img { + /* #ifndef APP-NVUE */ + height: auto; + will-change: transform; + /* #endif */ + } + + &__label { + /* #ifndef APP-NVUE */ + line-height: $u-icon-label-line-height; + /* #endif */ + } + } +</style> -- Gitblit v1.8.0