@netang/quasar 0.0.20

package/components/input-number/index.vue

@@ -0,0 +1,324 @@
+<template>
+    <q-input
+        class="n-input-number"
+        v-model="currentValue"
+        @update:model-value="onInput"
+        @blur="onBlur"
+        v-on="$listeners"
+        v-bind="$attrs"
+    >
+        <template #prepend>
+            <q-btn
+                color="default"
+                icon="remove"
+                flat
+                dense
+                :disable="minusDisabled"
+                @click="onChange('minus')"
+                @overlimit="onOverlimit('minus')"
+            />
+        </template>
+        <template #append>
+            <q-btn
+                color="default"
+                icon="add"
+                flat
+                dense
+                :disable="plusDisabled"
+                @click="onChange('plus')"
+                @overlimit="onOverlimit('plus')"
+            />
+        </template>
+    </q-input>
+</template>
+
+<script>
+import { computed, ref, watch } from 'vue'
+import { formatNumbers, addNumber } from './number'
+
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NInputNumber',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 值
+        modelValue: {
+            required: false
+        },
+        // 最小值
+        min: {
+            type: [Number, String],
+            default: 1,
+        },
+        // 最大值
+        max: {
+            type: [Number, String],
+            default: Infinity,
+        },
+        // 初始值，当 v-model 为空时生效
+        defaultValue: {
+            type: [Number, String],
+            default: 1,
+        },
+        // 步长，每次点击时改变的值
+        step: {
+            type: [Number, String],
+            default: 1,
+        },
+        // 固定显示的小数位数
+        decimalLength: [Number, String],
+        // 是否只允许输入整数
+        integer: {
+            type: Boolean,
+            default: true,
+        },
+        // 是否禁用步进器
+        disabled: Boolean,
+        // 是否禁用增加按钮
+        disablePlus: Boolean,
+        // 是否禁用减少按钮
+        disableMinus: Boolean,
+        // 是否禁用输入框
+        disableInput: Boolean,
+        // 是否开启异步变更，开启后需要手动控制输入值
+        asyncChange: Boolean,
+        // 是否显示增加按钮
+        showPlus: {
+            type: Boolean,
+            default: true,
+        },
+        // 是否显示减少按钮
+        showMinus: {
+            type: Boolean,
+            default: true,
+        },
+        // 是否允许输入的值为空
+        allowEmpty: Boolean,
+        // 显示文字
+        showText: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+        'change',
+        'blur',
+        'overlimit',
+        'minus',
+        'plus',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit }) {
+
+        // ==========【数据】============================================================================================
+
+        // 当前值
+        const defaultValue = props.modelValue ?? props.defaultValue
+        const value = format(defaultValue)
+        if (! _.isEqual(value, props.modelValue)) {
+            emit('update:modelValue', value)
+        }
+        const currentValue = ref(value)
+
+        // ==========【计算属性】=========================================================================================
+
+        /**
+         * 是否禁用减少按钮
+         */
+        const minusDisabled = computed(function () {
+            return props.disabled || props.disableMinus || currentValue.value <= +props.min
+        })
+
+        /**
+         * 是否禁用增加按钮
+         */
+        const plusDisabled = computed(function () {
+            return props.disabled || props.disablePlus || currentValue.value >= +props.max
+        })
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听值
+         */
+        watch(()=>props.modelValue, function (val) {
+            if (! _.isEqual(val, currentValue.value)) {
+                currentValue.value = format(val)
+            }
+        })
+
+        /**
+         * 监听当前值
+         */
+        watch(currentValue, function (val) {
+            emit('update:modelValue', val)
+            emit('change', val)
+        })
+
+        /**
+         * 监听其他
+         */
+        watch([()=>props.max, ()=>props.min, ()=>props.integer, ()=>props.decimalLength], function () {
+            const val = format(currentValue.value)
+            if (! _.isEqual(val, currentValue.value)) {
+                currentValue.value = val
+            }
+        })
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 格式化数字
+         */
+        function formatNumber(value) {
+            return formatNumbers(String(value), ! props.integer)
+        }
+
+        /**
+         * 格式化
+         */
+        function format(value) {
+            if (props.allowEmpty && value === '') {
+                return value
+            }
+
+            value = formatNumber(value)
+
+            // format range
+            value = value === '' ? 0 : +value
+            value = isNaN(value) ? props.min : value
+            value = Math.max(Math.min(props.max, value), props.min)
+
+            // 格式化小数位数
+            if (! _.isNil(props.decimalLength)) {
+                value = value.toFixed(props.decimalLength)
+            }
+
+            return value
+        }
+
+        /**
+         * 输入触发
+         */
+        function onInput(value) {
+
+            let formatted = formatNumber(value)
+
+            // limit max decimal length
+            if (! _.isNil(props.decimalLength) && formatted.indexOf('.') !== -1) {
+                const pair = utils.split(formatted, '.')
+                formatted = `${pair[0]}.${pair[1].slice(0, props.decimalLength)}`
+            }
+
+            // prefer number type
+            if (formatted === String(+formatted)) {
+                formatted = +formatted
+            }
+
+            emitChange(formatted)
+        }
+
+        /**
+         * 失去焦点触发
+         */
+        function onBlur(value) {
+            value = format(value)
+            emitChange(value)
+            emit('blur', value)
+        }
+
+        /**
+         * 提交改变值
+         */
+        function emitChange(value) {
+
+            // 是否开启异步变更，开启后需要手动控制输入值
+            if (props.asyncChange) {
+                emit('input', value)
+                emit('change', value)
+                return
+            }
+
+            currentValue.value = value
+        }
+
+        /**
+         * 改变值
+         */
+        function onChange(type) {
+
+            if (props[`${type}Disabled`]) {
+                emit('overlimit', type)
+                return
+            }
+
+            const diff = type === 'minus' ? -props.step : +props.step
+
+            const value = format(addNumber(+currentValue.value, diff))
+
+            emitChange(value)
+            emit(type)
+        }
+
+        /**
+         * 点击不可用的按钮时触发
+         */
+        function onOverlimit(type) {
+            emit('overlimit', type)
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 当前值
+            currentValue,
+
+            // 是否禁用减少按钮
+            minusDisabled,
+            // 是否禁用增加按钮
+            plusDisabled,
+
+            // 输入触发
+            onInput,
+            // 失去焦点触发
+            onBlur,
+            // 改变值
+            onChange,
+            // 点击不可用的按钮时触发
+            onOverlimit,
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/sass/var.scss";
+
+.n-input-number {
+    &.q-field {
+        &--outlined {
+            .q-field__control {
+                padding: 0 4px !important;
+                .q-field__native {
+                    text-align: center;
+                }
+            }
+        }
+    }
+}
+</style>
+

package/components/input-number/number.js

@@ -0,0 +1,67 @@
+/**
+ * 删除前后字符
+ * @param {string} value
+ * @param {string} char
+ * @param {RegExp} regExp
+ * @returns {string}
+ */
+function trimExtraChar(value, char, regExp) {
+    const index = value.indexOf(char)
+    let prefix = ''
+
+    if (index === -1) {
+        return value
+    }
+
+    if (char === '-' && index !== 0) {
+        return value.slice(0, index)
+    }
+
+    if (char === '.' && value.match(/^(\.|-\.)/)) {
+        prefix = index ? '-0' : '0'
+    }
+
+    return (
+        prefix + value.slice(0, index + 1) + value.slice(index).replace(regExp, '')
+    )
+}
+
+/**
+ * 格式化数字
+ * @param {string} value
+ * @param {boolean} allowDot
+ * @param {boolean} allowMinus
+ * @returns {string}
+ */
+export function formatNumbers(
+    value,
+    allowDot = true,
+    allowMinus = true
+) {
+    if (allowDot) {
+        value = trimExtraChar(value, '.', /\./g)
+    } else {
+        value = value.split('.')[0]
+    }
+
+    if (allowMinus) {
+        value = trimExtraChar(value, '-', /-/g)
+    } else {
+        value = value.replace(/-/, '')
+    }
+
+    const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g
+
+    return value.replace(regExp, '')
+}
+
+/**
+ * 增加数字
+ * @param {number} num1
+ * @param {number} num2
+ * @returns {number}
+ */
+export function addNumber(num1, num2) {
+    const cardinal = 10 ** 10
+    return Math.round((num1 + num2) * cardinal) / cardinal
+}

package/components/input-price-cent/index.vue

@@ -0,0 +1,213 @@
+<template>
+    <q-input
+        v-model="currentValue"
+        @blur="onBlur"
+        v-bind="$attrs"
+    >
+        <template
+            v-for="slotName in slotNames"
+            v-slot:[slotName]
+        >
+            <slot :name="slotName" />
+        </template>
+    </q-input>
+</template>
+
+<script>
+import { computed, ref, watch } from 'vue'
+
+/**
+ * 金额(分转元)
+ */
+export default {
+
+    /**
+     * 标识
+     */
+    name: 'NInputPrice',
+
+    /**
+     * 声明属性
+     */
+    props: {
+        // 值
+        modelValue: [String, Number],
+        // 最小值(分)
+        min: {
+            type: Number,
+            default: 1,
+        },
+        // 最大值(分)
+        max: Number,
+    },
+
+    /**
+     * 声明事件
+     */
+    emits: [
+        'update:modelValue',
+    ],
+
+    /**
+     * 组合式
+     */
+    setup(props, { emit, slots }) {
+
+        // ==========【数据】============================================================================================
+
+        // 当前值
+        const currentValue = ref(formatModelValue())
+
+        // ==========【计算属性】==========================================================================================
+
+        /**
+         * 插槽标识数组
+         */
+        const slotNames = computed(function() {
+            if (utils.isValidObject(slots)) {
+                return Object.keys(slots)
+            }
+            return []
+        })
+
+        /**
+         * 最大值
+         */
+        const maxValue = computed(function() {
+            const maxValue = new BigNumber(props.max)
+            if (maxValue.isFinite()) {
+                return maxValue
+                    .dividedBy(100)
+                    .toNumber()
+            }
+            return null
+        })
+
+        /**
+         * 最小值
+         */
+        const minValue = computed(function() {
+            const maxValue = new BigNumber(props.min)
+            if (maxValue.isFinite()) {
+                return maxValue
+                    .dividedBy(100)
+                    .toNumber()
+            }
+            return null
+        })
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听声明值
+         */
+        watch(()=>props.modelValue, function() {
+            currentValue.value = formatModelValue()
+        })
+
+        // ==========【方法】=============================================================================================
+
+        /**
+         * 格式化传值
+         */
+        function formatModelValue() {
+            // 分转元
+            return utils.price(props.modelValue, '')
+        }
+
+        /**
+         * 提交值
+         */
+        function emitModelValue(newVal) {
+            // 更新值(元转分)
+            emit('update:modelValue', utils.priceYuanToCent(newVal, ''))
+        }
+
+        /**
+         * 失去焦点触发
+         */
+        function onBlur() {
+
+            if (utils.isValidValue(currentValue.value)) {
+
+                let val = new BigNumber(currentValue.value)
+
+                if (val.isFinite()) {
+
+                    // 值是否有更新
+                    let isChange = false
+
+                    if (
+                        // 如果值 > 0
+                        val.isGreaterThan(0)
+                        // 如果值精度 > 2
+                        && val.decimalPlaces() > 2
+                    ) {
+                        // 值有更新
+                        isChange = true
+
+                        // 将元向下舍入 2 位精度(如 68.345 -> 68.34)
+                        val = val.decimalPlaces(2, BigNumber.ROUND_DOWN)
+                    }
+
+                    // 如果值 >= 最大值
+                    if (maxValue.value !== null) {
+                        if (val.isGreaterThanOrEqualTo(maxValue.value)) {
+
+                            // 更新当前值
+                            currentValue.value = maxValue.value
+
+                            // 提交值
+                            emitModelValue(currentValue.value)
+                            return
+                        }
+                    }
+
+                    // 如果值 <= 最小值
+                    if (minValue.value !== null) {
+                        if (val.isLessThanOrEqualTo(minValue.value)) {
+
+                            // 更新当前值
+                            currentValue.value = minValue.value
+
+                            // 提交值
+                            emitModelValue(currentValue.value)
+                            return
+                        }
+                    }
+
+                    // 获取最新值
+                    val = val.toNumber()
+
+                    if (isChange) {
+                        // 更新当前值
+                        currentValue.value = val
+                    }
+
+                    // 提交值
+                    emitModelValue(val)
+                    return
+                }
+            }
+
+            // 更新当前值
+            currentValue.value = ''
+
+            // 提交值
+            emitModelValue(currentValue.value)
+        }
+
+        // ==========【返回】=============================================================================================
+
+        return {
+            // 当前值
+            currentValue,
+            // 插槽标识数组
+            slotNames,
+
+            // 失去焦点触发
+            onBlur,
+        }
+    },
+}
+</script>