feat: 新增Slider字段控件

main/src/form/fields/Slider.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed, ref, toRefs, watch } from 'vue';
+
+import { FormValue, SliderConfig } from '../types';
+
+const props = withDefaults(
+  defineProps<{
+    config: SliderConfig;
+    prop: string;
+    model?: FormValue;
+  }>(),
+  {
+    model: () => ({}),
+  }
+);
+
+const emits = defineEmits<{
+  (event: 'change', prop: string, value: number): void;
+}>();
+
+const { model, prop, config } = toRefs(props);
+const value = ref<number>(prop?.value && model?.value?.[prop?.value]);
+const min = computed<number>(() => config.value.min || 0);
+const max = computed<number>(() => config.value.max || 1);
+const step = computed<number>(() => config.value.step || 0.01);
+
+watch(
+  () => value.value,
+  (v) => emits('change', prop.value, v)
+);
+</script>
+
+<template>
+  <div class="w-full h-full">
+    <input v-model="value" type="range" class="block w-full h-full cursor-pointer" :min="min" :max="max" :step="step" />
+  </div>
+</template>

main/src/form/index.ts

@@ -2,6 +2,7 @@ import { Plugin } from 'vue';
 
 import ColorPicker from './fields/ColorPicker.vue';
 import RadioGroup from './fields/RadioGroup.vue';
+import Slider from './fields/Slider.vue';
 
 export { default as Form } from './Form.vue';
 export * from './types';
@@ -10,6 +11,7 @@ export const formPlugin: Plugin = {
   install(app) {
     app.component('RadioGroup', RadioGroup);
     app.component('ColorPicker', ColorPicker);
+    app.component('Slider', Slider);
   },
 };
 

main/src/form/types.ts

@@ -60,6 +60,13 @@ export interface ColorPickerConfig extends FormItem {
   type: 'ColorPicker';
 }
 
+export interface SliderConfig extends FormItem {
+  type: 'Slider';
+  max?: number;
+  min?: number;
+  step?: number;
+}
+
 export type ChildConfig = FormItem | RadioGroupConfig | ColorPickerConfig;
 
 export type FormConfig = ChildConfig[];

main/src/view/canvas.vue

@@ -42,10 +42,13 @@ const formConfig: FormConfig = [
     label: '颜色',
     type: 'ColorPicker',
   },
+  {
+    name: 'range',
+    label: '滑块',
+    type: 'Slider',
+  },
 ];
-const formValue = {
-  node: 1,
-};
+const formValue = {};
 
 const handleFormChange = (value: any) => {
   console.log('新的form', value);