uview-pro 0.0.1

package/components/u-notice-bar/u-notice-bar.vue

@@ -0,0 +1,274 @@
+<template>
+    <view class="u-notice-bar-wrap" v-if="isShow" :style="{ borderRadius: props.borderRadius + 'rpx' }">
+        <block v-if="props.mode === 'horizontal' && props.isCircular">
+            <u-row-notice
+                :type="props.type"
+                :color="props.color"
+                :bgColor="props.bgColor"
+                :list="props.list"
+                :volumeIcon="props.volumeIcon"
+                :moreIcon="props.moreIcon"
+                :volumeSize="props.volumeSize"
+                :closeIcon="props.closeIcon"
+                :mode="props.mode"
+                :fontSize="props.fontSize"
+                :speed="props.speed"
+                :playState="props.playState"
+                :padding="props.padding"
+                @getMore="getMore"
+                @close="close"
+                @click="click"
+            ></u-row-notice>
+        </block>
+        <block v-if="props.mode === 'vertical' || (props.mode === 'horizontal' && !props.isCircular)">
+            <u-column-notice
+                :type="props.type"
+                :color="props.color"
+                :bgColor="props.bgColor"
+                :list="props.list"
+                :volumeIcon="props.volumeIcon"
+                :moreIcon="props.moreIcon"
+                :closeIcon="props.closeIcon"
+                :mode="props.mode"
+                :volumeSize="props.volumeSize"
+                :disable-touch="props.disableTouch"
+                :fontSize="props.fontSize"
+                :duration="props.duration"
+                :playState="props.playState"
+                :padding="props.padding"
+                @getMore="getMore"
+                @close="close"
+                @click="click"
+                @end="end"
+            ></u-column-notice>
+        </block>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+// 组件名称声明
+defineOptions({ name: 'u-notice-bar' });
+
+/**
+ * noticeBar 滚动通知
+ * @description 该组件用于滚动通告场景，有多种模式可供选择
+ * @tutorial https://www.uviewui.com/components/noticeBar.html
+ * @property {Array} list 滚动内容，数组形式，见上方说明
+ * @property {String} type 显示的主题（默认warning）
+ * @property {Boolean} volumeIcon 是否显示小喇叭图标（默认true）
+ * @property {Boolean} moreIcon 是否显示右边的向右箭头（默认false）
+ * @property {Boolean} closeIcon 是否显示关闭图标（默认false）
+ * @property {Boolean} autoplay 是否自动播放（默认true）
+ * @property {String} color 文字颜色
+ * @property {String|Number} bgColor 背景颜色
+ * @property {String} mode 滚动模式（默认horizontal）
+ * @property {Boolean} show 是否显示（默认true）
+ * @property {String|Number} fontSize 字体大小，单位rpx（默认28）
+ * @property {String|Number} volumeSize 左边喇叭的大小（默认34）
+ * @property {String|Number} duration 滚动周期时长，只对步进模式有效，横向衔接模式无效，单位ms（默认2000）
+ * @property {String|Number} speed 水平滚动时的滚动速度，即每秒移动多少距离，只对水平衔接方式有效，单位rpx（默认160）
+ * @property {Boolean} isCircular mode为horizontal时，指明是否水平衔接滚动（默认true）
+ * @property {String} playState 播放状态，play - 播放，paused - 暂停（默认play）
+ * @property {String|Number} borderRadius 通知栏圆角（默认为0）
+ * @property {String|Number} padding 内边距，字符串，与普通的内边距css写法一致（默认"18rpx 24rpx"）
+ * @property {Boolean} noListHidden 列表为空时，是否显示组件（默认false）
+ * @property {Boolean} disableTouch 是否禁止通过手动滑动切换通知，只有mode = vertical，或者mode = horizontal且isCircular = false时有效（默认true）
+ * @event {Function} click 点击通告文字触发，只有mode = vertical，或者mode = horizontal且isCircular = false时有效
+ * @event {Function} close 点击右侧关闭图标触发
+ * @event {Function} getMore 点击右侧向右图标触发
+ * @event {Function} end 列表的消息每次被播放一个周期时触发，只有mode = vertical，或者mode = horizontal且isCircular = false时有效
+ * @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
+ */
+
+const props = defineProps({
+    /** 滚动内容，数组形式 */
+    list: {
+        type: Array as () => string[],
+        default: () => []
+    },
+    /** 显示的主题，success|error|primary|info|warning */
+    type: {
+        type: String,
+        default: 'warning'
+    },
+    /** 是否显示左侧的音量图标 */
+    volumeIcon: {
+        type: Boolean,
+        default: true
+    },
+    /** 音量喇叭的大小 */
+    volumeSize: {
+        type: [Number, String],
+        default: 34
+    },
+    /** 是否显示右侧的右箭头图标 */
+    moreIcon: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示右侧的关闭图标 */
+    closeIcon: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否自动播放 */
+    autoplay: {
+        type: Boolean,
+        default: true
+    },
+    /** 文字颜色，各图标也会使用文字颜色 */
+    color: {
+        type: String,
+        default: ''
+    },
+    /** 背景颜色 */
+    bgColor: {
+        type: String,
+        default: ''
+    },
+    /** 滚动方向，horizontal-水平滚动，vertical-垂直滚动 */
+    mode: {
+        type: String,
+        default: 'horizontal'
+    },
+    /** 是否显示 */
+    show: {
+        type: Boolean,
+        default: true
+    },
+    /** 字体大小，单位rpx */
+    fontSize: {
+        type: [Number, String],
+        default: 28
+    },
+    /** 滚动一个周期的时间长，单位ms */
+    duration: {
+        type: [Number, String],
+        default: 2000
+    },
+    /** 水平滚动时的滚动速度，即每秒滚动多少rpx */
+    speed: {
+        type: [Number, String],
+        default: 160
+    },
+    /** 水平滚动时，是否采用衔接形式滚动 */
+    isCircular: {
+        type: Boolean,
+        default: true
+    },
+    /** 播放状态，play-播放，paused-暂停 */
+    playState: {
+        type: String,
+        default: 'play'
+    },
+    /** 是否禁止用手滑动切换 */
+    disableTouch: {
+        type: Boolean,
+        default: true
+    },
+    /** 滚动通知设置圆角 */
+    borderRadius: {
+        type: [Number, String],
+        default: 0
+    },
+    /** 通知的边距 */
+    padding: {
+        type: [Number, String],
+        default: '18rpx 24rpx'
+    },
+    /** list列表为空时，是否显示组件 */
+    noListHidden: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const emit = defineEmits<{ (e: 'click', index: number): void; (e: 'close'): void; (e: 'getMore'): void; (e: 'end'): void }>();
+
+/**
+ * 是否显示组件
+ * 如果设置show为false，或者设置了noListHidden为true，且list长度又为零的话，隐藏组件
+ */
+const isShow = computed(() => {
+    if (!props.show || (props.noListHidden && props.list.length === 0)) return false;
+    return true;
+});
+
+/**
+ * 点击通告栏
+ */
+function click(index: number) {
+    emit('click', index);
+}
+
+/**
+ * 点击关闭按钮
+ */
+function close() {
+    emit('close');
+}
+
+/**
+ * 点击更多箭头按钮
+ */
+function getMore() {
+    emit('getMore');
+}
+
+/**
+ * 滚动一个周期结束，只对垂直，或者水平步进形式有效
+ */
+function end() {
+    emit('end');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+.u-notice-bar-wrap {
+    overflow: hidden;
+}
+.u-notice-bar {
+    padding: 18rpx 24rpx;
+    overflow: hidden;
+}
+.u-direction-row {
+    @include vue-flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.u-left-icon {
+    @include vue-flex;
+    align-items: center;
+}
+.u-notice-box {
+    flex: 1;
+    @include vue-flex;
+    overflow: hidden;
+    margin-left: 12rpx;
+}
+.u-right-icon {
+    margin-left: 12rpx;
+    @include vue-flex;
+    align-items: center;
+}
+.u-notice-content {
+    line-height: 1;
+    white-space: nowrap;
+    font-size: 26rpx;
+    animation: u-loop-animation 10s linear infinite both;
+    text-align: right;
+    // 这一句很重要，为了能让滚动左右连接起来
+    padding-left: 100%;
+}
+@keyframes u-loop-animation {
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+    100% {
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+</style>

package/components/u-number-box/u-number-box.vue

@@ -0,0 +1,344 @@
+<template>
+    <view class="u-numberbox">
+        <view
+            class="u-icon-minus"
+            @touchstart.stop.prevent="btnTouchStart('minus')"
+            @touchend.stop.prevent="clearTimer"
+            :class="{ 'u-icon-disabled': disabled || inputVal <= min }"
+            :style="{
+                background: bgColor,
+                height: inputHeight + 'rpx',
+                color: color
+            }"
+        >
+            <u-icon name="minus" :size="size"></u-icon>
+        </view>
+        <input
+            :disabled="disabledInput || disabled"
+            :cursor-spacing="getCursorSpacing"
+            :class="{ 'u-input-disabled': disabled }"
+            v-model="inputVal"
+            class="u-number-input"
+            @blur="onBlur"
+            @focus="onFocus"
+            type="digit"
+            :style="{
+                color: color,
+                fontSize: size + 'rpx',
+                background: bgColor,
+                height: inputHeight + 'rpx',
+                width: inputWidth + 'rpx'
+            }"
+        />
+        <view
+            class="u-icon-plus"
+            @touchstart.stop.prevent="btnTouchStart('plus')"
+            @touchend.stop.prevent="clearTimer"
+            :class="{ 'u-icon-disabled': disabled || inputVal >= max }"
+            :style="{
+                background: bgColor,
+                height: inputHeight + 'rpx',
+                color: color
+            }"
+        >
+            <u-icon name="plus" :size="size"></u-icon>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, nextTick } from 'vue';
+
+defineOptions({
+    name: 'u-number-box'
+});
+
+/**
+ * numberBox 步进器
+ * @description 该组件一般用于商城购物选择物品数量的场景。注意：该输入框只能输入大于或等于0的整数，不支持小数输入
+ * @tutorial https://www.uviewui.com/components/numberBox.html
+ * @property {Number} modelValue 输入框初始值（默认1）
+ * @property {String} bg-color 输入框和按钮的背景颜色（默认#F2F3F5）
+ * @property {Number} min 用户可输入的最小值（默认0）
+ * @property {Number} max 用户可输入的最大值（默认99999）
+ * @property {Number} step 步长，每次加或减的值（默认1）
+ * @property {Boolean} disabled 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false）
+ * @property {Boolean} disabled-input 是否禁止输入框手动输入值（默认false）
+ * @property {Boolean} positive-integer 是否只能输入正整数（默认true）
+ * @property {String | Number} size 输入框文字和按钮字体大小，单位rpx（默认26）
+ * @property {String} color 输入框文字和加减按钮图标的颜色（默认#323233）
+ * @property {String | Number} input-width 输入框宽度，单位rpx（默认80）
+ * @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50）
+ * @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
+ * @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
+ * @property {String | Number} press-time 开启长按触发后，每触发一次需要多久，单位ms(默认250)
+ * @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200）
+ * @event {Function} change 输入框内容发生变化时触发，对象形式
+ * @event {Function} blur 输入框失去焦点时触发，对象形式
+ * @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式
+ * @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式
+ * @example <u-number-box :min="1" :max="100"></u-number-box>
+ */
+const props = defineProps({
+    /** 输入框初始值（默认1） */
+    modelValue: { type: Number, default: 1 },
+    /** 输入框和按钮的背景颜色（默认#F2F3F5） */
+    bgColor: { type: String, default: '#F2F3F5' },
+    /** 用户可输入的最小值（默认0） */
+    min: { type: Number, default: 0 },
+    /** 用户可输入的最大值（默认99999） */
+    max: { type: Number, default: 99999 },
+    /** 步长，每次加或减的值（默认1） */
+    step: { type: Number, default: 1 },
+    /** 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false） */
+    disabled: { type: Boolean, default: false },
+    /** 输入框文字和按钮字体大小，单位rpx（默认26） */
+    size: { type: [Number, String], default: 26 },
+    /** 输入框文字和加减按钮图标的颜色（默认#323233） */
+    color: { type: String, default: '#323233' },
+    /** 输入框宽度，单位rpx（默认80） */
+    inputWidth: { type: [Number, String], default: 80 },
+    /** 输入框和按钮的高度，单位rpx（默认50） */
+    inputHeight: { type: [Number, String], default: 50 },
+    /** 事件回调时用以区分当前发生变化的是哪个输入框 */
+    index: { type: [Number, String], default: '' },
+    /** 是否禁止输入框手动输入值（默认false） */
+    disabledInput: { type: Boolean, default: false },
+    /** 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认100） */
+    cursorSpacing: { type: [Number, String], default: 100 },
+    /** 是否开启长按连续递增或递减(默认true) */
+    longPress: { type: Boolean, default: true },
+    /** 开启长按触发后，每触发一次需要多久，单位ms(默认250) */
+    pressTime: { type: [Number, String], default: 250 },
+    /** 是否只能输入大于或等于0的整数(正整数)（默认true） */
+    positiveInteger: { type: Boolean, default: true }
+});
+const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus', 'minus', 'plus']);
+
+// 响应式变量
+const inputVal = ref<number>(props.modelValue); // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
+const timer = ref<any>(null); // 用作长按的定时器
+const changeFromInner = ref(false); // 值发生变化，是来自内部还是外部
+const innerChangeTimer = ref<any>(null); // 内部定时器
+
+// 计算属性
+const getCursorSpacing = computed(() => {
+    const spacing = typeof props.cursorSpacing === 'string' ? Number(props.cursorSpacing) : props.cursorSpacing;
+    return Number(uni.upx2px(spacing));
+});
+
+// 监听外部 value 变化
+watch(
+    () => props.modelValue,
+    (v1, v2) => {
+        // 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误
+        if (!changeFromInner.value) {
+            inputVal.value = v1;
+            // 延时保证 changeFromInner 在运行周期最后处重置
+            // 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
+            // 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
+            // 将changeFromInner设置为false
+            nextTick(() => {
+                changeFromInner.value = false;
+            });
+        }
+    }
+);
+
+// 监听 inputVal 变化
+watch(inputVal, (v1, v2) => {
+    // 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
+    if (typeof v1 !== 'number' || isNaN(v1)) return;
+    let value = 0;
+    // 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
+    let tmp = typeof v1 === 'number' && !isNaN(v1);
+    if (tmp && v1 >= props.min && v1 <= props.max) value = Number(v1);
+    else value = Number(v2);
+    // 判断是否只能输入大于等于0的整数
+    if (props.positiveInteger) {
+        // 小于0，或者带有小数点，
+        if (value < 0 || String(v1).indexOf('.') !== -1) {
+            value = Number(v2);
+            // 双向绑定input的值，必须要使用$nextTick修改显示的值
+            nextTick(() => {
+                inputVal.value = value;
+            });
+        }
+    }
+    // 发出change事件
+    handleChange(value, 'change');
+});
+
+function btnTouchStart(callback: 'minus' | 'plus') {
+    // 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
+    if (callback === 'minus') minus();
+    else plus();
+    // 如果没开启长按功能，直接返回
+    if (!props.longPress) return;
+    // 再次清空定时器，防止重复注册定时器
+    clearInterval(timer.value);
+    timer.value = setInterval(() => {
+        // 执行加或减函数
+        if (callback === 'minus') minus();
+        else plus();
+    }, Number(props.pressTime));
+}
+
+function clearTimer() {
+    // 清除长按定时器
+    nextTick(() => {
+        clearInterval(timer.value);
+        timer.value = null;
+    });
+}
+
+function minus() {
+    // 执行减法操作
+    computeVal('minus');
+}
+function plus() {
+    // 执行加法操作
+    computeVal('plus');
+}
+
+// 为了保证小数相加减出现精度溢出的问题
+function calcPlus(num1: number, num2: number) {
+    let baseNum, baseNum1, baseNum2;
+    try {
+        baseNum1 = num1.toString().split('.')[1].length;
+    } catch (e) {
+        baseNum1 = 0;
+    }
+    try {
+        baseNum2 = num2.toString().split('.')[1].length;
+    } catch (e) {
+        baseNum2 = 0;
+    }
+    baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
+    let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; //精度
+    return Number(((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision));
+}
+
+// 为了保证小数相加减出现精度溢出的问题
+function calcMinus(num1: number, num2: number) {
+    let baseNum, baseNum1, baseNum2;
+    try {
+        baseNum1 = num1.toString().split('.')[1].length;
+    } catch (e) {
+        baseNum1 = 0;
+    }
+    try {
+        baseNum2 = num2.toString().split('.')[1].length;
+    } catch (e) {
+        baseNum2 = 0;
+    }
+    baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
+    let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
+    return Number(((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision));
+}
+
+// 处理加减按钮点击逻辑
+function computeVal(type: 'minus' | 'plus') {
+    uni.hideKeyboard();
+    if (props.disabled) return;
+    let value = 0;
+    // 减
+    if (type === 'minus') {
+        value = calcMinus(Number(inputVal.value), props.step);
+    } else if (type === 'plus') {
+        value = calcPlus(Number(inputVal.value), props.step);
+    }
+    // 判断是否小于最小值和大于最大值
+    if (value < props.min || value > props.max) return;
+    inputVal.value = value;
+    handleChange(value, type);
+}
+
+// 处理用户手动输入的情况
+function onBlur(event: any) {
+    let val = 0;
+    let value = event.detail.value;
+    // 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
+    // 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
+    if (!/(^\d+$)/.test(value) || value[0] == 0) val = props.min;
+    else val = +value;
+    if (val > props.max) val = props.max;
+    else if (val < props.min) val = props.min;
+    nextTick(() => {
+        inputVal.value = val;
+    });
+    handleChange(val, 'blur');
+}
+
+// 输入框获得焦点事件
+function onFocus() {
+    emit('focus');
+}
+
+// 处理值变化的统一逻辑
+function handleChange(value: number, type: 'update:modelValue' | 'change' | 'blur' | 'focus' | 'minus' | 'plus') {
+    if (props.disabled) return;
+    // 清除定时器，避免造成混乱
+    if (innerChangeTimer.value) {
+        clearTimeout(innerChangeTimer.value);
+        innerChangeTimer.value = null;
+    }
+    // 发出input事件，修改通过v-model绑定的值，达到双向绑定的效果
+    changeFromInner.value = true;
+    // 一定时间内，清除changeFromInner标记，否则内部值改变后外部通过程序修改value值，将会无效
+    innerChangeTimer.value = setTimeout(() => {
+        changeFromInner.value = false;
+    }, 150);
+    emit('update:modelValue', Number(value));
+    emit(type, {
+        // 转为Number类型
+        value: Number(value),
+        index: props.index
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-numberbox {
+    display: inline-flex;
+    align-items: center;
+}
+
+.u-number-input {
+    position: relative;
+    text-align: center;
+    padding: 0;
+    margin: 0 6rpx;
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.u-icon-plus,
+.u-icon-minus {
+    width: 60rpx;
+    @include vue-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.u-icon-plus {
+    border-radius: 0 8rpx 8rpx 0;
+}
+
+.u-icon-minus {
+    border-radius: 8rpx 0 0 8rpx;
+}
+
+.u-icon-disabled {
+    color: #c8c9cc !important;
+    background: #f7f8fa !important;
+}
+
+.u-input-disabled {
+    color: #c8c9cc !important;
+    background-color: #f2f3f5 !important;
+}
+</style>