ant-design-vue@4.2.6 自定义表单控件

自 3.0 版本以后,Form.Item 不再劫持子元素,而是通过 provider / inject 依赖注入的方式进行自动校验,这种方式可以提高组件性能,子元素也不会限制个数,同样子元素也可以是进一步封装的高级组件。

自定义或第三方的表单控件,也可以与 Form 组件一起使用。只要该组件注入 useInjectFormItemContext 并调用相应方法。

price-input.vue

ts 复制代码
<template>
  <span>
    <a-input type="text" :value="value.number" style="width: 100px" @change="onNumberChange" />
    <a-select
      :value="value.currency"
      style="width: 80px; margin: 0 8px"
      :options="[
        { value: 'rmb', label: 'RMB' },
        { value: 'dollar', label: 'Dollar' },
      ]"
      @change="onCurrencyChange"
    ></a-select>
  </span>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import type { PropType } from 'vue';
import { Form } from 'ant-design-vue';

export type Currency = 'rmb' | 'dollar';

interface PriceValue {
  number: number;
  currency: Currency;
}
export default defineComponent({
  props: {
    value: { type: Object as PropType<PriceValue>, isRequired: true },
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const formItemContext = Form.useInjectFormItemContext();
    const triggerChange = (changedValue: { number?: number; currency?: Currency }) => {
      emit('update:value', { ...props.value, ...changedValue });
      formItemContext.onFieldChange();
    };
    const onNumberChange = (e: InputEvent) => {
      const newNumber = parseInt((e.target as any).value || '0', 10);
      triggerChange({ number: newNumber });
    };
    const onCurrencyChange = (newCurrency: Currency) => {
      triggerChange({ currency: newCurrency });
    };

    return {
      onNumberChange,
      onCurrencyChange,
    };
  },
});
</script>

父组件

ts 复制代码
<template>
  <a-form name="customized_form_controls" layout="inline" :model="formState" @finish="onFinish">
    <a-form-item name="price" label="Price" :rules="[{ validator: checkPrice }]">
      <price-input v-model:value="formState.price" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import PriceInput from './price-input.vue';
import type { Currency } from './price-input.vue';

const formState = reactive({
  price: {
    number: 0,
    currency: 'rmb' as Currency,
  },
});
const onFinish = (values: any) => {
  console.log('Received values from form: ', values);
};
const checkPrice = (_: any, value: { number: number }) => {
  if (value.number > 0) {
    return Promise.resolve();
  }
  return Promise.reject(new Error('Price must be greater than zero!'));
};
</script>
相关推荐
驭风少年君5 小时前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说6 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友6 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行7 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安7 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-7 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada7 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚7 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu7 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After8 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript