@netang/quasar 0.0.25 → 0.0.28

package/components/input-number/index.vue

@@ -1,40 +1,77 @@
 <template>
     <q-input
         class="n-input-number"
+        :class="{
+            'n-input-number--center': center,
+        }"
+        :disable="disable"
+        :readonly="readonly"
         v-model="currentValue"
-        @update:model-value="onInput"
         @blur="onBlur"
-        v-on="$listeners"
         v-bind="$attrs"
     >
-        <template #prepend>
+        <!-- 内部前置插槽 -->
+        <template #prepend v-if="controls && center">
+
+            <!-- 减少按钮 -->
             <q-btn
+                class="n-input-number__left"
                 color="default"
                 icon="remove"
                 flat
                 dense
-                :disable="minusDisabled"
+                :disable="currentDisableMinus"
                 @click="onChange('minus')"
-                @overlimit="onOverlimit('minus')"
             />
+
+            <!-- 内部前置插槽 -->
+            <slot name="prepend" />
+
         </template>
-        <template #append>
+
+        <!-- 内部后置插槽 -->
+        <template #append v-if="controls">
+
+            <!-- 内部后置插槽 -->
+            <slot name="append" />
+
+            <!-- 减少按钮 -->
+            <q-btn
+                color="default"
+                icon="remove"
+                flat
+                dense
+                :disable="currentDisableMinus"
+                @click="onChange('minus')"
+                v-if="! center"
+            />
+
+            <!-- 增加按钮 -->
             <q-btn
+                class="n-input-number__right"
                 color="default"
                 icon="add"
                 flat
                 dense
-                :disable="plusDisabled"
+                :disable="currentDisablePlus"
                 @click="onChange('plus')"
-                @overlimit="onOverlimit('plus')"
             />
+
+        </template>
+
+        <!-- 插槽 -->
+        <template
+            v-for="slotName in slotNames"
+            v-slot:[slotName]
+        >
+            <slot :name="slotName" />
         </template>
+
     </q-input>
 </template>
 
 <script>
 import { computed, ref, watch } from 'vue'
-import { formatNumbers, addNumber } from './number'
 
 export default {
 
@@ -54,56 +91,41 @@ export default {
         // 最小值
         min: {
             type: [Number, String],
-            default: 1,
+            default: 0,
         },
         // 最大值
         max: {
             type: [Number, String],
             default: Infinity,
         },
-        // 初始值，当 v-model 为空时生效
-        defaultValue: {
-            type: [Number, String],
-            default: 1,
-        },
-        // 步长，每次点击时改变的值
-        step: {
-            type: [Number, String],
-            default: 1,
-        },
-        // 固定显示的小数位数
+        // 步长, 每次点击时改变的值(默认为 1, centToYuan开启后默认为 100)
+        step: [Number, String],
+        // 小数位数(默认为 0, centToYuan开启后默认为 2)
         decimalLength: [Number, String],
-        // 是否只允许输入整数
-        integer: {
-            type: Boolean,
-            default: true,
-        },
-        // 是否禁用步进器
-        disabled: Boolean,
-        // 是否禁用增加按钮
-        disablePlus: Boolean,
+        // 是否禁用
+        disable: Boolean,
+        // 是否只读
+        readonly: Boolean,
         // 是否禁用减少按钮
         disableMinus: Boolean,
+        // 是否禁用增加按钮
+        disablePlus: Boolean,
         // 是否禁用输入框
         disableInput: Boolean,
-        // 是否开启异步变更，开启后需要手动控制输入值
-        asyncChange: Boolean,
-        // 是否显示增加按钮
-        showPlus: {
-            type: Boolean,
-            default: true,
-        },
-        // 是否显示减少按钮
-        showMinus: {
-            type: Boolean,
-            default: true,
-        },
-        // 是否允许输入的值为空
-        allowEmpty: Boolean,
-        // 显示文字
-        showText: {
-            type: Boolean,
-            default: true,
+        // 是否使用控制按钮
+        controls: Boolean,
+        // 居中显示
+        center: Boolean,
+        // 不允许输入的值为空
+        noEmpty: Boolean,
+        // 是否为人民币的分转元(值为分, 显示为元)
+        // 如果为 true, 则 min / max / step 的值默认的单位为人民币的分
+        centToYuan: Boolean,
+        // 精度舍入模式(默认: 向下取整)
+        // 参考文档: https://mikemcl.github.io/bignumber.js/#constructor-properties
+        roundMode: {
+            type: Number,
+            default: BigNumber.ROUND_DOWN,
         },
     },
 
@@ -112,9 +134,7 @@ export default {
      */
     emits: [
         'update:modelValue',
-        'change',
         'blur',
-        'overlimit',
         'minus',
         'plus',
     ],
@@ -122,184 +142,370 @@ export default {
     /**
      * 组合式
      */
-    setup(props, { emit }) {
+    setup(props, { emit, slots }) {
 
-        // ==========【数据】============================================================================================
+        // ==========【计算属性】=========================================================================================
 
-        // 当前值
-        const defaultValue = props.modelValue ?? props.defaultValue
-        const value = format(defaultValue)
-        if (! _.isEqual(value, props.modelValue)) {
-            emit('update:modelValue', value)
-        }
-        const currentValue = ref(value)
+        /**
+         * 插槽标识
+         */
+        const slotNames = computed(function() {
 
-        // ==========【计算属性】=========================================================================================
+            if (utils.isValidObject(slots)) {
+
+                // 忽略插槽
+                const ignoreKeys = []
+
+                if (props.controls) {
+                    ignoreKeys.push('append')
+
+                    if (props.center) {
+                        ignoreKeys.push('prepend')
+                    }
+                }
+
+                const keys = Object.keys(slots)
+
+                if (ignoreKeys.length) {
+                    return _.filter(keys, e => ignoreKeys.indexOf(e) === -1)
+                }
+
+                return keys
+            }
+
+            return []
+        })
 
         /**
-         * 是否禁用减少按钮
+         * 当前最小值
          */
-        const minusDisabled = computed(function () {
-            return props.disabled || props.disableMinus || currentValue.value <= +props.min
+        const currentMin = computed(function() {
+            // 格式化数字
+            return formatNumber(props.min, true, true, null)
         })
 
         /**
-         * 是否禁用增加按钮
+         * 当前最大值
          */
-        const plusDisabled = computed(function () {
-            return props.disabled || props.disablePlus || currentValue.value >= +props.max
+        const currentMax = computed(function() {
+
+            // 如果为无限大
+            if (props.max === Infinity) {
+                // 则返回无限大
+                return Infinity
+            }
+
+            // 格式化数字
+            return formatNumber(props.max, true, true, null)
         })
 
-        // ==========【监听数据】=========================================================================================
+        /**
+         * 当前步长(默认为 1, centToYuan开启后默认为 100)
+         */
+        const currentStep = computed(function() {
+
+            // 格式化数字
+            return formatNumber(props.step ?? (props.centToYuan ? 100 : 1), true, true, null)
+        })
 
         /**
-         * 监听值
+         * 当前小数位数(默认为 0, centToYuan开启后默认为 2)
          */
-        watch(()=>props.modelValue, function (val) {
-            if (! _.isEqual(val, currentValue.value)) {
-                currentValue.value = format(val)
+        const currentDecimalLength = computed(function() {
+            return props.decimalLength ?? (props.centToYuan ? 2 : 0)
+        })
+
+        /**
+         * 当前是否禁用减少按钮
+         */
+        const currentDisableMinus = computed(function () {
+
+            // 如果禁用 || 如果只读 || 禁用减少按钮
+            if (props.disable || props.readonly || props.disableMinus) {
+                // 则禁用减少按钮
+                return true
+            }
+
+            // 如果没有当前最小值
+            if (currentMin.value === null) {
+                // 则不禁用减少按钮
+                return false
             }
+
+            // 将当前值转为 BigNumber 类型
+            const val = new BigNumber(currentValue.value)
+
+            // 如果当前值不是有效数字
+            if (! val.isFinite()) {
+                // 则禁用减少按钮
+                return true
+            }
+
+            // 当前值 <= 当前最小值
+            return val.lte(currentMin.value)
         })
 
         /**
-         * 监听当前值
+         * 当前是否禁用增加按钮
          */
-        watch(currentValue, function (val) {
-            emit('update:modelValue', val)
-            emit('change', val)
+        const currentDisablePlus = computed(function () {
+
+            // 如果禁用 || 如果只读 || 禁用增加按钮
+            if (props.disable || props.readonly || props.disablePlus) {
+                // 则禁用增加按钮
+                return true
+            }
+
+            // 如果没有当前最大值
+            if (currentMax.value === null) {
+                // 则不禁用增加按钮
+                return false
+            }
+
+            // 将当前值转为 BigNumber 类型
+            const val = new BigNumber(currentValue.value)
+
+            // 如果当前值不是有效数字
+            if (! val.isFinite()) {
+                // 则禁用减少按钮
+                return true
+            }
+
+            // 当前值 >= 当前最大值
+            return val.gte(currentMax.value)
+        })
+
+        // ==========【数据】============================================================================================
+
+        // 格式化为当前值
+        const currentValue = ref(formatToCurrentValue(props.modelValue, true))
+
+        // 如果当前值 !== 声明值
+        const rawModelValue = formatToModelValue(currentValue.value)
+        if (rawModelValue !== props.modelValue) {
+            // 则更新值
+            emitModelValue(rawModelValue)
+        }
+
+        // ==========【监听数据】=========================================================================================
+
+        /**
+         * 监听声明值
+         */
+        watch(()=>props.modelValue, function (val) {
+
+            // 格式化为当前值
+            val = formatToCurrentValue(val, true)
+
+            // 如果当前值有变化
+            if (val !== currentValue.value) {
+                currentValue.value = val
+            }
         })
 
         /**
-         * 监听其他
+         * 监听 当前最小值 / 当前最大值 / 当前小数位数
          */
-        watch([()=>props.max, ()=>props.min, ()=>props.integer, ()=>props.decimalLength], function () {
-            const val = format(currentValue.value)
-            if (! _.isEqual(val, currentValue.value)) {
+        watch([currentMin, currentMax, currentDecimalLength], function () {
+
+            // 格式化当前值
+            const val = formatToCurrentValue(currentValue.value, false)
+
+            // 如果当前值有变化
+            if (val !== currentValue.value) {
+
+                // 更新当前值
                 currentValue.value = val
+
+                // 更新值
+                emitModelValue(formatToModelValue(val))
             }
         })
 
         // ==========【方法】=============================================================================================
 
         /**
-         * 格式化数字
+         * 更新值
          */
-        function formatNumber(value) {
-            return formatNumbers(String(value), ! props.integer)
+        function emitModelValue(val) {
+            // 更新值
+            emit('update:modelValue', val)
         }
 
         /**
-         * 格式化
+         * 格式化数字
          */
-        function format(value) {
-            if (props.allowEmpty && value === '') {
-                return value
-            }
+        function formatNumber(val, isCentToYuan, isToNumber, defaultValue) {
+
+            // 转为 BigNumber 类型
+            val = new BigNumber(val)
+
+            // 如果为有效数字
+            if (val.isFinite()) {
+
+                // 如果不为 0
+                if (! val.isZero()) {
 
-            value = formatNumber(value)
+                    // 如果为人民币的分转元
+                    if (props.centToYuan && isCentToYuan) {
+                        // 除 100
+                        val = val.dividedBy(100)
+                    }
 
-            // format range
-            value = value === '' ? 0 : +value
-            value = isNaN(value) ? props.min : value
-            value = Math.max(Math.min(props.max, value), props.min)
+                    // 如果设置了小数位数
+                    if (currentDecimalLength.value) {
+                        // 将值舍入 xx 位精度(如 68.345 -> 68.34)
+                        val = val.dp(currentDecimalLength.value, props.roundMode)
 
-            // 格式化小数位数
-            if (! _.isNil(props.decimalLength)) {
-                value = value.toFixed(props.decimalLength)
+                    // 否则值为整数
+                    } else {
+                        // 将值取整
+                        val = val.integerValue(props.roundMode)
+                    }
+                }
+
+                // 转为数字
+                return isToNumber ? val.toNumber() : val
             }
 
-            return value
+            return defaultValue
         }
 
         /**
-         * 输入触发
+         * 格式化为更新值
          */
-        function onInput(value) {
+        function formatToModelValue(value) {
 
-            let formatted = formatNumber(value)
+            // 转为 BigNumber 类型
+            let val = new BigNumber(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)}`
+            // 如果不是有效数字
+            if (! val.isFinite()) {
+
+                // 返回当前值
+                return value
             }
 
-            // prefer number type
-            if (formatted === String(+formatted)) {
-                formatted = +formatted
+            // 如果为人民币的分转元
+            if (props.centToYuan) {
+                // 乘以 100
+                val = val.times(100)
+                    // 再取整(分必须是整数)
+                    .integerValue(props.roundMode)
             }
 
-            emitChange(formatted)
+            // 将值转为数字
+            return val.toNumber()
         }
 
         /**
-         * 失去焦点触发
+         * 格式化值
          */
-        function onBlur(value) {
-            value = format(value)
-            emitChange(value)
-            emit('blur', value)
-        }
+        function formatToCurrentValue(value, isCentToYuan) {
 
-        /**
-         * 提交改变值
-         */
-        function emitChange(value) {
+            // 格式化数字
+            const val = formatNumber(value, isCentToYuan, false, false)
+
+            // 如果为有效数字
+            if (val !== false) {
+
+                // 如果值 >= 最大值
+                if (currentMax.value !== null && val.gte(currentMax.value)) {
+
+                    // 返回最大值
+                    return currentMax.value
+                }
+
+                // 如果值 <= 最小值
+                if (currentMin.value !== null && val.lte(currentMin.value)) {
 
-            // 是否开启异步变更，开启后需要手动控制输入值
-            if (props.asyncChange) {
-                emit('input', value)
-                emit('change', value)
-                return
+                    // 返回最小值
+                    return currentMin.value
+                }
+
+                // 将值转为数字
+                return val.toNumber()
             }
 
-            currentValue.value = value
+            if (
+                // 如果不允许值为空
+                props.noEmpty
+                // 如果有最小值
+                && currentMin.value !== null
+            ) {
+                // 则返回最小值
+                return currentMin.value
+            }
+
+            return ''
         }
 
         /**
-         * 改变值
+         * 失去焦点触发
          */
-        function onChange(type) {
+        function onBlur() {
 
-            if (props[`${type}Disabled`]) {
-                emit('overlimit', type)
-                return
-            }
+            // 格式化当前值
+            let val = formatToCurrentValue(currentValue.value, false)
 
-            const diff = type === 'minus' ? -props.step : +props.step
+            // 如果当前值有变动
+            if (val !== currentValue.value) {
 
-            const value = format(addNumber(+currentValue.value, diff))
+                // 更新当前值
+                currentValue.value = val
 
-            emitChange(value)
-            emit(type)
+                // 将当前值转为声明值
+                val = formatToModelValue(val)
+
+                // 更新值
+                emitModelValue(val)
+
+                // 失去焦点触发
+                emit('blur', val)
+            }
         }
 
         /**
-         * 点击不可用的按钮时触发
+         * 改变值
          */
-        function onOverlimit(type) {
-            emit('overlimit', type)
+        function onChange(type) {
+
+            // 格式化当前值
+            const val = formatToCurrentValue(
+                new BigNumber(+currentValue.value)
+                    // 增加 / 减少
+                    .plus(type === 'minus' ? -currentStep.value : +currentStep.value)
+                    .toNumber()
+                , false
+            )
+
+            // 如果当前值有变动
+            if (val !== currentValue.value) {
+
+                // 更新当前值
+                currentValue.value = val
+
+                // 更新值
+                emitModelValue(formatToModelValue(val))
+            }
         }
 
         // ==========【返回】=============================================================================================
 
         return {
+            // 插槽标识
+            slotNames,
             // 当前值
             currentValue,
+            // 当前是否禁用减少按钮
+            currentDisableMinus,
+            // 当前是否禁用增加按钮
+            currentDisablePlus,
 
-            // 是否禁用减少按钮
-            minusDisabled,
-            // 是否禁用增加按钮
-            plusDisabled,
-
-            // 输入触发
-            onInput,
             // 失去焦点触发
             onBlur,
             // 改变值
             onChange,
-            // 点击不可用的按钮时触发
-            onOverlimit,
         }
     }
 }
@@ -309,16 +515,29 @@ export default {
 @import "@/assets/sass/var.scss";
 
 .n-input-number {
-    &.q-field {
-        &--outlined {
-            .q-field__control {
-                padding: 0 4px !important;
-                .q-field__native {
-                    text-align: center;
+
+    // 居中显示
+    &--center {
+        &.q-field {
+            &--outlined {
+                .q-field__control {
+                    .q-field__native {
+                        text-align: center;
+                    }
                 }
             }
         }
     }
+
+    // 左边按钮
+    &__left {
+        margin-left: -8px;
+    }
+
+    // 右边按钮
+    &__right {
+        margin-right: -8px;
+    }
 }
 </style>