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

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'
       };
     }
   }

package/uview-plus/components/u-image-wu/_doc/changelog.md

@@ -0,0 +1,21 @@
+## 1.0.8（2024-05-08）
+更新域名
+## 1.0.7（2024-01-10）
+修复外层style没有正确生效的问题
+## 1.0.6（2024-01-10）
+修复使用百分比时无发正常使用的问题
+## 1.0.5（2023-09-19）
+修复大图片无法显示的问题
+## 1.0.4（2023-09-11）
+自定义组件声明
+## 1.0.3（2023-08-16）
+增加 lazyLoadRootMargin 懒加载根边框属性
+## 1.0.2（2023-08-16）
+增加加载中状态的最小显示事件minLoadginShowTime
+## 1.0.1（2023-08-16）
+增加懒加载延迟时间，怕加载太快你们看不出来效果。
+## 1.0.0（2023-08-16）
+1. 支持图片预加载
+2. 支持懒加载(支持app、weixin、h5)
+3. 加载后的过渡效果
+4. 加载中与加载失败的占位符等

package/uview-plus/components/u-image-wu/_doc/package.json

@@ -0,0 +1,88 @@
+{
+  "id": "u-image",
+  "displayName": "u-image 预加载和高性能懒加载(支持app、weixin、h5)图片，支持超大图片",
+  "version": "1.0.8",
+  "description": "支持图片懒加载，预加载，加载后的过渡效果，加载中与加载失败的占位符等",
+  "keywords": [
+    "u-image",
+    "图片懒加载",
+    "图片预加载",
+    "u-ui"
+  ],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.4.17"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [
+      "u-transition",
+      "u-icon"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y",
+          "钉钉": "n",
+          "快手": "n",
+          "飞书": "n",
+          "京东": "n"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        }
+      }
+    }
+  }
+}

package/uview-plus/components/u-image-wu/_doc/readme.md

@@ -0,0 +1,11 @@
+## u-image 图片
+
+> **组件名：u-image**
+
+支持图片懒加载(支持app、weixin、h5)，预加载，加载后的过渡效果，加载中与加载失败的占位符等。
+
+## [查看文档](https://ijry.github.io/uview-plus/components/image.html)
+
+## [更多组件, 请查看 `u-ui` 组件库](https://ext.dcloud.net.cn/plugin?name=u--ui)
+
+**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://ijry.github.io/uview-plus/components/qqFeedBack.html)**

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

@@ -0,0 +1,94 @@
+export default {
+  props: {
+    // 图片地址
+    src: {
+      type: String,
+      default: ''
+    },
+    // 裁剪模式
+    mode: {
+      type: String,
+      default: 'aspectFill'
+    },
+    // 宽度，单位任意
+    width: {
+      type: [String, Number],
+      default: 300
+    },
+    // 高度，单位任意
+    height: {
+      type: [String, Number],
+      default: 255
+    },
+    // 图片形状，circle-圆形，square-方形
+    shape: {
+      type: String,
+      default: 'square'
+    },
+    // 圆角，单位任意
+    radius: {
+      type: [String, Number],
+      default: 0
+    },
+    // 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
+    lazyLoad: {
+      type: Boolean,
+      default: true
+    },
+    // 懒加载根边距 设置负数则是进入视图指定距离后显示 正数则是离视图多远时显示
+    lazyLoadRootMargin: {
+      type: [String, Number],
+      default: -5
+    },
+    // 加载中状态的最小显示时间
+    minLoadginShowTime: {
+      type: [String, Number],
+      default: 30
+    },
+    // 开启长按图片显示识别微信小程序码菜单
+    showMenuByLongpress: {
+      type: Boolean,
+      default: true
+    },
+    // 加载中的图标，或者小图片
+    loadingIcon: {
+      type: String,
+      default: 'photo'
+    },
+    // 加载失败的图标，或者小图片
+    errorIcon: {
+      type: String,
+      default: 'info-circle'
+    },
+    // 是否显示加载中的图标或者自定义的slot
+    showLoading: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示加载错误的图标或者自定义的slot
+    showError: {
+      type: Boolean,
+      default: true
+    },
+    // 是否需要淡入效果
+    fade: {
+      type: Boolean,
+      default: true
+    },
+    // 只支持网络资源，只对微信小程序有效
+    webp: {
+      type: Boolean,
+      default: false
+    },
+    // 过渡时间，单位ms
+    duration: {
+      type: [String, Number],
+      default: 500
+    },
+    // 背景颜色，用于深色页面加载图片时，为了和背景色融合
+    bgColor: {
+      type: String,
+      default: '#f3f4f6'
+    }
+  }
+};

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

@@ -0,0 +1,243 @@
+<template>
+  <u-transition mode="fade" :custom-style="wrapStyle" :show="show" :duration="fade ? 1000 : 0">
+    <view class="u-image" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
+      <image
+        v-if="!isError && loadingImage"
+        :src="src"
+        :mode="mode"
+        @error="onErrorHandler"
+        @load="onLoadHandler"
+        :show-menu-by-longpress="showMenuByLongpress"
+        class="u-image__image"
+        :style="{
+          borderRadius: shape == 'circle' ? '10000px' : addUnit(radius),
+          width: addUnit(width),
+          height: addUnit(height)
+        }"
+      ></image>
+      <view
+        v-if="showLoading && loading"
+        class="u-image__loading"
+        :style="{
+          borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
+          backgroundColor: this.bgColor,
+          width: addUnit(width),
+          height: addUnit(height)
+        }"
+      >
+        <slot name="loading">
+          <u-icon :name="loadingIcon" :width="width" :height="height"></u-icon>
+        </slot>
+      </view>
+      <view
+        v-if="showError && isError && !loading"
+        class="u-image__error"
+        :style="{
+          borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
+          width: addUnit(width),
+          height: addUnit(height)
+        }"
+      >
+        <slot name="error">
+          <u-icon :name="errorIcon" :width="width" :height="height"></u-icon>
+        </slot>
+      </view>
+    </view>
+  </u-transition>
+</template>
+
+<script>
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import props from './props.js';
+/**
+ * Image 图片
+ * @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
+ * @tutorial https://ijry.github.io/uview-plus/components/image.html
+ * @property {String}			src 				图片地址
+ * @property {String}			mode 				裁剪模式，见官网说明 （默认 'aspectFill' ）
+ * @property {String | Number}	width 				宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
+ * @property {String | Number}	height 				高度，单位任意，如果为数值，则为px单位 （默认 '225' ）
+ * @property {String}			shape 				图片形状，circle-圆形，square-方形 （默认 'square' ）
+ * @property {String | Number}	radius		 		圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
+ * @property {Boolean}			lazyLoad			是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
+ * @property {String | Number}	lazyLoadRootMargin	懒加载根边距 设置负数则是进入视图指定距离后显示 正数则是离视图多远时显示
+ * @property {String | Number}	minLoadginShowTime	加载中状态的最小显示时间
+ * @property {Boolean}			showMenuByLongpress	是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
+ * @property {String}			loadingIcon 		加载中的图标，或者小图片 （默认 'photo' ）
+ * @property {String}			errorIcon 			加载失败的图标，或者小图片 （默认 'error-circle' ）
+ * @property {Boolean}			showLoading 		是否显示加载中的图标或者自定义的slot （默认 true ）
+ * @property {Boolean}			showError 			是否显示加载错误的图标或者自定义的slot （默认 true ）
+ * @property {Boolean}			fade 				是否需要淡入效果 （默认 true ）
+ * @property {Boolean}			webp 				只支持网络资源，只对微信小程序有效 （默认 false ）
+ * @property {String | Number}	duration 			搭配fade参数的过渡时间，单位ms （默认 500 ）
+ * @property {String}			bgColor 			背景颜色，用于深色页面加载图片时，为了和背景色融合  (默认 '#f3f4f6' )
+ * @property {Object}			customStyle  		定义需要用到的外部样式
+ * @event {Function}	click	点击图片时触发
+ * @event {Function}	error	图片加载失败时触发
+ * @event {Function} load 图片加载成功时触发
+ * @example <u-image width="100%" height="300px" :src="src"></u-image>
+ */
+export default {
+  name: 'u-image',
+  emits: ['click', 'error', 'load'],
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      // 图片是否加载错误，如果是，则显示错误占位图
+      isError: false,
+      // 初始化组件时，默认为加载中状态
+      loading: true,
+      // 不透明度，为了实现淡入淡出的效果
+      opacity: 1,
+      // 过渡时间，因为props的值无法修改，故需要一个中间值
+      durationTime: this.duration,
+      // 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
+      backgroundStyle: {},
+      // 用于fade模式的控制组件显示与否
+      show: false,
+      // 是否加载image 用于控制懒加载
+      loadingImage: false
+    };
+  },
+  watch: {
+    src: {
+      immediate: true,
+      handler(n) {
+        if (!n) {
+          // 如果传入null或者''，或者false，或者undefined，标记为错误状态
+          this.isError = true;
+        } else {
+          this.isError = false;
+          this.loading = true;
+        }
+      }
+    }
+  },
+  computed: {
+    wrapStyle() {
+      let style = {};
+      // 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
+      style.width = addUnit(this.width);
+      style.height = addUnit(this.height);
+      // 如果是显示圆形，设置一个很多的半径值即可
+      style.borderRadius = this.shape == 'circle' ? '10000px' : addUnit(this.radius);
+      // 如果设置圆角，必须要有hidden，否则可能圆角无效
+      style.overflow = style.borderRadius > 0 ? 'hidden' : 'visible';
+      // if (this.fade) {
+      // 	style.opacity = this.opacity
+      // 	// nvue下，这几个属性必须要分开写
+      // 	style.transitionDuration = `${this.durationTime}ms`
+      // 	style.transitionTimingFunction = 'ease-in-out'
+      // 	style.transitionProperty = 'opacity'
+      // }
+      return deepMerge(style, addStyle(this.customStyle));
+    }
+  },
+  mounted() {
+    this.show = true;
+    if (this.lazyLoad) {
+      // #ifndef APP-NVUE
+      this.IntersectionObserver(this, '.u-image', (res, stop) => {
+        if (res.intersectionRatio > 0) {
+          this.loadingImage = true;
+          stop();
+        }
+      });
+      // #endif
+      // #ifdef APP-NVUE
+      this.loadingImage = true;
+      // #endif
+    } else {
+      this.loadingImage = true;
+    }
+  },
+  methods: {
+    // 查询节点布局是否相交
+    IntersectionObserver(_this, nodeName, callback) {
+      this.$nextTick(() => {
+        // #ifndef APP-NVUE || H5
+        let intersectionObserver = uni.createIntersectionObserver(_this);
+        intersectionObserver
+          .relativeToViewport({
+            bottom: Number(this.lazyLoadRootMargin)
+          })
+          .observe(nodeName, (res) => {
+            callback(res, () => intersectionObserver.disconnect());
+          });
+        // #endif
+        // #ifdef H5
+        if (!window.__wu_observedComponents) window.__wu_observedComponents = new Map(); // 用于存储元素及其对应的回调函数
+        if (!window.__wu_IntersectionObserver) {
+          window.__wu_IntersectionObserver = new IntersectionObserver(
+            (entries) => {
+              entries.forEach((entry) => {
+                const callback = window.__wu_observedComponents.get(entry.target);
+                if (callback) {
+                  callback(entry, () => {
+                    window.__wu_IntersectionObserver.unobserve(entry.target);
+                    window.__wu_observedComponents.delete(entry.target);
+                  });
+                }
+              });
+            },
+            {
+              root: null,
+              rootMargin: Number(this.lazyLoadRootMargin) + 'px',
+              threshold: 0
+            }
+          );
+        }
+        window.__wu_observedComponents.set(_this.$el, callback);
+        window.__wu_IntersectionObserver.observe(_this.$el);
+        // #endif
+      });
+    },
+    // 点击图片
+    onClick() {
+      this.$emit('click');
+    },
+    // 图片加载失败
+    onErrorHandler(err) {
+      this.loading = false;
+      this.isError = true;
+      this.$emit('error', err);
+    },
+    // 图片加载完成，标记loading结束
+    onLoadHandler(event) {
+      setTimeout(() => {
+        this.loading = false;
+      }, this.minLoadginShowTime);
+      this.isError = false;
+      this.$emit('load', event);
+      // this.removeBgColor()
+      // 如果不需要动画效果，就不执行下方代码，同时移除加载时的背景颜色
+      // 否则无需fade效果时，png图片依然能看到下方的背景色
+      // if (!this.fade) return this.removeBgColor();
+      // // 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的灰色)，再改成1，是为了获得过渡效果
+      // this.opacity = 0;
+      // // 这里设置为0，是为了图片展示到背景全透明这个过程时间为0，延时之后延时之后重新设置为duration，是为了获得背景透明(灰色)
+      // // 到图片展示的过程中的淡入效果
+      // this.durationTime = 0;
+      // // 延时50ms，否则在浏览器H5，过渡效果无效
+      // setTimeout(() => {
+      // 	this.durationTime = this.duration;
+      // 	this.opacity = 1;
+      // 	setTimeout(() => {
+      // 		this.removeBgColor();
+      // 	}, this.durationTime);
+      // }, 50);
+    },
+    // 移除图片的背景色
+    removeBgColor() {
+      // 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
+      this.backgroundStyle = {
+        background: 'transparent'
+      };
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-index-anchor/props.js

@@ -1,30 +1,31 @@
-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: {
     // 列表锚点文本内容
     text: {
       type: [String, Number],
-      default: defprops.indexAnchor.text
+      default: () => defProps.indexAnchor.text
     },
     // 列表锚点文字颜色
     color: {
       type: String,
-      default: defprops.indexAnchor.color
+      default: () => defProps.indexAnchor.color
     },
     // 列表锚点文字大小，单位默认px
     size: {
       type: [String, Number],
-      default: defprops.indexAnchor.size
+      default: () => defProps.indexAnchor.size
     },
     // 列表锚点背景颜色
     bgColor: {
       type: String,
-      default: defprops.indexAnchor.bgColor
+      default: () => defProps.indexAnchor.bgColor
     },
     // 列表锚点高度，单位默认px
     height: {
       type: [String, Number],
-      default: defprops.indexAnchor.height
+      default: () => defProps.indexAnchor.height
     }
   }
-};
+});

package/uview-plus/components/u-index-anchor/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;
@@ -26,4 +41,4 @@ view, scroll-view, swiper-item {
   /* #endif */
   flex-direction: row;
   align-items: center;
-}
+}