Frame Component

The Frame component allows embedding sub-pages in forms, enabling users to select data or perform operations through popup boxes. It's particularly suitable for scenarios where you need to select images, files, or other data through popup boxes in forms.

When the sub-page needs to be closed, call the parent page's api.closeModel method to close the popup box.

Rule

const rule = {
    type:"frame",
    title:"Material",
    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: 'Select 2 images', trigger: 'change'}
    ],
}

value: String | Number | Array Component value can be a string, number, or array.

Configuration

Property	Description	Type	Default Value
type	Frame display type, has input (string), file (file), image (image)	String	input
src	Frame page address	String	-
helper	Enable helper methods in frame page	Boolean	false
disabled	Disable component	Boolean	false
icon	Button icon to open popup box	String	-
srcKey	Need to define srcKey when value is Object[]	String	-
width	Popup box width	String	-
height	Popup box height	String	-
maxLength	Maximum selection count	Number	'-'
okBtnText	Popup box confirm button text	String	'OK'
closeBtnText	Popup box close button text	String	'Close'
modalTitle	Image preview popup box title text	String	'Preview'
handleIcon	Operation button icon, set to false will not display, set to true is default preview icon, default is false when type is file, default is true when type is image	String | Boolean	-
title	Popup box title	String	-
modal	Configure popup box props	Object	-
okBtn	Whether to show confirm button	Boolean	-
closeBtn	Whether to show close button	Boolean	-
allowRemove	Whether removable, set to false will not show delete button, effective when type equals image or file	Boolean	true
onChange	Triggered when value changes	Function	-
onOpen	Callback when opening popup layer	Function	-
onOk	Callback when clicking confirm, returning false will not close popup	Function	-
onHandle	Operation button click event, default is image preview	Function	-
onBeforeRemove	Pre-delete event when clicking delete button, returning false will not delete	Function	-
onRemove	Delete button click event	Function	-
onCancel	Triggered when popup box closes, returning false will not close popup	Function	-

Helper Methods Explained

When the helper option is enabled, the frame page automatically injects the form_create_helper global variable, providing the following convenient operations:

api

• Description: Get the form's API object.

• Example:

form_create_helper.api.formData()

close

• Parameters:

  • field Component's field

• Description: Close the current frame component's popup box.

• Example:

form_create_helper.close(field)

get

• Parameters:

  • field Component's field

• Description: Get the current frame component's value.

• Example:

const value = form_create_helper.get(field)

set

• Parameters:

  • field Component's field
  • value Component's value

• Description: Modify the current frame component's value.

• Example:

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

onOk

• Parameters:

  • callback Callback

• Description: Trigger callback when clicking the confirm button.

• Example:

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

onClose

• Parameters:

  • callback Callback

• Description: Trigger callback when clicking the close button.

• Example:

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

Examples

Image Selector

Embed an image selector in the form, allowing users to select multiple images and display selected images in the form.

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


<script setup>
import { ref } from 'vue';
const formData = ref({fodder: []});
const rule = ref([
  {
    type: 'frame',
    title: 'Select Images',
    field: 'fodder',
    value: [],
    props: {
      type: 'image',
      src: 'image-selector.html',
      maxLength: 3,
      handleIcon: true,
      modalTitle: 'Image Preview',
    },
    validate: [
      { required: true, type: 'array', min: 1, message: 'Select at least one image', trigger: 'change' }
    ],
  }
]);
</script>

Dynamic Data Loading

In some applications, data may need to be dynamically loaded from different sources and filtered and processed during selection. The Frame component achieves complex data interaction scenarios through dynamic data loading in sub-pages.

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


<script setup>
import { ref } from 'vue';
const formData = ref({fodder: []});
const rule = ref([
    {
        type: 'frame',
        title: 'Select Products',
        field: 'products',
        value: [],
        props: {
            type: 'input',
            src: '/product-selector.html', // Product selection page, supports category filtering and pagination loading
            maxLength: 10,
            modalTitle: 'Product Selector',
            handleIcon: false,
        },
        validate: [
            { required: true, type: 'array', min: 1, message: 'Select at least one product', trigger: 'change' }
        ],
    }
]);
</script>