Frame 框架组件

Frame 组件允许在表单中嵌入子页面，用户可以通过弹出框选择数据或进行操作。它特别适用于需要在表单中通过弹出框选择图片、文件或其他数据的场景。

当子页面需要关闭时，可以调用父级页面的 fApi.closeModel 方法来关闭弹出框。

规则

{
    type:"frame",
    title:"素材",
    field:"fodder",
    value:["/uploads/20131030/30-075657_191.jpg?4"],
    props:{
        type:"image",
        src:"iframe.html",
        maxLength:2,


},
    validate:[
        {required:true, type: 'array', min: 2, message: '请选择2张图片', trigger: 'change'}
    ],
}

value: String | Number | Array 组件的值可以是字符串、数字或数组。

配置

属性	说明	类型	默认值
type	frame显示类型,有input(字符串),file(文件),image(图片)	String	input
src	框架页面的地址	String	-
helper	开启框架页面内助手方法	Boolean	false
disabled	禁用组件	Boolean	false
icon	打开弹出框的按钮图标	String	-
srcKey	当value为Object[]时需要定义 srcKey	String	-
width	弹出框宽度	String	-
height	弹出框高度	String	-
maxLength	最大选择数量	Number	'-'
okBtnText	弹出框确定按钮文字	String	'确定'
closeBtnText	弹出框关闭按钮文字	String	'关闭'
modalTitle	图片预览弹出框标题文字	String	'预览'
handleIcon	操作按钮的图标 ,设置为false将不显示,设置为true为默认的预览图标,类型为file时默认为false,image类型默认为true	String | Boolean	-
title	弹出框标题	String	-
modal	配置弹出框 props	Object	-
okBtn	是否显示确认按钮	Boolean	-
closeBtn	是否显示关闭按钮	Boolean	-
allowRemove	是否可删除,设置为false是不显示删除按钮,type等于 image 或者 file 时有效	Boolean	true
onChange	value改变时触发	Function	-
onOpen	打开弹出层回调	Function	-
onOk	点击确定时的回调,返回false将不关闭弹窗	Function	-
onHandle	点击操作按钮事件,默认为图片预览	Function	-
onBeforeRemove	点击删除按钮删除前事件,返回false将不删除	Function	-
onRemove	点击删除按钮事件	Function	-
onCancel	弹出框关闭时触发,返回false将不关闭弹窗	Function	-

助手方法详解

当开启 helper 选项时，框架页面将自动注入 form_create_helper 全局变量，提供以下便捷操作：

api

• 说明: 获取表单的 API 对象。

• 示例:

form_create_helper.api.formData()

close

• 参数:

  • field 组件的 field

• 说明: 关闭当前 frame 组件的弹出框。

• 示例:

form_create_helper.close(field)

get

• 参数:

  • field 组件的 field

• 说明: 获取当前 frame 组件的值。

• 示例:

const value = form_create_helper.get(field)

set

• 参数:

  • field 组件的 field
  • value 组件的值

• 说明: 修改当前 frame 组件的值。

• 示例:

form_create_helper.set(field,[1,2,3])

onOk

• 参数:

  • callback 回调

• 说明: 在点击确定按钮时触发回调。

• 示例:

form_create_helper.onOk(()=>{
    //todo
})

onClose

• 参数:

  • callback 回调

• 说明: 在点击关闭按钮时触发回调。

• 示例:

form_create_helper.onClose(()=>{
    //todo
})

示例

图片选择器

在表单中嵌入一个图片选择器，允许用户选择多张图片，并在表单中展示已选择的图片。

<template>
  <form-create :rule="rule" v-model="formData"></form-create>
</template>


<script setup>
import { ref } from 'vue';
const formData = ref({fodder: []});
const rule = [
  {
    type: 'frame',
    title: '选择图片',
    field: 'fodder',
    value: [],
    props: {
      type: 'image',
      src: 'image-selector.html',
      maxLength: 3,
      handleIcon: true,
      modalTitle: '图片预览',
    },
    validate: [
      { required: true, type: 'array', min: 1, message: '请至少选择一张图片', trigger: 'change' }
    ],
  }
];
</script>

动态数据加载

在某些应用中，数据可能需要从不同的来源动态加载，并在选择过程中进行过滤和处理。Frame 组件可以通过子页面的动态数据加载，实现复杂的数据交互场景。

<template>
  <form-create :rule="rule" v-model="formData"></form-create>
</template>


<script setup>
import { ref } from 'vue';
const formData = ref({fodder: []});
const rule = [
    {
        type: 'frame',
        title: '选择产品',
        field: 'products',
        value: [],
        props: {
            type: 'input',
            src: '/product-selector.html', // 产品选择页面，支持分类筛选和分页加载
            maxLength: 10,
            modalTitle: '产品选择器',
            handleIcon: false,
        },
        validate: [
            { required: true, type: 'array', min: 1, message: '请至少选择一个产品', trigger: 'change' }
        ],
    }
];
</script>