push

lib/component/form/range/index.ts

@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+import nsRange from './range.vue'
+
+export const NsRange = function (app: App) {
+  app.component(nsRange.name, nsRange);
+  return app;
+};

lib/component/form/range/range.vue

@@ -0,0 +1,88 @@
+<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>