@10yun/cv-mobile-ui 0.5.44 → 0.5.45

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

@@ -1 +0,0 @@
-<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();
  }

package/uview-ui/components/u-count-down/utils.js

@@ -1,62 +0,0 @@
-// 补0，如1 -> 01
-function padZero(num, targetLength = 2) {
-    let str = `${num}`
-    while (str.length < targetLength) {
-        str = `0${str}`
-    }
-    return str
-}
-const SECOND = 1000
-const MINUTE = 60 * SECOND
-const HOUR = 60 * MINUTE
-const DAY = 24 * HOUR
-export function parseTimeData(time) {
-    const days = Math.floor(time / DAY)
-    const hours = Math.floor((time % DAY) / HOUR)
-    const minutes = Math.floor((time % HOUR) / MINUTE)
-    const seconds = Math.floor((time % MINUTE) / SECOND)
-    const milliseconds = Math.floor(time % SECOND)
-    return {
-        days,
-        hours,
-        minutes,
-        seconds,
-        milliseconds
-    }
-}
-export function parseFormat(format, timeData) {
-    let {
-        days,
-        hours,
-        minutes,
-        seconds,
-        milliseconds
-    } = timeData
-    // 如果格式化字符串中不存在DD(天)，则将天的时间转为小时中去
-    if (format.indexOf('DD') === -1) {
-        hours += days * 24
-    } else {
-        // 对天补0
-        format = format.replace('DD', padZero(days))
-    }
-    // 其他同理于DD的格式化处理方式
-    if (format.indexOf('HH') === -1) {
-        minutes += hours * 60
-    } else {
-        format = format.replace('HH', padZero(hours))
-    }
-    if (format.indexOf('mm') === -1) {
-        seconds += minutes * 60
-    } else {
-        format = format.replace('mm', padZero(minutes))
-    }
-    if (format.indexOf('ss') === -1) {
-        milliseconds += seconds * 1000
-    } else {
-        format = format.replace('ss', padZero(seconds))
-    }
-    return format.replace('SSS', padZero(milliseconds, 3))
-}
-export function isSameSecond(time1, time2) {
-    return Math.floor(time1 / 1000) === Math.floor(time2 / 1000)
-}

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

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

package/uview-ui/components/u-count-to/style.css

@@ -1,17 +0,0 @@
-/* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
-.u-count-num {
-  /* #ifndef APP-NVUE */
-  display: inline-flex;
-  /* #endif */
-  text-align: center;
-}

package/uview-ui/components/u-count-to/style.scss

@@ -1,8 +0,0 @@
-@import '../../libs/css/components.scss';
-
-.u-count-num {
-  /* #ifndef APP-NVUE */
-  display: inline-flex;
-  /* #endif */
-  text-align: center;
-}

package/uview-ui/components/u-count-to/u-count-to.vue

@@ -1,179 +0,0 @@
-<template>
-  <text
-    class="u-count-num"
-    :style="{
-      fontSize: $u.addUnit(fontSize),
-      fontWeight: bold ? 'bold' : 'normal',
-      color: color
-    }"
-  >
-    {{ displayValue }}
-  </text>
-</template>
-<script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-/**
- * countTo 数字滚动
- * @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
- * @tutorial https://ijry.github.io/uview-plus/components/countTo.html
- * @property {String | Number}	startVal	开始的数值，默认从0增长到某一个数（默认 0 ）
- * @property {String | Number}	endVal		要滚动的目标数值，必须 （默认 0 ）
- * @property {String | Number}	duration	滚动到目标数值的动画持续时间，单位为毫秒（ms） （默认 2000 ）
- * @property {Boolean}			autoplay	设置数值后是否自动开始滚动 （默认 true ）
- * @property {String | Number}	decimals	要显示的小数位数，见官网说明（默认 0 ）
- * @property {Boolean}			useEasing	滚动结束时，是否缓动结尾，见官网说明（默认 true ）
- * @property {String}			decimal		十进制分割 （ 默认 "." ）
- * @property {String}			color		字体颜色（ 默认 '#606266' )
- * @property {String | Number}	fontSize	字体大小，单位px（ 默认 22 ）
- * @property {Boolean}			bold		字体是否加粗（默认 false ）
- * @property {String}			separator	千位分隔符，见官网说明
- * @event {Function} end 数值滚动到目标值时触发
- * @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
- */
-export default {
-  name: 'u-count-to',
-  data() {
-    return {
-      localStartVal: this.startVal,
-      displayValue: this.formatNumber(this.startVal),
-      printVal: null,
-      paused: false, // 是否暂停
-      localDuration: Number(this.duration),
-      startTime: null, // 开始的时间
-      timestamp: null, // 时间戳
-      remaining: null, // 停留的时间
-      rAF: null,
-      lastTime: 0 // 上一次的时间
-    };
-  },
-  mixins: [mpMixin, mixin, props],
-  computed: {
-    countDown() {
-      return this.startVal > this.endVal;
-    }
-  },
-  watch: {
-    startVal() {
-      this.autoplay && this.start();
-    },
-    endVal() {
-      this.autoplay && this.start();
-    }
-  },
-  mounted() {
-    this.autoplay && this.start();
-  },
-  methods: {
-    easingFn(t, b, c, d) {
-      return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
-    },
-    requestAnimationFrame(callback) {
-      const currTime = new Date().getTime();
-      // 为了使setTimteout的尽可能的接近每秒60帧的效果
-      const timeToCall = Math.max(0, 16 - (currTime - this.lastTime));
-      const id = setTimeout(() => {
-        callback(currTime + timeToCall);
-      }, timeToCall);
-      this.lastTime = currTime + timeToCall;
-      return id;
-    },
-    cancelAnimationFrame(id) {
-      clearTimeout(id);
-    },
-    // 开始滚动数字
-    start() {
-      this.localStartVal = this.startVal;
-      this.startTime = null;
-      this.localDuration = this.duration;
-      this.paused = false;
-      this.rAF = this.requestAnimationFrame(this.count);
-    },
-    // 暂定状态，重新再开始滚动；或者滚动状态下，暂停
-    reStart() {
-      if (this.paused) {
-        this.resume();
-        this.paused = false;
-      } else {
-        this.stop();
-        this.paused = true;
-      }
-    },
-    // 暂停
-    stop() {
-      this.cancelAnimationFrame(this.rAF);
-    },
-    // 重新开始(暂停的情况下)
-    resume() {
-      if (!this.remaining) return;
-      this.startTime = 0;
-      this.localDuration = this.remaining;
-      this.localStartVal = this.printVal;
-      this.requestAnimationFrame(this.count);
-    },
-    // 重置
-    reset() {
-      this.startTime = null;
-      this.cancelAnimationFrame(this.rAF);
-      this.displayValue = this.formatNumber(this.startVal);
-    },
-    count(timestamp) {
-      if (!this.startTime) this.startTime = timestamp;
-      this.timestamp = timestamp;
-      const progress = timestamp - this.startTime;
-      this.remaining = this.localDuration - progress;
-      if (this.useEasing) {
-        if (this.countDown) {
-          this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);
-        } else {
-          this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
-        }
-      } else {
-        if (this.countDown) {
-          this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);
-        } else {
-          this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
-        }
-      }
-      if (this.countDown) {
-        this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
-      } else {
-        this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
-      }
-      this.displayValue = this.formatNumber(this.printVal) || 0;
-      if (progress < this.localDuration) {
-        this.rAF = this.requestAnimationFrame(this.count);
-      } else {
-        this.$emit('end');
-      }
-    },
-    // 判断是否数字
-    isNumber(val) {
-      return !isNaN(parseFloat(val));
-    },
-    formatNumber(num) {
-      // 将num转为Number类型，因为其值可能为字符串数值，调用toFixed会报错
-      num = Number(num);
-      num = num.toFixed(Number(this.decimals));
-      num += '';
-      const x = num.split('.');
-      let x1 = x[0];
-      const x2 = x.length > 1 ? this.decimal + x[1] : '';
-      const rgx = /(\d+)(\d{3})/;
-      if (this.separator && !this.isNumber(this.separator)) {
-        while (rgx.test(x1)) {
-          x1 = x1.replace(rgx, '$1' + this.separator + '$2');
-        }
-      }
-      return x1 + x2;
-    },
-    destroyed() {
-      this.cancelAnimationFrame(this.rAF);
-    }
-  }
-};
-</script>
-<style scoped>
-@import './style.css';
-</style>

package/uview-ui/components/u-datetime-picker/props.js

@@ -1,121 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // 是否打开组件
-    show: {
-      type: Boolean,
-      default: defprops.datetimePicker.show
-    },
-    // 是否展示顶部的操作栏
-    showToolbar: {
-      type: Boolean,
-      default: defprops.datetimePicker.showToolbar
-    },
-    // 绑定值
-    value: {
-      type: [String, Number],
-      default: defprops.datetimePicker.value
-    },
-    // 顶部标题
-    title: {
-      type: String,
-      default: defprops.datetimePicker.title
-    },
-    // 展示格式，mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择
-    mode: {
-      type: String,
-      default: defprops.datetimePicker.mode
-    },
-    // 可选的最大时间
-    maxDate: {
-      type: Number,
-      // 最大默认值为后10年
-      default: defprops.datetimePicker.maxDate
-    },
-    // 可选的最小时间
-    minDate: {
-      type: Number,
-      // 最小默认值为前10年
-      default: defprops.datetimePicker.minDate
-    },
-    // 可选的最小小时，仅mode=time有效
-    minHour: {
-      type: Number,
-      default: defprops.datetimePicker.minHour
-    },
-    // 可选的最大小时，仅mode=time有效
-    maxHour: {
-      type: Number,
-      default: defprops.datetimePicker.maxHour
-    },
-    // 可选的最小分钟，仅mode=time有效
-    minMinute: {
-      type: Number,
-      default: defprops.datetimePicker.minMinute
-    },
-    // 可选的最大分钟，仅mode=time有效
-    maxMinute: {
-      type: Number,
-      default: defprops.datetimePicker.maxMinute
-    },
-    // 选项过滤函数
-    filter: {
-      type: [Function, null],
-      default: defprops.datetimePicker.filter
-    },
-    // 选项格式化函数
-    formatter: {
-      type: [Function, null],
-      default: defprops.datetimePicker.formatter
-    },
-    // 是否显示加载中状态
-    loading: {
-      type: Boolean,
-      default: defprops.datetimePicker.loading
-    },
-    // 各列中，单个选项的高度
-    itemHeight: {
-      type: [String, Number],
-      default: defprops.datetimePicker.itemHeight
-    },
-    // 取消按钮的文字
-    cancelText: {
-      type: String,
-      default: defprops.datetimePicker.cancelText
-    },
-    // 确认按钮的文字
-    confirmText: {
-      type: String,
-      default: defprops.datetimePicker.confirmText
-    },
-    // 取消按钮的颜色
-    cancelColor: {
-      type: String,
-      default: defprops.datetimePicker.cancelColor
-    },
-    // 确认按钮的颜色
-    confirmColor: {
-      type: String,
-      default: defprops.datetimePicker.confirmColor
-    },
-    // 每列中可见选项的数量
-    visibleItemCount: {
-      type: [String, Number],
-      default: defprops.datetimePicker.visibleItemCount
-    },
-    // 是否允许点击遮罩关闭选择器
-    closeOnClickOverlay: {
-      type: Boolean,
-      default: defprops.datetimePicker.closeOnClickOverlay
-    },
-    // 各列的默认索引
-    defaultIndex: {
-      type: Array,
-      default: defprops.datetimePicker.defaultIndex
-    },
-    immediateChange: {
-      type: Boolean,
-      default: defprops.datetimePicker.immediateChange
-    }
-  }
-};

package/uview-ui/components/u-datetime-picker/style.css

@@ -1,11 +0,0 @@
-/* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */

package/uview-ui/components/u-datetime-picker/style.scss

@@ -1 +0,0 @@
-@import '../../libs/css/components.scss';