阅读之前
此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。
如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录
业务背景
用户在输入【金额】字段时，实时展示千分位格式。
业务分析
从需求来看，我们需要实现一个【千分位】组件，并且该组件允许在【表单】视图中使用。
扩展实现：该组件虽然仅要求在【表单】中使用，但也可以在【搜索】中使用完全相同的实现，因此这里我们在注册时会增加【搜索】视图，将【千分位】组件应用在【搜索】中。对于【表格】、【详情】和【画廊】来说，该组件是没有【输入】行为的展示组件，在这里我们不进行演示。
准备工作
此处你应该已经在某个业务模型下，可以完整执行当前模型的全部【增删改查】操作。
业务模型定义
（以下仅展示本文章用到的模型字段，忽略其他无关字段。）
| 名称 | API名称 | 业务类型 | 是否多值 | 长度(单值长度) |
|---|---|---|---|---|
| 编码 | code | 文本 | 否 | 128 |
| 名称 | name | 文本 | 否 | 128 |
| 金额 | money | 金额 | 否 | - |
创建组件、元件
准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。
以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。
创建千分位组件
创建千分位元件
启动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 <span class="hljs-subst">${value}</span>.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;
}
}
Oinone社区 作者：数式-海波原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/67.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
