【界面设计器】自定义字段组件实战——千分位输入框

阅读之前

此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。

如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录

业务背景

用户在输入【金额】字段时，实时展示千分位格式。

业务分析

从需求来看，我们需要实现一个【千分位】组件，并且该组件允许在【表单】视图中使用。

扩展实现：该组件虽然仅要求在【表单】中使用，但也可以在【搜索】中使用完全相同的实现，因此这里我们在注册时会增加【搜索】视图，将【千分位】组件应用在【搜索】中。对于【表格】、【详情】和【画廊】来说，该组件是没有【输入】行为的展示组件，在这里我们不进行演示。

准备工作

此处你应该已经在某个业务模型下，可以完整执行当前模型的全部【增删改查】操作。

业务模型定义

（以下仅展示本文章用到的模型字段，忽略其他无关字段。）

创建组件、元件

准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。

以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。

创建千分位组件

创建千分位元件

启动SDK工程进行组件基本功能开发

(npm相关操作请自行查看SDK工程中内置的README.MD)

关键点详解

数据交互类型的字段组件（以下简称展示组件）与仅展示类型的字段组件（以下简称交互组件）有一些差别。

通常情况下，在展示组件中仅需使用value属性即可展示相关内容。在交互组件中除了value用于展示外，还需使用change、focus以及blur处理用户输入时的基本交互逻辑。

数据交互方法主要功能说明：

• change方法：当值发生变更时调用，根据字段相关配置将值回填至表单中。
• focus方法：当组件获取焦点时调用，记录当前值，并在调用blur方法时进行处理。
• blur方法：当前组件失去焦点时调用，根据focus方法记录的值，进行失焦触发逻辑的执行。

这里的三个数据交互方法仅仅是对用户行为的抽象，而并非限定其使用场景。

通常来说，这三个方法的调用顺序为：focus --> change --> blur。

如在日期时间组件中，面板打开时调用了focus方法，面板值发生变更时，调用了change方法，面板关闭时调用了blur方法。

如在地图组件中，选中地图上的某个点时仅会调用change方法，用户交互上并不能体现出focus和blur的行为。因此对于这个组件而言，只会有change方法被执行。

代码实现参考

PS：oio-input-number样式必须升级到4.6.x以上的最新版本才支持

Thousandth.vue

<template>
  <a-input-number
    class="oio-input-number"
    :value="inputValue"
    :formatter="formatter"
    :parser="parser"
    @update:value="change"
    @focus="focus"
    @blur="blur"
  />
</template>
<script lang="ts">
import { InputNumber as AInputNumber } from 'ant-design-vue';
import { computed, defineComponent } from 'vue';

export default defineComponent({
  name: 'Thousandth',
  components: {
    AInputNumber
  },
  props: {
    value: {
      type: [String, Number]
    },
    change: {
      type: Function
    },
    focus: {
      type: Function
    },
    blur: {
      type: Function
    }
  },
  setup(props) {
    const inputValue = computed(() => {
      return props.value;
    });

    const formatter = (value) => {
      return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    };

    const parser = (value) => {
      return value.replace(/\$\s?|(,*)/g, '');
    };

    return {
      inputValue,
      formatter,
      parser
    };
  }
});
</script>

FormMoneyThousandthFieldWidget.ts

import { FormFieldWidget, ModelFieldType, SPI, ViewType } from '@kunlun/dependencies';
import Thousandth from './Thousandth.vue';

@SPI.ClassFactory(
  FormFieldWidget.Token({
    viewType: [ViewType.Form, ViewType.Search],
    ttype: ModelFieldType.Currency,
    widget: 'Thousandth',
    multi: false
  })
)
export class FormMoneyThousandthFieldWidget extends FormFieldWidget {
  public initialize(props) {
    super.initialize(props);
    this.setComponent(Thousandth);
    return this;
  }
}