基础使用

使用 ProComponentProvider 包裹你的应用根组件，以支持表单内部共享相同的弹窗容器，同时可配置全局默认属性。

组件展示

选择城市

代码实现

<template>
  <ProComponentProvider :component-vars="config">
    <div class="demo-wrapper">
      <ProForm :form="form" />
    </div>
  </ProComponentProvider>
</template>

<script setup lang="ts">
import { ProComponentProvider, ProForm, useForm } from '@qin-ui/vant-pro';

const config = {
  'pro-form': {
    inputAlign: 'center', // 统一设置表单控件内容居中对齐
  },
  field: {
    clearable: true, // 统一让输入框带有清空按钮
  },
};

const form = useForm({}, [
  {
    component: 'picker',
    label: '选择城市',
    path: 'city',
    popup: true,
    columns: [
      { text: '北京', value: 'Beijing' },
      { text: '上海', value: 'Shanghai' },
    ],
  },
]);
</script>

<style scoped>
.demo-wrapper {
  max-width: 430px;
  padding: 16px;
  background: #f7f8fa;
  border-radius: 8px;
}
</style>