uview-pro 0.0.1

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

@@ -0,0 +1,297 @@
+<template>
+    <view
+        class="u-count-num"
+        :style="{
+            fontSize: props.fontSize + 'rpx',
+            fontWeight: props.bold ? 'bold' : 'normal',
+            color: props.color
+        }"
+    >
+        {{ displayValue }}
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+
+defineOptions({ name: 'u-count-to' });
+
+/**
+ * countTo 数字滚动
+ * @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
+ * @tutorial https://www.uviewui.com/components/countTo.html
+ * @property {String | Number} start-val 开始值
+ * @property {String | Number} end-val 结束值
+ * @property {String | Number} duration 滚动过程所需的时间，单位ms（默认2000）
+ * @property {Boolean} autoplay 是否自动开始滚动（默认true）
+ * @property {String | Number} decimals 要显示的小数位数，见官网说明（默认0）
+ * @property {Boolean} use-easing 滚动结束时，是否缓动结尾，见官网说明（默认true）
+ * @property {String} separator 千位分隔符，见官网说明
+ * @property {String} color 字体颜色（默认#303133）
+ * @property {String | Number} font-size 字体大小，单位rpx（默认50）
+ * @property {Boolean} bold 字体是否加粗（默认false）
+ * @event {Function} end 数值滚动到目标值时触发
+ * @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
+ */
+
+const emit = defineEmits(['end']);
+
+const props = defineProps({
+    /** 开始的数值，默认从0增长到某一个数 */
+    startVal: {
+        type: [Number, String],
+        default: 0
+    },
+    /** 要滚动的目标数值，必须 */
+    endVal: {
+        type: [Number, String],
+        default: 0,
+        required: true
+    },
+    /** 滚动到目标数值的动画持续时间，单位为毫秒（ms） */
+    duration: {
+        type: [Number, String],
+        default: 2000
+    },
+    /** 设置数值后是否自动开始滚动 */
+    autoplay: {
+        type: Boolean,
+        default: true
+    },
+    /** 要显示的小数位数 */
+    decimals: {
+        type: [Number, String],
+        default: 0
+    },
+    /** 是否在即将到达目标数值的时候，使用缓慢滚动的效果 */
+    useEasing: {
+        type: Boolean,
+        default: true
+    },
+    /** 十进制分割符号 */
+    decimal: {
+        type: [Number, String],
+        default: '.'
+    },
+    /** 字体颜色 */
+    color: {
+        type: String,
+        default: '#303133'
+    },
+    /** 字体大小 */
+    fontSize: {
+        type: [Number, String],
+        default: 50
+    },
+    /** 是否加粗字体 */
+    bold: {
+        type: Boolean,
+        default: false
+    },
+    /** 千位分隔符，类似金额的分割(￥23,321.05中的",") */
+    separator: {
+        type: String,
+        default: ''
+    }
+});
+
+const localStartVal = ref(Number(props.startVal));
+const displayValue = ref(formatNumber(props.startVal));
+const printVal = ref<number | null>(null);
+const paused = ref(false); // 是否暂停
+const localDuration = ref(Number(props.duration));
+const startTime = ref<number | null>(null); // 开始的时间
+const timestamp = ref<number | null>(null); // 时间戳
+const remaining = ref<number | null>(null); // 停留的时间
+const rAF = ref<number | null>(null);
+const lastTime = ref(0); // 上一次的时间
+
+/**
+ * 是否倒计时
+ */
+const countDown = computed(() => Number(props.startVal) > Number(props.endVal));
+
+watch(
+    () => props.startVal,
+    () => {
+        if (props.autoplay) start();
+    }
+);
+watch(
+    () => props.endVal,
+    () => {
+        if (props.autoplay) start();
+    }
+);
+
+onMounted(() => {
+    if (props.autoplay) start();
+});
+
+/**
+ * 缓动函数
+ */
+function easingFn(t: number, b: number, c: number, d: number): number {
+    return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
+}
+
+/**
+ * requestAnimationFrame polyfill
+ */
+function requestAnimationFrame(callback: (ts: number) => void): number {
+    const currTime = new Date().getTime();
+    // 为了使setTimteout的尽可能的接近每秒60帧的效果
+    const timeToCall = Math.max(0, 16 - (currTime - lastTime.value));
+    const id = setTimeout(() => {
+        callback(currTime + timeToCall);
+    }, timeToCall);
+    lastTime.value = currTime + timeToCall;
+    return id as unknown as number;
+}
+
+/**
+ * 取消动画帧
+ */
+function cancelAnimationFrame(id: number | null) {
+    if (id) clearTimeout(id);
+}
+
+/**
+ * 开始滚动数字
+ */
+function start() {
+    localStartVal.value = Number(props.startVal);
+    startTime.value = null;
+    localDuration.value = Number(props.duration);
+    paused.value = false;
+    rAF.value = requestAnimationFrame(count);
+}
+
+/**
+ * 暂停/恢复滚动
+ * 暂定状态，重新再开始滚动；或者滚动状态下，暂停
+ */
+function reStart() {
+    if (paused.value) {
+        resume();
+        paused.value = false;
+    } else {
+        stop();
+        paused.value = true;
+    }
+}
+
+/**
+ * 暂停
+ */
+function stop() {
+    cancelAnimationFrame(rAF.value);
+}
+
+/**
+ * 重新开始(暂停的情况下)
+ */
+function resume() {
+    startTime.value = null;
+    localDuration.value = remaining.value || Number(props.duration);
+    localStartVal.value = printVal.value || Number(props.startVal);
+    rAF.value = requestAnimationFrame(count);
+}
+
+/**
+ * 重置
+ */
+function reset() {
+    startTime.value = null;
+    cancelAnimationFrame(rAF.value);
+    displayValue.value = formatNumber(props.startVal);
+}
+
+/**
+ * 数字滚动动画主逻辑
+ */
+function count(ts: number) {
+    if (!startTime.value) startTime.value = ts;
+    timestamp.value = ts;
+    const progress = ts - (startTime.value || 0);
+    remaining.value = localDuration.value - progress;
+    let val: number;
+    if (props.useEasing) {
+        if (countDown.value) {
+            val = localStartVal.value - easingFn(progress, 0, localStartVal.value - Number(props.endVal), localDuration.value);
+        } else {
+            val = easingFn(progress, localStartVal.value, Number(props.endVal) - localStartVal.value, localDuration.value);
+        }
+    } else {
+        if (countDown.value) {
+            val = localStartVal.value - (localStartVal.value - Number(props.endVal)) * (progress / localDuration.value);
+        } else {
+            val = localStartVal.value + (Number(props.endVal) - localStartVal.value) * (progress / localDuration.value);
+        }
+    }
+    if (countDown.value) {
+        val = val < Number(props.endVal) ? Number(props.endVal) : val;
+    } else {
+        val = val > Number(props.endVal) ? Number(props.endVal) : val;
+    }
+    printVal.value = val;
+    displayValue.value = formatNumber(val);
+    if (progress < localDuration.value) {
+        rAF.value = requestAnimationFrame(count);
+    } else {
+        emit('end');
+    }
+}
+
+/**
+ * 判断是否数字
+ */
+function isNumber(val: unknown): boolean {
+    return !isNaN(parseFloat(String(val)));
+}
+
+/**
+ * 格式化数字
+ */
+function formatNumber(num: unknown): string {
+    // 将num转为Number类型，因为其值可能为字符串数值，调用toFixed会报错
+    let n = Number(num);
+    n = Number(n.toFixed(Number(props.decimals)));
+    let str = n + '';
+    const x = str.split('.');
+    let x1 = x[0];
+    const x2 = x.length > 1 ? String(props.decimal) + x[1] : '';
+    const rgx = /(\d+)(\d{3})/;
+    if (props.separator && !isNumber(props.separator)) {
+        while (rgx.test(x1)) {
+            x1 = x1.replace(rgx, '$1' + props.separator + '$2');
+        }
+    }
+    return x1 + x2;
+}
+
+// 销毁时清理动画帧
+onUnmounted(() => {
+    cancelAnimationFrame(rAF.value);
+});
+
+// 暴露给父组件的函数
+defineExpose({
+    start,
+    stop,
+    reStart,
+    resume,
+    reset
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-count-num {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    text-align: center;
+}
+</style>

package/components/u-divider/u-divider.vue

@@ -0,0 +1,141 @@
+<template>
+    <view
+        class="u-divider"
+        :style="{
+            height: height === 'auto' ? 'auto' : height + 'rpx',
+            backgroundColor: bgColor,
+            marginBottom: marginBottom + 'rpx',
+            marginTop: marginTop + 'rpx'
+        }"
+        @tap="onClick"
+    >
+        <view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="lineStyle"></view>
+        <view
+            v-if="useSlot"
+            class="u-divider-text"
+            :style="{
+                color: color,
+                fontSize: fontSize + 'rpx'
+            }"
+            ><slot
+        /></view>
+        <view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="lineStyle"></view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({
+    name: 'u-divider'
+});
+
+/**
+ * divider 分割线
+ * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
+ * @tutorial https://www.uviewui.com/components/divider.html
+ * @property {String Number} half-width 文字左或右边线条宽度，数值或百分比，数值时单位为rpx
+ * @property {String} border-color 线条颜色，优先级高于type（默认#dcdfe6）
+ * @property {String} color 文字颜色（默认#909399）
+ * @property {String Number} fontSize 字体大小，单位rpx（默认26）
+ * @property {String} bg-color 整个divider的背景颜色（默认呢#ffffff）
+ * @property {String Number} height 整个divider的高度，单位rpx（默认40）
+ * @property {String} type 将线条设置主题色（默认primary）
+ * @property {Boolean} useSlot 是否使用slot传入内容，如果不传入，中间不会有空隙（默认true）
+ * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
+ * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
+ * @event {Function} click divider组件被点击时触发
+ * @example <u-divider color="#fa3534">长河落日圆</u-divider>
+ */
+const props = defineProps({
+    /** 单一边divider横线的宽度(数值)，单位rpx。或者百分比 */
+    halfWidth: { type: [Number, String], default: 150 },
+    /** divider横线的颜色，如设置 */
+    borderColor: { type: String, default: '#dcdfe6' },
+    /** 主题色，可以是primary|info|success|warning|error之一值 */
+    type: { type: String, default: 'primary' },
+    /** 文字颜色 */
+    color: { type: String, default: '#909399' },
+    /** 文字大小，单位rpx */
+    fontSize: { type: [Number, String], default: 26 },
+    /** 整个divider的背景颜色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** 整个divider的高度单位rpx */
+    height: { type: [Number, String], default: 'auto' },
+    /** 上边距 */
+    marginTop: { type: [String, Number], default: 0 },
+    /** 下边距 */
+    marginBottom: { type: [String, Number], default: 0 },
+    /** 是否使用slot传入内容，如果不用slot传入内容，先的中间就不会有空隙 */
+    useSlot: { type: Boolean, default: true }
+});
+
+const emit = defineEmits(['click']);
+
+/**
+ * divider横线样式
+ */
+const lineStyle = computed(() => {
+    let style: Record<string, string> = {};
+    if (String(props.halfWidth).indexOf('%') !== -1) style.width = String(props.halfWidth);
+    else style.width = props.halfWidth + 'rpx';
+    // borderColor优先级高于type值
+    if (props.borderColor) style.borderColor = props.borderColor;
+    return style;
+});
+
+/**
+ * divider组件被点击时触发
+ */
+function onClick() {
+    emit('click');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+.u-divider {
+    width: 100%;
+    position: relative;
+    text-align: center;
+    @include vue-flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    flex-direction: row;
+}
+
+.u-divider-line {
+    border-bottom: 1px solid $u-border-color;
+    transform: scale(1, 0.5);
+    transform-origin: center;
+
+    &--bordercolor--primary {
+        border-color: $u-type-primary;
+    }
+
+    &--bordercolor--success {
+        border-color: $u-type-success;
+    }
+
+    &--bordercolor--error {
+        border-color: $u-type-primary;
+    }
+
+    &--bordercolor--info {
+        border-color: $u-type-info;
+    }
+
+    &--bordercolor--warning {
+        border-color: $u-type-warning;
+    }
+}
+
+.u-divider-text {
+    white-space: nowrap;
+    padding: 0 16rpx;
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+}
+</style>