You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

88 lines
2.2 KiB

<template>
<a-form :model="modelRef">
<a-input-group compact>
<a-form-item v-bind="validateInfos.min">
<a-input-number
v-model:value="modelRef.min"
style="width: 100px; text-align: center"
placeholder="最小值"
/>
</a-form-item>
<a-form-item>
<a-input-number
style="width: 30px; pointer-events: none; background-color: #fff"
placeholder="~"
disabled
/>
</a-form-item>
<a-form-item v-bind="validateInfos.max">
<a-input-number
v-model:value="modelRef.max"
style="width: 100px; text-align: center"
placeholder="最大值"
/>
</a-form-item>
</a-input-group>
</a-form>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { Form } from 'ant-design-vue';
const useForm = Form.useForm;
export default defineComponent({
name: 'NsRange',
props: {
min: {
type: Object,
default: () => {},
},
max: {
type: Object,
default: () => {},
},
},
setup(props) {
const { min, max } = props;
const modelRef = reactive({
min: min.defaultValue || min.defaultValue == 0 ? min.defaultValue : '',
max: max.defaultValue || max.defaultValue == 0 ? max.defaultValue : '',
});
const rulesRef = reactive({
min: [
...min['rules'],
...[
{
validator: async function (rule, value) {
if (modelRef['max'] <= value) {
return Promise.reject('最小值应小于最大值');
}
},
},
],
],
max: [
...max['rules'],
...[
{
validator: async function (rule, value) {
if (modelRef['min'] >= value) {
return Promise.reject('最大值应大于最小值');
}
},
},
],
],
});
const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
return {
modelRef,
validateInfos,
};
},
});
</script>
<style lang="less" scoped></style>