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.
89 lines
2.2 KiB
89 lines
2.2 KiB
7 months ago
|
<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>
|