|
|
@@ -0,0 +1,323 @@
|
|
|
+<template>
|
|
|
+ <div class="number-range-container">
|
|
|
+ <!-- <div
|
|
|
+ :id="usePrepend ? 'prepend' : ''"
|
|
|
+ :class="{ 'slot-default': slotStyle === 'default', 'slot-pend ': usePrepend }"
|
|
|
+ >
|
|
|
+ <slot name="prepend">
|
|
|
+ </slot>
|
|
|
+ </div> -->
|
|
|
+ <div
|
|
|
+ class="number-range"
|
|
|
+ :class="{
|
|
|
+ 'is-disabled': disabled,
|
|
|
+ 'is-focus': isFocus,
|
|
|
+ 'number-range-left-border-radius-0': usePrepend,
|
|
|
+ 'number-range-right-border-radius-0': useAppend,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <input-number
|
|
|
+ :disabled="disabled"
|
|
|
+ placeholder="最小值"
|
|
|
+ @blur="handleBlur"
|
|
|
+ @focus="handleFocus"
|
|
|
+ @change="handleChangeMinValue"
|
|
|
+ v-model:value="minValue_"
|
|
|
+ v-bind="$attrs"
|
|
|
+ />
|
|
|
+ <div class="to" style="margin: 0 10px">
|
|
|
+ <span>{{ to }}</span>
|
|
|
+ </div>
|
|
|
+ <input-number
|
|
|
+ :disabled="disabled"
|
|
|
+ placeholder="最大值"
|
|
|
+ @blur="handleBlur"
|
|
|
+ @focus="handleFocus"
|
|
|
+ @change="handleChangeMaxValue"
|
|
|
+ v-model:value="maxValue_"
|
|
|
+ v-bind="$attrs"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- <div
|
|
|
+ :id="useAppend ? 'append' : ''"
|
|
|
+ :class="{ 'slot-default': slotStyle === 'default', 'slot-pend ': useAppend }"
|
|
|
+ >
|
|
|
+ <slot name="append">
|
|
|
+ </slot>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup name="numberRange">
|
|
|
+ import { computed, ref, useSlots } from 'vue';
|
|
|
+ import { InputNumber } from 'ant-design-vue';
|
|
|
+ const props = defineProps({
|
|
|
+ value: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [undefined, undefined], // 调用时使用v-model="[min,max]" 绑定
|
|
|
+ },
|
|
|
+ // 是否禁用
|
|
|
+ disabled: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ to: {
|
|
|
+ type: String,
|
|
|
+ default: '至',
|
|
|
+ },
|
|
|
+ // 限制取值范围
|
|
|
+ valueRange: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ validator(val: []) {
|
|
|
+ if (val && val.length > 0) {
|
|
|
+ // @ts-ignore
|
|
|
+ if (val.length !== 2) {
|
|
|
+ throw new Error('请传入长度为2的Number数组');
|
|
|
+ }
|
|
|
+ // @ts-ignore
|
|
|
+ if (typeof val[0] !== 'number' || typeof val[1] !== 'number') {
|
|
|
+ throw new Error('取值范围只接受Number类型,请确认');
|
|
|
+ }
|
|
|
+ // @ts-ignore
|
|
|
+ if (val[1] < val[0]) {
|
|
|
+ throw new Error('valueRange格式须为[最小值,最大值],请确认');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 插槽样式
|
|
|
+ slotStyle: {
|
|
|
+ type: String, // default --异色背景 | plain--无背景色
|
|
|
+ default: 'default',
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const emit = defineEmits(['update:value', 'options-change', 'update:maxValue', 'change']);
|
|
|
+ console.log('props', props);
|
|
|
+ const minValue_ = computed({
|
|
|
+ get() {
|
|
|
+ console.log('props', props.value);
|
|
|
+ return props.value[0] || undefined;
|
|
|
+ },
|
|
|
+ set(value) {
|
|
|
+ // emit('update:minValue', value);
|
|
|
+ emit('update:value', [value, maxValue_.value]);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const maxValue_ = computed({
|
|
|
+ get() {
|
|
|
+ return props.value[1] || undefined;
|
|
|
+ },
|
|
|
+ set(value) {
|
|
|
+ // emit('update:maxValue', value);
|
|
|
+ emit('update:value', [minValue_.value, value]);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const handleChangeMinValue = (value: number) => {
|
|
|
+ console.log('handleChangeMinValue', value);
|
|
|
+ // 非数字空返回null
|
|
|
+ if (isNaN(value)) {
|
|
|
+ emit('update:minValue', null);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 初始化数字精度
|
|
|
+ const newMinValue = value;
|
|
|
+ console.log('handleChangeMinValue', newMinValue);
|
|
|
+ // min > max 交换min max
|
|
|
+ if (
|
|
|
+ typeof newMinValue === 'number' &&
|
|
|
+ parseFloat(String(newMinValue)) > parseFloat(String(maxValue_.value))
|
|
|
+ ) {
|
|
|
+ // 取值范围判定
|
|
|
+ const { min, max } = decideValueRange(Number(maxValue_.value), newMinValue);
|
|
|
+ console.log('handleChangeMinValue1', min, max);
|
|
|
+ // 更新绑定值
|
|
|
+ updateValue(min, max);
|
|
|
+ } else {
|
|
|
+ // 取值范围判定
|
|
|
+ const { min, max } = decideValueRange(newMinValue, Number(maxValue_.value));
|
|
|
+ console.log('handleChangeMinValue2', min, max);
|
|
|
+ // 更新绑定值
|
|
|
+ updateValue(min, max);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleChangeMaxValue = (value: number) => {
|
|
|
+ // 非数字空返回null
|
|
|
+ if (isNaN(value)) {
|
|
|
+ emit('update:maxValue', null);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 初始化数字精度
|
|
|
+ console.log('handleChangeMinValue2', value, minValue_.value);
|
|
|
+ const newMaxValue = value;
|
|
|
+ // max < min 交换min max
|
|
|
+ if (
|
|
|
+ typeof newMaxValue === 'number' &&
|
|
|
+ parseFloat(String(newMaxValue)) < parseFloat(String(minValue_.value))
|
|
|
+ ) {
|
|
|
+ // 取值范围判定
|
|
|
+ const { min, max } = decideValueRange(newMaxValue, Number(minValue_.value));
|
|
|
+ // 更新绑定值
|
|
|
+ updateValue(min, max);
|
|
|
+ } else {
|
|
|
+ // 取值范围判定
|
|
|
+ const { min, max } = decideValueRange(Number(minValue_.value), newMaxValue);
|
|
|
+ // 更新绑定值
|
|
|
+ updateValue(min, max);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 更新数据
|
|
|
+ const updateValue = (min: number, max: number) => {
|
|
|
+ // emit('update:minValue', min);
|
|
|
+ // emit('update:maxValue', max);
|
|
|
+ console.log('updateValue', [min, max]);
|
|
|
+ emit('update:value', [min, max]);
|
|
|
+ emit('options-change', [min, max]);
|
|
|
+ emit('change', [min, max]);
|
|
|
+ console.log('props', [min, max], props);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 取值范围判定
|
|
|
+ const decideValueRange = (min: number, max: number) => {
|
|
|
+ if (props.valueRange && props.valueRange.length > 0) {
|
|
|
+ // @ts-ignore
|
|
|
+ min =
|
|
|
+ min < props.valueRange[0]
|
|
|
+ ? props.valueRange[0]
|
|
|
+ : min > props.valueRange[1]
|
|
|
+ ? props.valueRange[1]
|
|
|
+ : min;
|
|
|
+ // @ts-ignore
|
|
|
+ max = max > props.valueRange[1] ? props.valueRange[1] : max;
|
|
|
+ }
|
|
|
+ return { min, max };
|
|
|
+ };
|
|
|
+
|
|
|
+ // input焦点事件
|
|
|
+ const isFocus = ref();
|
|
|
+
|
|
|
+ const handleFocus = () => {
|
|
|
+ isFocus.value = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleBlur = () => {
|
|
|
+ isFocus.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理数字精度
|
|
|
+ const parsePrecision = (number: number, precision = 0) => {
|
|
|
+ return parseFloat(
|
|
|
+ String(Math.round(number * Math.pow(10, precision)) / Math.pow(10, precision)),
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ // 判断插槽是否被使用
|
|
|
+ // 组件外部使用时插入了
|
|
|
+ // <template #插槽名 >
|
|
|
+ // </template>
|
|
|
+ // 无论template标签内是否插入了内容，均视为已使用该插槽
|
|
|
+ const slots = useSlots();
|
|
|
+ const usePrepend = computed(() => {
|
|
|
+ // 前缀插槽
|
|
|
+ return slots && slots.prepend ? true : false;
|
|
|
+ });
|
|
|
+ const useAppend = computed(() => {
|
|
|
+ // 后缀插槽
|
|
|
+ return slots && slots.append ? true : false;
|
|
|
+ });
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ .number-range-container {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ .slot-pend {
|
|
|
+ white-space: nowrap;
|
|
|
+ color: var(--el-color-info);
|
|
|
+ border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
|
|
|
+ }
|
|
|
+ #prepend {
|
|
|
+ padding: 0 20px;
|
|
|
+ box-shadow: 1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset,
|
|
|
+ 0 1px 0 0 var(--el-input-border-color, var(--el-border-color)) inset,
|
|
|
+ 0 -1px 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
|
|
|
+ border-right: 0;
|
|
|
+ border-top-right-radius: 0;
|
|
|
+ border-bottom-right-radius: 0;
|
|
|
+ }
|
|
|
+ #append {
|
|
|
+ padding: 0 15px;
|
|
|
+ box-shadow: 0 1px 0 0 var(--el-input-border-color, var(--el-border-color)) inset,
|
|
|
+ 0 -1px 0 0 var(--el-input-border-color, var(--el-border-color)) inset,
|
|
|
+ -1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
|
|
|
+ border-left: 0;
|
|
|
+ border-top-left-radius: 0;
|
|
|
+ border-bottom-left-radius: 0;
|
|
|
+ }
|
|
|
+ .slot-default {
|
|
|
+ background-color: var(--el-fill-color-light);
|
|
|
+ }
|
|
|
+
|
|
|
+ .number-range-left-border-radius-0 {
|
|
|
+ border-top-left-radius: 0 !important;
|
|
|
+ border-bottom-left-radius: 0 !important;
|
|
|
+ }
|
|
|
+ .number-range-right-border-radius-0 {
|
|
|
+ border-top-right-radius: 0 !important;
|
|
|
+ border-bottom-right-radius: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number-range {
|
|
|
+ background-color: var(--el-bg-color) !important;
|
|
|
+ box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
|
|
|
+ border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
|
|
|
+ padding: 0 2px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ width: auto;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: var(--el-input-text-color, var(--el-text-color-regular));
|
|
|
+ transition: var(--el-transition-box-shadow);
|
|
|
+ transform: translate3d(0, 0, 0);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .to {
|
|
|
+ margin-top: 1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .is-focus {
|
|
|
+ transition: all 0.3s;
|
|
|
+ box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
|
|
|
+ }
|
|
|
+ .is-disabled {
|
|
|
+ background-color: var(--el-input-bg-color);
|
|
|
+ color: var(--el-input-text-color, var(--el-text-color-regular));
|
|
|
+ cursor: not-allowed;
|
|
|
+ .to {
|
|
|
+ height: calc(100% - 3px);
|
|
|
+ background-color: var(--el-fill-color-light) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-input) {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ :deep(.el-input__wrapper) {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0 15px;
|
|
|
+ background-color: transparent;
|
|
|
+ border: none !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+ &.is-focus {
|
|
|
+ border: none !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
