diantou/src_custom/_form-designer/component-library/xm-money-input.vue

<template>
  <div>
    <a-form-model-item label="小数位数">
      <sdUglyNumber v-model="component.attr.decimalPrecision" :min="0" :max="5" />
    </a-form-model-item>
    <a-form-model-item label="默认值">
      <a-input-number
        v-model="component.attr.defaultValue"
        :step="Number(component.attr.decimalPrecision) / 10"
        @change="valueChange"
      />
    </a-form-model-item>
  </div>
</template>

<script>
import { InputNumber } from 'ant-design-vue'
import sdUglyNumber from '@/form-designer/sd-ugly-number.vue'
import components from './_import-components/xm-money-input-import'
export const metaInfo = {
  caption: '金额',
  component: {
    props: ['designerData'],
    render() {
      const { defaultValue } = this.designerData.attr
      return (
        <InputNumber
          defaultValue={defaultValue}
          formatter={(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
          parser={(value) => value.replace(/\$\s?|(,*)/g, '')}
          key={this.designerData.key}
        />
      )
    },
  },
  icon: 'dollar',
  order: 600,
}
export const fieldProps = {
  dataType: 'number',
  key: 1,
  attr: {
    decimalPrecision: 0,
  },
}
export default {
  name: 'XmMoneyInput',
  components: { sdUglyNumber, ...components },
  data() {
    return {}
  },
  methods: {
    valueChange() {
      this.component.key = this.component.key + 1
    },
  },
}
</script>

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