@10yun/cv-mobile-ui 0.5.27 → 0.5.29

package/uview-plus/components/u-icon/props.js

@@ -1,90 +1,91 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
     // 图标类名
     name: {
       type: String,
-      default: defprops.icon.name
+      default: () => defProps.icon.name
     },
     // 图标颜色，可接受主题色
     color: {
       type: String,
-      default: defprops.icon.color
+      default: () => defProps.icon.color
     },
     // 字体大小，单位px
     size: {
       type: [String, Number],
-      default: defprops.icon.size
+      default: () => defProps.icon.size
     },
     // 是否显示粗体
     bold: {
       type: Boolean,
-      default: defprops.icon.bold
+      default: () => defProps.icon.bold
     },
     // 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
     index: {
       type: [String, Number],
-      default: defprops.icon.index
+      default: () => defProps.icon.index
     },
     // 触摸图标时的类名
     hoverClass: {
       type: String,
-      default: defprops.icon.hoverClass
+      default: () => defProps.icon.hoverClass
     },
     // 自定义扩展前缀，方便用户扩展自己的图标库
     customPrefix: {
       type: String,
-      default: defprops.icon.customPrefix
+      default: () => defProps.icon.customPrefix
     },
     // 图标右边或者下面的文字
     label: {
       type: [String, Number],
-      default: defprops.icon.label
+      default: () => defProps.icon.label
     },
     // label的位置，只能右边或者下边
     labelPos: {
       type: String,
-      default: defprops.icon.labelPos
+      default: () => defProps.icon.labelPos
     },
     // label的大小
     labelSize: {
       type: [String, Number],
-      default: defprops.icon.labelSize
+      default: () => defProps.icon.labelSize
     },
     // label的颜色
     labelColor: {
       type: String,
-      default: defprops.icon.labelColor
+      default: () => defProps.icon.labelColor
     },
     // label与图标的距离
     space: {
       type: [String, Number],
-      default: defprops.icon.space
+      default: () => defProps.icon.space
     },
     // 图片的mode
     imgMode: {
       type: String,
-      default: defprops.icon.imgMode
+      default: () => defProps.icon.imgMode
     },
     // 用于显示图片小图标时，图片的宽度
     width: {
       type: [String, Number],
-      default: defprops.icon.width
+      default: () => defProps.icon.width
     },
     // 用于显示图片小图标时，图片的高度
     height: {
       type: [String, Number],
-      default: defprops.icon.height
+      default: () => defProps.icon.height
     },
     // 用于解决某些情况下，让图标垂直居中的用途
     top: {
       type: [String, Number],
-      default: defprops.icon.top
+      default: () => defProps.icon.top
     },
     // 是否阻止事件传播
     stop: {
       type: Boolean,
-      default: defprops.icon.stop
+      default: () => defProps.icon.stop
     }
   }
-};
+});

package/uview-plus/components/u-icon/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -9,9 +24,9 @@ view, scroll-view, swiper-item {
   align-content: flex-start;
 }
 /* #endif */
-/* #ifndef APP-NVUE */
+/* #ifdef MP-QQ || MP-TOUTIAO || MP-BAIDU || MP-KUAISHOU || MP-XHS */
 @font-face {
-  font-family: 'uicon-iconfont';
+  font-family: "uicon-iconfont";
   src: url("https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf") format("truetype");
 }
 /* #endif */
@@ -71,4 +86,4 @@ view, scroll-view, swiper-item {
   /* #ifndef APP-NVUE */
   line-height: 1;
   /* #endif */
-}
+}

package/uview-plus/components/u-icon/style.scss

@@ -8,13 +8,12 @@ $u-icon-warning: $u-warning !default;
 $u-icon-error: $u-error !default;
 $u-icon-label-line-height: 1 !default;
 
-/* #ifndef APP-NVUE */
-// 非nvue下加载字体
+/* #ifdef MP-QQ || MP-TOUTIAO || MP-BAIDU || MP-KUAISHOU || MP-XHS */
+// 2025/04/09在App/微信/支付宝/鸿蒙元服务已改用uni.loadFontFace加载字体
 @font-face {
   font-family: 'uicon-iconfont';
   src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
 }
-
 /* #endif */
 
 .u-icon {

package/uview-plus/components/u-icon/u-icon.vue

@@ -1,7 +1,7 @@
 <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">
+    <image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle, addStyle(customStyle)]"></image>
+    <text v-else class="u-icon__icon" :class="uClasses" :style="[iconStyle, addStyle(customStyle)]" :hover-class="hoverClass">
       {{ icon }}
     </text>
     <!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
@@ -10,11 +10,11 @@
       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
+        fontSize: addUnit(labelSize),
+        marginLeft: labelPos == 'right' ? addUnit(space) : 0,
+        marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
+        marginRight: labelPos == 'left' ? addUnit(space) : 0,
+        marginBottom: labelPos == 'top' ? addUnit(space) : 0
       }"
     >
       {{ label }}
@@ -22,21 +22,13 @@
   </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';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import config from '../../libs/config/config';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, addStyle } from '../../libs/function/index';
 /**
  * icon 图标
  * @description 基于字体的图标集，包含了大多数常见场景的图标。
@@ -65,6 +57,55 @@ import mixin from '../../libs/mixin/mixin.js';
  */
 export default {
   name: 'u-icon',
+  beforeCreate() {
+    // #ifdef APP-NVUE
+    // nvue通过weex的dom模块引入字体，相关文档地址如下：
+    // https://weex.apache.org/zh/docs/modules/dom.html#addrule
+    const domModule = weex.requireModule('dom');
+    domModule.addRule('fontFace', {
+      fontFamily: 'uicon-iconfont',
+      src: `url('${config.iconUrl}')`
+    });
+    if (config.customIcon.family) {
+      domModule.addRule('fontFace', {
+        fontFamily: config.customIcon.family,
+        src: `url('${config.customIcon.url}')`
+      });
+    }
+    // #endif
+    // #ifdef APP || H5 || MP-WEIXIN || MP-ALIPAY
+    uni.loadFontFace({
+      family: 'uicon-iconfont',
+      source: 'url("' + config.iconUrl + '")',
+      success() {
+        // console.log('内置字体图标加载成功');
+      },
+      fail() {
+        console.error('内置字体图标加载出错');
+      }
+    });
+    if (config.customIcon.family) {
+      uni.loadFontFace({
+        family: config.customIcon.family,
+        source: 'url("' + config.customIcon.url + '")',
+        success() {
+          // console.log('扩展字体图标加载成功');
+        },
+        fail() {
+          console.error('扩展字体图标加载出错');
+        }
+      });
+    }
+    // #endif
+    // #ifdef APP-NVUE
+    if (this.customFontFamily) {
+      domModule.addRule('fontFace', {
+        fontFamily: `${this.customPrefix}-${this.customFontFamily}`,
+        src: `url('${this.customFontUrl}')`
+      });
+    }
+    // #endif
+  },
   data() {
     return {};
   },
@@ -74,14 +115,15 @@ export default {
     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)
-      // }
+      // uview-plus内置图标类名为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);
+      if (this.color && config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color);
       // 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
       // 故需将其拆成一个字符串的形式，通过空格隔开各个类名
       //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
@@ -92,14 +134,17 @@ export default {
     iconStyle() {
       let style = {};
       style = {
-        fontSize: uni.$u.addUnit(this.size),
-        lineHeight: uni.$u.addUnit(this.size),
+        fontSize: addUnit(this.size),
+        lineHeight: addUnit(this.size),
         fontWeight: this.bold ? 'bold' : 'normal',
         // 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
-        top: uni.$u.addUnit(this.top)
+        top: addUnit(this.top)
       };
+      if (this.customPrefix !== 'uicon') {
+        style.fontFamily = this.customPrefix;
+      }
       // 非主题色值时，才当作颜色值
-      if (this.color && !uni.$u.config.type.includes(this.color)) style.color = this.color;
+      if (this.color && !config.type.includes(this.color)) style.color = this.color;
       return style;
     },
     // 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
@@ -109,19 +154,25 @@ export default {
     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);
+      style.width = this.width ? addUnit(this.width) : addUnit(this.size);
+      style.height = this.height ? addUnit(this.height) : addUnit(this.size);
       return style;
     },
     // 通过图标名，查找对应的图标
     icon() {
+      // 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
+      if (this.customPrefix !== 'uicon') {
+        return config.customIcons[this.name] || this.name;
+      }
       // 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
       return icons['uicon-' + this.name] || this.name;
     }
   },
   methods: {
+    addStyle,
+    addUnit,
     clickHandler(e) {
-      this.$emit('click', this.index);
+      this.$emit('click', this.index, e);
       // 是否阻止事件冒泡
       this.stop && this.preventEvent(e);
     }

package/uview-plus/components/u-image/props.js

@@ -1,85 +1,86 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
     // 图片地址
     src: {
       type: String,
-      default: defprops.image.src
+      default: () => defProps.image.src
     },
     // 裁剪模式
     mode: {
       type: String,
-      default: defprops.image.mode
+      default: () => defProps.image.mode
     },
     // 宽度，单位任意
     width: {
       type: [String, Number],
-      default: defprops.image.width
+      default: () => defProps.image.width
     },
     // 高度，单位任意
     height: {
       type: [String, Number],
-      default: defprops.image.height
+      default: () => defProps.image.height
     },
     // 图片形状，circle-圆形，square-方形
     shape: {
       type: String,
-      default: defprops.image.shape
+      default: () => defProps.image.shape
     },
     // 圆角，单位任意
     radius: {
       type: [String, Number],
-      default: defprops.image.radius
+      default: () => defProps.image.radius
     },
     // 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
     lazyLoad: {
       type: Boolean,
-      default: defprops.image.lazyLoad
+      default: () => defProps.image.lazyLoad
     },
     // 开启长按图片显示识别微信小程序码菜单
     showMenuByLongpress: {
       type: Boolean,
-      default: defprops.image.showMenuByLongpress
+      default: () => defProps.image.showMenuByLongpress
     },
     // 加载中的图标，或者小图片
     loadingIcon: {
       type: String,
-      default: defprops.image.loadingIcon
+      default: () => defProps.image.loadingIcon
     },
     // 加载失败的图标，或者小图片
     errorIcon: {
       type: String,
-      default: defprops.image.errorIcon
+      default: () => defProps.image.errorIcon
     },
     // 是否显示加载中的图标或者自定义的slot
     showLoading: {
       type: Boolean,
-      default: defprops.image.showLoading
+      default: () => defProps.image.showLoading
     },
     // 是否显示加载错误的图标或者自定义的slot
     showError: {
       type: Boolean,
-      default: defprops.image.showError
+      default: () => defProps.image.showError
     },
     // 是否需要淡入效果
     fade: {
       type: Boolean,
-      default: defprops.image.fade
+      default: () => defProps.image.fade
     },
     // 只支持网络资源，只对微信小程序有效
     webp: {
       type: Boolean,
-      default: defprops.image.webp
+      default: () => defProps.image.webp
     },
     // 过渡时间，单位ms
     duration: {
       type: [String, Number],
-      default: defprops.image.duration
+      default: () => defProps.image.duration
     },
     // 背景颜色，用于深色页面加载图片时，为了和背景色融合
     bgColor: {
       type: String,
-      default: defprops.image.bgColor
+      default: () => defProps.image.bgColor
     }
   }
-};
+});

package/uview-plus/components/u-image/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -32,4 +47,4 @@ view, scroll-view, swiper-item {
   background-color: var(--u-bg-color);
   color: var(--u-tips-color);
   font-size: 46rpx;
-}
+}

package/uview-plus/components/u-image/u-image.vue

@@ -1,6 +1,6 @@
 <template>
-  <u-transition mode="fade" :show="show" :duration="fade ? 1000 : 0">
-    <view class="u-image" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
+  <u-transition mode="fade" :show="show" :style="transStyle" :duration="fade ? 1000 : 0">
+    <view class="u-image box-border" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
       <image
         v-if="!isError"
         :src="src"
@@ -11,49 +11,48 @@
         :lazy-load="lazyLoad"
         class="u-image__image"
         :style="{
-          borderRadius: shape == 'circle' ? '10000px' : $u.addUnit(radius),
-          width: $u.addUnit(width),
-          height: $u.addUnit(height)
+          width: addUnit(width),
+          height: addUnit(height),
+          borderRadius: shape == 'circle' ? '10000px' : addUnit(radius)
         }"
       ></image>
       <view
         v-if="showLoading && loading"
         class="u-image__loading"
         :style="{
-          borderRadius: shape == 'circle' ? '50%' : $u.addUnit(radius),
+          borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
           backgroundColor: this.bgColor,
-          width: $u.addUnit(width),
-          height: $u.addUnit(height)
+          width: addUnit(width),
+          height: addUnit(height)
         }"
       >
         <slot name="loading">
-          <u-icon :name="loadingIcon" :width="width" :height="height"></u-icon>
+          <u-icon :name="loadingIcon"></u-icon>
         </slot>
       </view>
       <view
         v-if="showError && isError && !loading"
         class="u-image__error"
         :style="{
-          borderRadius: shape == 'circle' ? '50%' : $u.addUnit(radius),
-          width: $u.addUnit(width),
-          height: $u.addUnit(height)
+          borderRadius: shape == 'circle' ? '50%' : addUnit(radius)
         }"
       >
         <slot name="error">
-          <u-icon :name="errorIcon" :width="width" :height="height"></u-icon>
+          <u-icon :name="errorIcon"></u-icon>
         </slot>
       </view>
     </view>
   </u-transition>
 </template>
 <script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
 /**
  * Image 图片
  * @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
- * @tutorial https://uviewui.com/components/image.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/image.html
  * @property {String}			src 				图片地址
  * @property {String}			mode 				裁剪模式，见官网说明 （默认 'aspectFill' ）
  * @property {String | Number}	width 				宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
@@ -110,13 +109,48 @@ export default {
     }
   },
   computed: {
+    transStyle() {
+      let style = {};
+      // 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
+      // #ifdef APP-NVUE
+      style.width = addUnit(this.width);
+      style.height = addUnit(this.height);
+      // #endif
+      // #ifndef APP-NVUE
+      if (this.loading || this.isError || this.width == '100%' || this.mode != 'heightFix') {
+        style.width = addUnit(this.width);
+      } else {
+        style.width = 'fit-content';
+      }
+      if (this.loading || this.isError || this.height == '100%' || this.mode != 'widthFix') {
+        style.height = addUnit(this.height);
+      } else {
+        style.height = 'fit-content';
+      }
+      // #endif
+      return style;
+    },
     wrapStyle() {
       let style = {};
       // 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
-      style.width = this.$u.addUnit(this.width);
-      style.height = this.$u.addUnit(this.height);
+      // #ifdef APP-NVUE
+      style.width = addUnit(this.width);
+      style.height = addUnit(this.height);
+      // #endif
+      // #ifndef APP-NVUE
+      if (this.loading || this.isError || this.width == '100%' || this.mode != 'heightFix') {
+        style.width = addUnit(this.width);
+      } else {
+        style.width = 'fit-content';
+      }
+      if (this.loading || this.isError || this.height == '100%' || this.mode != 'widthFix') {
+        style.height = addUnit(this.height);
+      } else {
+        style.height = 'fit-content';
+      }
+      // #endif
       // 如果是显示圆形，设置一个很多的半径值即可
-      style.borderRadius = this.shape == 'circle' ? '10000px' : uni.$u.addUnit(this.radius);
+      style.borderRadius = this.shape == 'circle' ? '10000px' : addUnit(this.radius);
       // 如果设置圆角，必须要有hidden，否则可能圆角无效
       style.overflow = this.radius > 0 ? 'hidden' : 'visible';
       // if (this.fade) {
@@ -126,7 +160,7 @@ export default {
       // 	style.transitionTimingFunction = 'ease-in-out'
       // 	style.transitionProperty = 'opacity'
       // }
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+      return deepMerge(style, addStyle(this.customStyle));
     }
   },
   mounted() {
@@ -134,9 +168,10 @@ export default {
   },
   emits: ['click', 'error', 'load'],
   methods: {
+    addUnit,
     // 点击图片
-    onClick() {
-      this.$emit('click');
+    onClick(e) {
+      this.$emit('click', e);
     },
     // 图片加载失败
     onErrorHandler(err) {
@@ -171,7 +206,7 @@ export default {
     removeBgColor() {
       // 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
       this.backgroundStyle = {
-        backgroundColor: 'transparent'
+        backgroundColor: this.bgColor || '#ffffff'
       };
     }
   }