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

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

@@ -1,5 +1,5 @@
 <template>
-  <u-transition mode="fade" :show="show" :style="transStyle" :duration="fade ? 1000 : 0">
+  <up-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"
@@ -27,7 +27,7 @@
         }"
       >
         <slot name="loading">
-          <u-icon :name="loadingIcon"></u-icon>
+          <up-icon :name="loadingIcon"></up-icon>
         </slot>
       </view>
       <view
@@ -38,11 +38,11 @@
         }"
       >
         <slot name="error">
-          <u-icon :name="errorIcon"></u-icon>
+          <up-icon :name="errorIcon"></up-icon>
         </slot>
       </view>
     </view>
-  </u-transition>
+  </up-transition>
 </template>
 <script>
 import { props } from './props';
@@ -73,7 +73,7 @@ import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
  * @event {Function}	click	点击图片时触发
  * @event {Function}	error	图片加载失败时触发
  * @event {Function} load 图片加载成功时触发
- * @example <u-image width="100%" height="300px" :src="src"></u-image>
+ * @example <up-image width="100%" height="300px" :src="src"></up-image>
  */
 export default {
   name: 'u-image',

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>
+  <up-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">
+          <up-icon :name="loadingIcon" :width="width" :height="height"></up-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">
+          <up-icon :name="errorIcon" :width="width" :height="height"></up-icon>
+        </slot>
+      </view>
+    </view>
+  </up-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 <up-image width="100%" height="300px" :src="src"></up-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/u-index-anchor.vue

@@ -41,7 +41,7 @@ const dom = uni.requireNativePlugin('dom');
  * @property {String | Number}	size	列表锚点文字大小，单位默认px ( 默认 14 )
  * @property {String}			bgColor	列表锚点背景颜色 ( 默认 '#dedede' )
  * @property {String | Number}	height	列表锚点高度，单位默认px ( 默认 32 )
- * @example <u-index-anchor :text="indexList[index]"></u-index-anchor>
+ * @example <up-index-anchor :text="indexList[index]"></up-index-anchor>
  */
 export default {
   name: 'u-index-anchor',

package/uview-plus/components/u-index-list/u-index-list.vue

@@ -65,7 +65,7 @@
         </text>
       </view>
     </view>
-    <u-transition
+    <up-transition
       mode="fade"
       :show="touching"
       :customStyle="{
@@ -85,7 +85,7 @@
       >
         <text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
       </view>
-    </u-transition>
+    </up-transition>
   </view>
 </template>
 <script>

package/uview-plus/components/u-input/_doc/changelog.md

@@ -0,0 +1,6 @@
+## 1.0.2（2024-05-08）
+更新域名
+## 1.0.1（2023-09-11）
+自定义事件声明
+## 1.0.0（2023-09-01）
+此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。

package/uview-plus/components/u-input/_doc/package.json

@@ -0,0 +1,88 @@
+{
+  "id": "u-input",
+  "displayName": "u-input 输入框，全端兼容，无论平台，一致体验",
+  "version": "1.0.2",
+  "description": "此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。",
+  "keywords": [
+    "u-ui",
+    "wuui",
+    "u-input",
+    "input",
+    "输入框"
+  ],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.4.15"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [
+      "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-input/_doc/readme.md

@@ -0,0 +1,16 @@
+## u-input 输入框
+
+> **组件名：u-input**
+
+此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件 [u-form](https://ext.dcloud.net.cn/plugin?name=u-form) 而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
+
+## [查看文档](https://ijry.github.io/uview-plus/components/input.html)
+
+## [更多组件, 请查看 `u-ui` 组件库](https://ext.dcloud.net.cn/plugin?name=u--ui)
+(请勿下载插件zip)
+
+<a href="https://ext.dcloud.net.cn/plugin?name=u--ui">
+	<img src="https://wuui.cn/intr.png">
+</a>
+
+**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://ijry.github.io/uview-plus/components/qqFeedBack.html)**

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

@@ -3,7 +3,7 @@
     <view class="u-input__content">
       <view class="u-input__content__prefix-icon" v-if="prefixIcon || $slots.prefix">
         <slot name="prefix">
-          <u-icon :name="prefixIcon" size="18" :customStyle="prefixIconStyle"></u-icon>
+          <up-icon :name="prefixIcon" size="18" :customStyle="prefixIconStyle"></up-icon>
         </slot>
       </view>
       <view class="u-input__content__field-wrapper" @tap="clickHandler">
@@ -42,11 +42,11 @@
         />
       </view>
       <view class="u-input__content__clear" v-if="isShowClear" @click="onClear">
-        <u-icon name="close" size="11" color="#ffffff" customStyle="line-height: 12px"></u-icon>
+        <up-icon name="close" size="11" color="#ffffff" customStyle="line-height: 12px"></up-icon>
       </view>
       <view class="u-input__content__subfix-icon" v-if="suffixIcon || $slots.suffix">
         <slot name="suffix">
-          <u-icon :name="suffixIcon" size="18" :customStyle="suffixIconStyle"></u-icon>
+          <up-icon :name="suffixIcon" size="18" :customStyle="suffixIconStyle"></up-icon>
         </slot>
       </view>
     </view>
@@ -98,7 +98,7 @@ import { addStyle, addUnit, deepMerge, formValidate, $parent, sleep, os } from '
  * @property {String}			shape					输入框形状，circle-圆形，square-方形 （ 默认 'square' ）
  * @property {Object}			customStyle				定义需要用到的外部样式
  * @property {Boolean}			ignoreCompositionEvent	是否忽略组件内对文本合成系统事件的处理。
- * @example <u-input v-model="value" :password="true" suffix-icon="lock-fill" />
+ * @example <up-input v-model="value" :password="true" suffix-icon="lock-fill" />
  */
 export default {
   name: 'u-input',