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

package/uview-plus/components/u-column-notice/props.js

@@ -1,56 +1,61 @@
-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: [Array],
-      default: defprops.columnNotice.text
+      default: () => defProps.columnNotice.text
     },
     // 是否显示左侧的音量图标
     icon: {
       type: String,
-      default: defprops.columnNotice.icon
+      default: () => defProps.columnNotice.icon
     },
     // 通告模式，link-显示右箭头，closable-显示右侧关闭图标
     mode: {
       type: String,
-      default: defprops.columnNotice.mode
+      default: () => defProps.columnNotice.mode
     },
     // 文字颜色，各图标也会使用文字颜色
     color: {
       type: String,
-      default: defprops.columnNotice.color
+      default: () => defProps.columnNotice.color
     },
     // 背景颜色
     bgColor: {
       type: String,
-      default: defprops.columnNotice.bgColor
+      default: () => defProps.columnNotice.bgColor
     },
     // 字体大小，单位px
     fontSize: {
       type: [String, Number],
-      default: defprops.columnNotice.fontSize
+      default: () => defProps.columnNotice.fontSize
     },
     // 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度
     speed: {
       type: [String, Number],
-      default: defprops.columnNotice.speed
+      default: () => defProps.columnNotice.speed
     },
     // direction = row时，是否使用步进形式滚动
     step: {
       type: Boolean,
-      default: defprops.columnNotice.step
+      default: () => defProps.columnNotice.step
     },
     // 滚动一个周期的时间长，单位ms
     duration: {
       type: [String, Number],
-      default: defprops.columnNotice.duration
+      default: () => defProps.columnNotice.duration
     },
     // 是否禁止用手滑动切换
     // 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
     disableTouch: {
       type: Boolean,
-      default: defprops.columnNotice.disableTouch
+      default: () => defProps.columnNotice.disableTouch
+    },
+    justifyContent: {
+      type: String,
+      default: () => defProps.columnNotice.justifyContent
     }
   }
-};
+});

package/uview-plus/components/u-column-notice/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;
@@ -45,4 +60,4 @@ view, scroll-view, swiper-item {
 .u-notice__swiper__item__text {
   font-size: 14px;
   color: var(--u-warning);
-}
+}

package/uview-plus/components/u-column-notice/u-column-notice.vue

@@ -14,7 +14,12 @@
       class="u-notice__swiper"
       @change="noticeChange"
     >
-      <swiper-item v-for="(item, index) in text" :key="index" class="u-notice__swiper__item">
+      <swiper-item
+        v-for="(item, index) in text"
+        :key="index"
+        class="u-notice__swiper__item"
+        :style="{ justifyContent: justifyContent }"
+      >
         <text class="u-notice__swiper__item__text u-line-1" :style="[textStyle]">{{ item }}</text>
       </swiper-item>
     </swiper>
@@ -25,9 +30,11 @@
   </view>
 </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, error } from '../../libs/function/index';
+import test from '../../libs/function/test';
 /**
  * ColumnNotice 滚动通知中的垂直滚动 内部组件
  * @description 该组件用于滚动通告场景，是其中的垂直滚动方式
@@ -50,8 +57,8 @@ export default {
     text: {
       immediate: true,
       handler(newValue, oldValue) {
-        if (!uni.$u.test.array(newValue)) {
-          uni.$u.error('noticebar组件direction为column时，要求text参数为数组形式');
+        if (!test.array(newValue)) {
+          error('noticebar组件direction为column时，要求text参数为数组形式');
         }
       }
     }
@@ -61,7 +68,7 @@ export default {
     textStyle() {
       let style = {};
       style.color = this.color;
-      style.fontSize = uni.$u.addUnit(this.fontSize);
+      style.fontSize = addUnit(this.fontSize);
       return style;
     },
     // 垂直或者水平滚动
@@ -75,6 +82,7 @@ export default {
       index: 0
     };
   },
+  emits: ['click', 'close'],
   methods: {
     noticeChange(e) {
       this.index = e.detail.current;

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

@@ -0,0 +1 @@
+<template>
  <view @click="handleClick">
    <slot>复制</slot>
  </view>
  name: 'up-copy',
  props: {
    content: {
      type: String,
      default: ''
    },
    alertStyle: {
      type: String,
      default: 'toast'
    },
    notice: {
      type: String,
      default: '复制成功'
    }
  },
  emits: ['success'],
  methods: {
    handleClick() {
      let content = this.content;
      if (!content) {
        uni.showToast({
          title: '暂无',
          icon: 'none',
          duration: 2000
        });
        return false;
      }
      content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
      /**
       * 小程序端 和 app端的复制逻辑
       */
      let that = this;
      uni.setClipboardData({
        data: content,
        success: function () {
          if (that.alertStyle == 'modal') {
            uni.showModal({
              title: '提示',
              content: that.notice
            });
          } else {
            uni.showToast({
              title: that.notice,
              icon: 'none'
            });
          }
          that.$emit('success');
        },
        fail: function () {
          uni.showToast({
            title: '复制失败',
            icon: 'none',
            duration: 3000
          });
        }
      });
    }
  }

package/uview-plus/components/u-count-down/props.js

@@ -1,25 +1,26 @@
-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: {
     // 倒计时时长，单位ms
     time: {
       type: [String, Number],
-      default: defprops.countDown.time
+      default: () => defProps.countDown.time
     },
     // 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒
     format: {
       type: String,
-      default: defprops.countDown.format
+      default: () => defProps.countDown.format
     },
     // 是否自动开始倒计时
     autoStart: {
       type: Boolean,
-      default: defprops.countDown.autoStart
+      default: () => defProps.countDown.autoStart
     },
     // 是否展示毫秒倒计时
     millisecond: {
       type: Boolean,
-      default: defprops.countDown.millisecond
+      default: () => defProps.countDown.millisecond
     }
   }
-};
+});

package/uview-plus/components/u-count-down/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;
@@ -13,4 +28,4 @@ view, scroll-view, swiper-item {
   color: var(--u-content-color);
   font-size: 15px;
   line-height: 22px;
-}
+}

package/uview-plus/components/u-count-down/u-count-down.vue

@@ -1 +1,146 @@
-<template>
  <view class="u-count-down">
    <slot>
      <text class="u-count-down__text">{{ formattedTime }}</text>
    </slot>
  </view>
 * u-count-down 倒计时
 * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
 * @tutorial https://uviewui.com/components/countDown.html
 * @property {String | Number}	time		倒计时时长，单位ms （默认 0 ）
 * @property {String}			format		时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒  （默认 'HH:mm:ss' ）
 * @property {Boolean}			autoStart	是否自动开始倒计时 （默认 true ）
 * @property {Boolean}			millisecond	是否展示毫秒倒计时 （默认 false ）
 * @event {Function} finish 倒计时结束时触发
 * @event {Function} change 倒计时变化时触发
 * @event {Function} start	开始倒计时
 * @event {Function} pause	暂停倒计时
 * @event {Function} reset	重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时
 * @example <u-count-down :time="time"></u-count-down>
 */
  name: 'u-count-down',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      timer: null,
      // 各单位(天，时，分等)剩余时间
      timeData: parseTimeData(0),
      // 格式化后的时间，如"03:23:21"
      formattedTime: '0',
      // 倒计时是否正在进行中
      runing: false,
      endTime: 0, // 结束的毫秒时间戳
      remainTime: 0 // 剩余的毫秒时间
    };
  },
  watch: {
    time(n) {
      this.reset();
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.reset();
    },
    // 开始倒计时
    start() {
      if (this.runing) return;
      // 标识为进行中
      this.runing = true;
      // 结束时间戳 = 此刻时间戳 + 剩余的时间
      this.endTime = Date.now() + this.remainTime;
      this.toTick();
    },
    // 根据是否展示毫秒，执行不同操作函数
    toTick() {
      if (this.millisecond) {
        this.microTick();
      } else {
        this.macroTick();
      }
    },
    macroTick() {
      this.clearTimeout();
      // 每隔一定时间，更新一遍定时器的值
      // 同时此定时器的作用也能带来毫秒级的更新
      this.timer = setTimeout(() => {
        // 获取剩余时间
        const remain = this.getRemainTime();
        // 重设剩余时间
        if (!isSameSecond(remain, this.remainTime) || remain === 0) {
          this.setRemainTime(remain);
        }
        // 如果剩余时间不为0，则继续检查更新倒计时
        if (this.remainTime !== 0) {
          this.macroTick();
        }
      }, 30);
    },
    microTick() {
      this.clearTimeout();
      this.timer = setTimeout(() => {
        this.setRemainTime(this.getRemainTime());
        if (this.remainTime !== 0) {
          this.microTick();
        }
      }, 50);
    },
    // 获取剩余的时间
    getRemainTime() {
      // 取最大值，防止出现小于0的剩余时间值
      return Math.max(this.endTime - Date.now(), 0);
    },
    // 设置剩余的时间
    setRemainTime(remain) {
      this.remainTime = remain;
      // 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
      const timeData = parseTimeData(remain);
      this.$emit('change', timeData);
      // 得出格式化后的时间
      this.formattedTime = parseFormat(this.format, timeData);
      // 如果时间已到，停止倒计时
      if (remain <= 0) {
        this.pause();
        this.$emit('finish');
      }
    },
    // 重置倒计时
    reset() {
      this.pause();
      this.remainTime = this.time;
      this.setRemainTime(this.remainTime);
      if (this.autoStart) {
        this.start();
      }
    },
    // 暂停倒计时
    pause() {
      this.runing = false;
      this.clearTimeout();
    },
    // 清空定时器
    clearTimeout() {
      clearTimeout(this.timer);
      this.timer = null;
    }
  },
  beforeDestroy() {
    this.clearTimeout();
  }
+<template>
+  <view class="u-count-down">
+    <slot>
+      <text class="u-count-down__text">{{ formattedTime }}</text>
+    </slot>
+  </view>
+</template>
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { isSameSecond, parseFormat, parseTimeData } from './utils';
+/**
+ * u-count-down 倒计时
+ * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+ * @tutorial https://uview-plus.jiangruyi.com/components/countDown.html
+ * @property {String | Number}	time		倒计时时长，单位ms （默认 0 ）
+ * @property {String}			format		时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒  （默认 'HH:mm:ss' ）
+ * @property {Boolean}			autoStart	是否自动开始倒计时 （默认 true ）
+ * @property {Boolean}			millisecond	是否展示毫秒倒计时 （默认 false ）
+ * @event {Function} finish 倒计时结束时触发
+ * @event {Function} change 倒计时变化时触发
+ * @event {Function} start	开始倒计时
+ * @event {Function} pause	暂停倒计时
+ * @event {Function} reset	重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时
+ * @example <u-count-down :time="time"></u-count-down>
+ */
+export default {
+  name: 'u-count-down',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      timer: null,
+      // 各单位(天，时，分等)剩余时间
+      timeData: parseTimeData(0),
+      // 格式化后的时间，如"03:23:21"
+      formattedTime: '0',
+      // 倒计时是否正在进行中
+      runing: false,
+      endTime: 0, // 结束的毫秒时间戳
+      remainTime: 0 // 剩余的毫秒时间
+    };
+  },
+  watch: {
+    time(n) {
+      this.reset();
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  emits: ['change', 'finish'],
+  methods: {
+    init() {
+      this.reset();
+    },
+    // 开始倒计时
+    start() {
+      if (this.runing) return;
+      // 标识为进行中
+      this.runing = true;
+      // 结束时间戳 = 此刻时间戳 + 剩余的时间
+      this.endTime = Date.now() + this.remainTime;
+      this.toTick();
+    },
+    // 根据是否展示毫秒，执行不同操作函数
+    toTick() {
+      if (this.millisecond) {
+        this.microTick();
+      } else {
+        this.macroTick();
+      }
+    },
+    macroTick() {
+      this.clearTimeout();
+      // 每隔一定时间，更新一遍定时器的值
+      // 同时此定时器的作用也能带来毫秒级的更新
+      this.timer = setTimeout(() => {
+        // 获取剩余时间
+        const remain = this.getRemainTime();
+        // 重设剩余时间
+        if (!isSameSecond(remain, this.remainTime) || remain === 0) {
+          this.setRemainTime(remain);
+        }
+        // 如果剩余时间不为0，则继续检查更新倒计时
+        if (this.remainTime !== 0) {
+          this.macroTick();
+        }
+      }, 30);
+    },
+    microTick() {
+      this.clearTimeout();
+      this.timer = setTimeout(() => {
+        this.setRemainTime(this.getRemainTime());
+        if (this.remainTime !== 0) {
+          this.microTick();
+        }
+      }, 50);
+    },
+    // 获取剩余的时间
+    getRemainTime() {
+      // 取最大值，防止出现小于0的剩余时间值
+      return Math.max(this.endTime - Date.now(), 0);
+    },
+    // 设置剩余的时间
+    setRemainTime(remain) {
+      this.remainTime = remain;
+      // 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
+      const timeData = parseTimeData(remain);
+      this.$emit('change', timeData);
+      // 得出格式化后的时间
+      this.formattedTime = parseFormat(this.format, timeData);
+      // 如果时间已到，停止倒计时
+      if (remain <= 0) {
+        this.pause();
+        this.$emit('finish');
+      }
+    },
+    // 重置倒计时
+    reset() {
+      this.pause();
+      this.remainTime = this.time;
+      this.setRemainTime(this.remainTime);
+      if (this.autoStart) {
+        this.start();
+      }
+    },
+    // 暂停倒计时
+    pause() {
+      this.runing = false;
+      this.clearTimeout();
+    },
+    // 清空定时器
+    clearTimeout() {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+  },
+  beforeUnmount() {
+    this.clearTimeout();
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-count-to/props.js

@@ -1,60 +1,61 @@
-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: {
     // 开始的数值，默认从0增长到某一个数
     startVal: {
       type: [String, Number],
-      default: defprops.countTo.startVal
+      default: () => defProps.countTo.startVal
     },
     // 要滚动的目标数值，必须
     endVal: {
       type: [String, Number],
-      default: defprops.countTo.endVal
+      default: () => defProps.countTo.endVal
     },
     // 滚动到目标数值的动画持续时间，单位为毫秒（ms）
     duration: {
       type: [String, Number],
-      default: defprops.countTo.duration
+      default: () => defProps.countTo.duration
     },
     // 设置数值后是否自动开始滚动
     autoplay: {
       type: Boolean,
-      default: defprops.countTo.autoplay
+      default: () => defProps.countTo.autoplay
     },
     // 要显示的小数位数
     decimals: {
       type: [String, Number],
-      default: defprops.countTo.decimals
+      default: () => defProps.countTo.decimals
     },
     // 是否在即将到达目标数值的时候，使用缓慢滚动的效果
     useEasing: {
       type: Boolean,
-      default: defprops.countTo.useEasing
+      default: () => defProps.countTo.useEasing
     },
     // 十进制分割
     decimal: {
       type: [String, Number],
-      default: defprops.countTo.decimal
+      default: () => defProps.countTo.decimal
     },
     // 字体颜色
     color: {
       type: String,
-      default: defprops.countTo.color
+      default: () => defProps.countTo.color
     },
     // 字体大小
     fontSize: {
       type: [String, Number],
-      default: defprops.countTo.fontSize
+      default: () => defProps.countTo.fontSize
     },
     // 是否加粗字体
     bold: {
       type: Boolean,
-      default: defprops.countTo.bold
+      default: () => defProps.countTo.bold
     },
     // 千位分隔符，类似金额的分割(￥23,321.05中的",")
     separator: {
       type: String,
-      default: defprops.countTo.separator
+      default: () => defProps.countTo.separator
     }
   }
-};
+});

package/uview-plus/components/u-count-to/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;
@@ -14,4 +29,4 @@ view, scroll-view, swiper-item {
   display: inline-flex;
   /* #endif */
   text-align: center;
-}
+}