diantou/src_custom/_form-designer/component-library/xm-slider.vue

<template>
  <div>
    <a-form-model-item label="范围">
      <SdRangeInput
        :min.sync="component.attr.minValue"
        :max.sync="component.attr.maxValue"
        @change="component.key = component.key + 1"
      />
    </a-form-model-item>
    <a-form-model-item label="默认值">
      <a-input-number
        v-model="component.attr.defaultValue"
        @change="component.key = component.key + 1"
      />
    </a-form-model-item>
  </div>
</template>

<script>
import { Slider } from 'ant-design-vue'
import SdRangeInput from '@/form-designer/sd-range-input.vue'
import components from './_import-components/xm-slider-import'
export const metaInfo = {
  caption: '滑块',
  component: {
    props: ['designerData'],
    render() {
      return (
        <Slider
          vModel={this.designerData.attr.defaultValue}
          key={this.designerData.key}
          min={Number(this.designerData.attr.minValue)}
          max={Number(this.designerData.attr.maxValue)}
        />
      )
    },
  },
  icon: 'sliders',
  order: 500,
}
export const fieldProps = {
  dataType: 'number',
  attr: {
    minValue: 0,
    maxValue: 10,
  },
  attrFD: { formItemProps: { inputProps: {} } },
  key: 1,
}
export default {
  name: 'XmSlider',
  components: { SdRangeInput, ...components },
  data() {
    return {}
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>