SuperAdminx

Appearance

扩展的表单字段

Ant ProComponents自带19种表单字段 ​

Ant ProComponents已经自带了19种表单字段，使用起来非常Nice，查看详情，在配合Ant ProComponents的ProForm使用，简直不要太爽

1、imgTitle 使用方法 ​

效果图

imgTitle

使用方法
jsx
// 先引入
const ImgTitle = lazy(() => import('@/component/form/imgTitle/index'));

// 在放到form中使用
<ProForm.Item
    name="performer"
    label="电影演员"
    rules={[
    ]}
>
    <ImgTitle />
</ProForm.Item>

2、province 省选择 ​

效果图

imgTitle

使用方法
jsx
// 先引入
const Province = lazy(() => import('@/component/form/province/index'));

// 在放到form中使用
<ProForm.Item
    name="province_id"
    label="所在省"
    rules={[
    ]}
>
    <Province />
</ProForm.Item>

3、provinceCity 省市选择 ​

效果图

imgTitle

使用方法
jsx
// 先引入
const ProvinceCity = lazy(() => import('@/component/form/provinceCity/index'));

// 在放到form中使用
<ProForm.Item
    name="city_id"
    label="所在城市"
    rules={[
    ]}
>
    <ProvinceCity />
</ProForm.Item>

4、provinceCityArea 省市区选择 ​

效果图

imgTitle

使用方法
jsx
// 先引入
const ProvinceCityArea = lazy(() => import('@/component/form/provinceCityArea/index'));

// 在放到form中使用
<ProForm.Item
    name="area_id"
    label="所在区域"
    rules={[
    ]}
>
    <ProvinceCityArea />
</ProForm.Item>

5、tagArr 数组输入 ​

效果图

imgTitle

使用方法
jsx
// 先引入
const TagArr = lazy(() => import('@/component/form/tagArr/index'));

// 在放到form中使用
<ProForm.Item
    name="arr"
    label="下拉选择项的值"
    rules={[
    ]}
>
    <TagArr />
</ProForm.Item>

6、teditor 富文本编辑器 ​

效果图

imgTitle

使用方法
jsx
// 先引入
const Teditor = lazy(() => import('@/component/form/teditor/index'));

// 在放到form中使用
<ProForm.Item
    name="content"
    label="文章内容"
    rules={[
    ]}
>
    <Teditor />
</ProForm.Item>

7、tencentMap 腾讯经纬度选择 ​

效果图，点击选择位置会弹窗打开地图直接选择经纬度

imgTitle

使用方法
jsx
// 先引入
const TencentMap = lazy(() => import('@/component/form/tencentMap/index'));

// 在放到form中使用
<ProForm.Item
    name="xxx"
    label="商户位置"
    rules={[
    ]}
>
    <TencentMap />
</ProForm.Item>

8、其余上传组件 ​

用于同上面的组件使用一样，每个组件的参数可能不同，具体参数自行打开组件查看

  • uploadFile：上传单个文件，可参数控制上传的文件后缀，可直接上传阿里云
  • uploadFileAll：上传多个文件，可参数控制上传的文件后缀、上传的数量
  • uploadImg：上传单图，可参数控制裁剪的宽高
  • uploadImgAll：上传多图，可参数控制裁剪的宽高，上传后可拖动排序
  • uploadImgMini：上传单图，不过比上面个单图要小一些而已，用在商城里面多规格的时候为每个规格上传图片
  • uploadImgVideoAll：上传图片或视频，上传后可排序，上传后实现图片跟视频的预览