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

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

@@ -73,7 +73,7 @@ const dom = uni.requireNativePlugin('dom');
  * @property {String ｜ Number}	preLoadScreen		列表前后预渲染的屏数，1代表一个屏幕的高度，1.5代表1个半屏幕高度  （默认 1 ）
  * @property {Object}			customStyle			定义需要用到的外部样式
  *
- * @example <u-list @scrolltolower="scrolltolower"></u-list>
+ * @example <up-list @scrolltolower="scrolltolower"></up-list>
  */
 export default {
   name: 'u-list',

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

@@ -22,7 +22,7 @@ const dom = uni.requireNativePlugin('dom');
  * @description 该组件为高性能列表组件
  * @tutorial https://ijry.github.io/uview-plus/components/list.html
  * @property {String | Number}	anchor	用于滚动到指定item
- * @example <u-list-ite v-for="(item, index) in indexList" :key="index" ></u-list-item>
+ * @example <up-list-ite v-for="(item, index) in indexList" :key="index" ></up-list-item>
  */
 export default {
   name: 'u-list-item',

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

@@ -1,3 +1,191 @@
-<template>
  <view class="u-loading-icon" :style="[addStyle(customStyle)]" :class="[vertical && 'u-loading-icon--vertical']" v-if="show">
    <view
      v-if="!webviewHide"
      class="u-loading-icon__spinner"
      :class="[`u-loading-icon__spinner--${mode}`]"
      ref="ani"
      :style="{
        color: color,
        width: addUnit(size),
        height: addUnit(size),
        borderTopColor: color,
        borderBottomColor: otherBorderColor,
        borderLeftColor: otherBorderColor,
        borderRightColor: otherBorderColor,
        'animation-duration': `${duration}ms`,
        'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
      }"
    >
      <block v-if="mode === 'spinner'">
        <!-- #ifndef APP-NVUE -->
        <view v-for="(item, index) in array12" :key="index" class="u-loading-icon__dot"></view>
        <!-- #endif -->
        <!-- #ifdef APP-NVUE -->
        <!-- 此组件内部图标部分无法设置宽高，即使通过width和height配置了也无效 -->
        <loading-indicator
          v-if="!webviewHide"
          class="u-loading-indicator"
          :animating="true"
          :style="{
            color: color,
            width: addUnit(size),
            height: addUnit(size)
          }"
        />
        <!-- #endif -->
      </block>
    </view>
    <text
      v-if="text"
      class="u-loading-icon__text"
      :style="{
        fontSize: addUnit(textSize),
        color: textColor
      }"
    >
      {{ text }}
    </text>
  </view>
 * loading 加载动画
 * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
 * @tutorial https://ijry.github.io/uview-plus/components/loading.html
 * @property {Boolean}			show			是否显示组件  (默认 true)
 * @property {String}			color			动画活动区域的颜色，只对 mode = flower 模式有效（默认color['u-tips-color']）
 * @property {String}			textColor		提示文本的颜色（默认color['u-tips-color']）
 * @property {Boolean}			vertical		文字和图标是否垂直排列 (默认 false )
 * @property {String}			mode			模式选择，见官网说明（默认 'circle' ）
 * @property {String | Number}	size			加载图标的大小，单位px （默认 24 ）
 * @property {String | Number}	textSize		文字大小（默认 15 ）
 * @property {String | Number}	text			文字内容
 * @property {String}			timingFunction	动画模式 （默认 'ease-in-out' ）
 * @property {String | Number}	duration		动画执行周期时间（默认 1200）
 * @property {String}			inactiveColor	mode=circle时的暗边颜色
 * @property {Object}			customStyle		定义需要用到的外部样式
 * @example <u-loading mode="circle"></u-loading>
 */
  name: 'u-loading-icon',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      // Array.form可以通过一个伪数组对象创建指定长度的数组
      // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
      array12: Array.from({
        length: 12
      }),
      // 这里需要设置默认值为360，否则在安卓nvue上，会延迟一个duration周期后才执行
      // 在iOS nvue上，则会一开始默认执行两个周期的动画
      aniAngel: 360, // 动画旋转角度
      webviewHide: false, // 监听webview的状态，如果隐藏了页面，则停止动画，以免性能消耗
      loading: false // 是否运行中，针对nvue使用
    };
  },
  computed: {
    // 当为circle类型时，给其另外三边设置一个更轻一些的颜色
    // 之所以需要这么做的原因是，比如父组件传了color为红色，那么需要另外的三个边为浅红色
    // 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝，导致效果没有那么细腻良好)
    otherBorderColor() {
      const lightColor = colorGradient(this.color, '#ffffff', 100)[80];
      if (this.mode === 'circle') {
        return this.inactiveColor ? this.inactiveColor : lightColor;
      } else {
        return 'transparent';
      }
      // return this.mode === 'circle' ? this.inactiveColor ? this.inactiveColor : lightColor : 'transparent'
    }
  },
  watch: {
    show(n) {
      // nvue中，show为true，且为非loading状态，就重新执行动画模块
      // #ifdef APP-NVUE
      if (n && !this.loading) {
        setTimeout(() => {
          this.startAnimate();
        }, 30);
      }
      // #endif
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    addUnit,
    addStyle,
    init() {
      setTimeout(() => {
        // #ifdef APP-NVUE
        this.show && this.nvueAnimate();
        // #endif
        // #ifdef APP-PLUS
        this.show && this.addEventListenerToWebview();
        // #endif
      }, 20);
    },
    // 监听webview的显示与隐藏
    addEventListenerToWebview() {
      // webview的堆栈
      const pages = getCurrentPages();
      // 当前页面
      const page = pages[pages.length - 1];
      // 当前页面的webview实例
      const currentWebview = page.$getAppWebview();
      // 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
      currentWebview.addEventListener('hide', () => {
        this.webviewHide = true;
      });
      currentWebview.addEventListener('show', () => {
        this.webviewHide = false;
      });
    },
    // #ifdef APP-NVUE
    nvueAnimate() {
      // nvue下，非spinner类型时才需要旋转，因为nvue的spinner类型，使用了weex的
      // loading-indicator组件，自带旋转功能
      this.mode !== 'spinner' && this.startAnimate();
    },
    // 执行nvue的animate模块动画
    startAnimate() {
      this.loading = true;
      const ani = this.$refs.ani;
      if (!ani) return;
      animation.transition(
        ani,
        {
          // 进行角度旋转
          styles: {
            transform: `rotate(${this.aniAngel}deg)`,
            transformOrigin: 'center center'
          },
          duration: this.duration,
          timingFunction: this.timingFunction
          // delay: 10
        },
        () => {
          // 每次增加360deg，为了让其重新旋转一周
          this.aniAngel += 360;
          // 动画结束后，继续循环执行动画，需要同时判断webviewHide变量
          // nvue安卓，页面隐藏后依然会继续执行startAnimate方法
          this.show && !this.webviewHide ? this.startAnimate() : (this.loading = false);
        }
      );
    }
    // #endif
  }
-@import './style.css';
-</style>
+<template>
+  <view class="u-loading-icon" :style="[addStyle(customStyle)]" :class="[vertical && 'u-loading-icon--vertical']" v-if="show">
+    <view
+      v-if="!webviewHide"
+      class="u-loading-icon__spinner"
+      :class="[`u-loading-icon__spinner--${mode}`]"
+      ref="ani"
+      :style="{
+        color: color,
+        width: addUnit(size),
+        height: addUnit(size),
+        borderTopColor: color,
+        borderBottomColor: otherBorderColor,
+        borderLeftColor: otherBorderColor,
+        borderRightColor: otherBorderColor,
+        'animation-duration': `${duration}ms`,
+        'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
+      }"
+    >
+      <block v-if="mode === 'spinner'">
+        <!-- #ifndef APP-NVUE -->
+        <view v-for="(item, index) in array12" :key="index" class="u-loading-icon__dot"></view>
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <!-- 此组件内部图标部分无法设置宽高，即使通过width和height配置了也无效 -->
+        <loading-indicator
+          v-if="!webviewHide"
+          class="u-loading-indicator"
+          :animating="true"
+          :style="{
+            color: color,
+            width: addUnit(size),
+            height: addUnit(size)
+          }"
+        />
+        <!-- #endif -->
+      </block>
+    </view>
+    <text
+      v-if="text"
+      class="u-loading-icon__text"
+      :style="{
+        fontSize: addUnit(textSize),
+        color: textColor
+      }"
+    >
+      {{ text }}
+    </text>
+  </view>
+</template>
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, addStyle } from '../../libs/function/index';
+import { colorGradient } from '../../libs/function/colorGradient';
+// #ifdef APP-NVUE
+const animation = weex.requireModule('animation');
+// #endif
+/**
+ * loading 加载动画
+ * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
+ * @tutorial https://ijry.github.io/uview-plus/components/loading.html
+ * @property {Boolean}			show			是否显示组件  (默认 true)
+ * @property {String}			color			动画活动区域的颜色，只对 mode = flower 模式有效（默认color['u-tips-color']）
+ * @property {String}			textColor		提示文本的颜色（默认color['u-tips-color']）
+ * @property {Boolean}			vertical		文字和图标是否垂直排列 (默认 false )
+ * @property {String}			mode			模式选择，见官网说明（默认 'circle' ）
+ * @property {String | Number}	size			加载图标的大小，单位px （默认 24 ）
+ * @property {String | Number}	textSize		文字大小（默认 15 ）
+ * @property {String | Number}	text			文字内容
+ * @property {String}			timingFunction	动画模式 （默认 'ease-in-out' ）
+ * @property {String | Number}	duration		动画执行周期时间（默认 1200）
+ * @property {String}			inactiveColor	mode=circle时的暗边颜色
+ * @property {Object}			customStyle		定义需要用到的外部样式
+ * @example <up-loading mode="circle"></up-loading>
+ */
+export default {
+  name: 'u-loading-icon',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      // Array.form可以通过一个伪数组对象创建指定长度的数组
+      // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
+      array12: Array.from({
+        length: 12
+      }),
+      // 这里需要设置默认值为360，否则在安卓nvue上，会延迟一个duration周期后才执行
+      // 在iOS nvue上，则会一开始默认执行两个周期的动画
+      aniAngel: 360, // 动画旋转角度
+      webviewHide: false, // 监听webview的状态，如果隐藏了页面，则停止动画，以免性能消耗
+      loading: false // 是否运行中，针对nvue使用
+    };
+  },
+  computed: {
+    // 当为circle类型时，给其另外三边设置一个更轻一些的颜色
+    // 之所以需要这么做的原因是，比如父组件传了color为红色，那么需要另外的三个边为浅红色
+    // 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝，导致效果没有那么细腻良好)
+    otherBorderColor() {
+      const lightColor = colorGradient(this.color, '#ffffff', 100)[80];
+      if (this.mode === 'circle') {
+        return this.inactiveColor ? this.inactiveColor : lightColor;
+      } else {
+        return 'transparent';
+      }
+      // return this.mode === 'circle' ? this.inactiveColor ? this.inactiveColor : lightColor : 'transparent'
+    }
+  },
+  watch: {
+    show(n) {
+      // nvue中，show为true，且为非loading状态，就重新执行动画模块
+      // #ifdef APP-NVUE
+      if (n && !this.loading) {
+        setTimeout(() => {
+          this.startAnimate();
+        }, 30);
+      }
+      // #endif
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    addUnit,
+    addStyle,
+    init() {
+      setTimeout(() => {
+        // #ifdef APP-NVUE
+        this.show && this.nvueAnimate();
+        // #endif
+        // #ifdef APP-PLUS
+        this.show && this.addEventListenerToWebview();
+        // #endif
+      }, 20);
+    },
+    // 监听webview的显示与隐藏
+    addEventListenerToWebview() {
+      // webview的堆栈
+      const pages = getCurrentPages();
+      // 当前页面
+      const page = pages[pages.length - 1];
+      // 当前页面的webview实例
+      const currentWebview = page.$getAppWebview();
+      // 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
+      currentWebview.addEventListener('hide', () => {
+        this.webviewHide = true;
+      });
+      currentWebview.addEventListener('show', () => {
+        this.webviewHide = false;
+      });
+    },
+    // #ifdef APP-NVUE
+    nvueAnimate() {
+      // nvue下，非spinner类型时才需要旋转，因为nvue的spinner类型，使用了weex的
+      // loading-indicator组件，自带旋转功能
+      this.mode !== 'spinner' && this.startAnimate();
+    },
+    // 执行nvue的animate模块动画
+    startAnimate() {
+      this.loading = true;
+      const ani = this.$refs.ani;
+      if (!ani) return;
+      animation.transition(
+        ani,
+        {
+          // 进行角度旋转
+          styles: {
+            transform: `rotate(${this.aniAngel}deg)`,
+            transformOrigin: 'center center'
+          },
+          duration: this.duration,
+          timingFunction: this.timingFunction
+          // delay: 10
+        },
+        () => {
+          // 每次增加360deg，为了让其重新旋转一周
+          this.aniAngel += 360;
+          // 动画结束后，继续循环执行动画，需要同时判断webviewHide变量
+          // nvue安卓，页面隐藏后依然会继续执行startAnimate方法
+          this.show && !this.webviewHide ? this.startAnimate() : (this.loading = false);
+        }
+      );
+    }
+    // #endif
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-loading-page/u-loading-page.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-transition
+  <up-transition
     :show="loading"
     :custom-style="{
       position: 'fixed',
@@ -26,7 +26,7 @@
               height: addUnit(iconSize)
             }"
           ></image>
-          <u-loading-icon v-else :mode="loadingMode" :size="addUnit(iconSize)" :color="loadingColor"></u-loading-icon>
+          <up-loading-icon v-else :mode="loadingMode" :size="addUnit(iconSize)" :color="loadingColor"></up-loading-icon>
         </view>
         <slot>
           <text
@@ -41,7 +41,7 @@
         </slot>
       </view>
     </view>
-  </u-transition>
+  </up-transition>
 </template>
 <script>
 import { props } from './props';
@@ -63,7 +63,7 @@ import { addUnit } from '../../libs/function/index';
  * @property {String}			loadingColor	加载中图标的颜色，只能rgb或者十六进制颜色值 （默认 '#C8C8C8' ）
  * @property {Number}			zIndex	        z-index层级 （默认10 ）
  * @property {Object}			customStyle		自定义样式
- * @example <u-loading mode="circle"></u-loading>
+ * @example <up-loading mode="circle"></up-loading>
  */
 export default {
   name: 'u-loading-page',

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

@@ -11,11 +11,11 @@
       }
     ]"
   >
-    <u-line length="140rpx" :color="lineColor" :hairline="false" :dashed="dashed" v-if="line"></u-line>
+    <up-line length="140rpx" :color="lineColor" :hairline="false" :dashed="dashed" v-if="line"></up-line>
     <!-- 加载中和没有更多的状态才显示两边的横线 -->
     <view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-loadmore__content">
       <view class="u-loadmore__content__icon-wrap" v-if="status === 'loading' && icon">
-        <u-loading-icon :color="iconColor" :size="iconSize" :mode="loadingIcon"></u-loading-icon>
+        <up-loading-icon :color="iconColor" :size="iconSize" :mode="loadingIcon"></up-loading-icon>
       </view>
       <!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
       <text
@@ -27,7 +27,7 @@
         {{ showText }}
       </text>
     </view>
-    <u-line length="140rpx" :color="lineColor" :hairline="false" :dashed="dashed" v-if="line"></u-line>
+    <up-line length="140rpx" :color="lineColor" :hairline="false" :dashed="dashed" v-if="line"></up-line>
   </view>
 </template>
 <script>
@@ -58,7 +58,7 @@ import { addUnit, addStyle } from '../../libs/function/index';
  * @property {Boolean}			line			是否显示左边分割线  （默认 false ）
  * @property {Boolean}			dashed		// 是否虚线，true-虚线，false-实线  （默认 false ）
  * @event {Function} loadmore status为loadmore时，点击组件会发出此事件
- * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
+ * @example <up-loadmore :status="status" icon-type="iconType" load-text="loadText" />
  */
 export default {
   name: 'u-loadmore',