初始化

ny

昨天 282fbc6488f4e8ceb5fda759f963ee88fbf7b999

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<script lang="ts" setup>
import { computed, ref, unref, watch } from 'vue';
 
import { useAttrs } from '@jnpf/hooks';
 
import { $t } from '@vben/locales';
 
import { Form, InputNumber } from 'ant-design-vue';
 
defineOptions({ inheritAttrs: false, name: 'JnpfNumberRange' });
const props = defineProps({
  precision: Number,
  value: Array,
});
const emit = defineEmits(['update:value', 'change']);
const attrs = useAttrs({ excludeDefaultKeys: false });
const min = ref<number | undefined>(undefined);
const max = ref<number | undefined>(undefined);
const formItemContext = Form.useInjectFormItemContext();
 
const getBindValue = computed(() => ({ ...unref(attrs) }));
const getPrecision = computed(() => (props.precision || props.precision === 0 ? props.precision : undefined));
 
watch(
  () => unref(props.value),
  (val) => {
    setValue(val);
  },
  { immediate: true },
);
 
function setValue(value) {
  if (Array.isArray(value) && value.length === 2) {
    min.value = value[0] || value[0] == 0 ? value[0] : undefined;
    max.value = value[1] || value[1] == 0 ? value[1] : undefined;
  } else {
    min.value = undefined;
    max.value = undefined;
  }
}
function onChange() {
  if (!min.value && min.value !== 0 && !max.value && max.value !== 0) {
    emit('update:value', []);
    emit('change', []);
    formItemContext.onFieldChange();
    return;
  }
  emit('update:value', [min.value, max.value]);
  emit('change', [min.value, max.value]);
  formItemContext.onFieldChange();
}
</script>
 
<template>
  <div class="jnpf-number-range" v-bind="getBindValue">
    <InputNumber v-model:value="min" :controls="false" :placeholder="$t('component.jnpf.numberRange.min')" :precision="getPrecision" @change="onChange" />
    <span class="separator">-</span>
    <InputNumber v-model:value="max" :controls="false" :placeholder="$t('component.jnpf.numberRange.max')" :precision="getPrecision" @change="onChange" />
  </div>
</template>
<style lang="scss" scoped>
.jnpf-number-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
 
  .ant-input-number {
    flex: 1;
    width: auto !important;
  }
 
  .separator {
    flex-shrink: 0;
    margin: 0 5px;
  }
}
</style>