Frame 框架

frame 框架打开的子页面要关闭时,需要通过调用父级页面的api.closeModel方法关闭

在线预览

规则

基础示例

const rule = {
    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'}
    ],
}

Props 配置示例

图片选择（image）

const rule = {
    type:"frame",
    title:"商品图片",
    field:"images",
    value:[],
    props:{
        type:"image",
        src:"/image-picker.html",
        maxLength: 5,
        width: "800px",
        height: "600px",
    },
    validate:[
        {required:true, type: 'array', min: 1, message: '请至少选择1张图片', trigger: 'change'}
    ],
}

文件选择（file）

const rule = {
    type:"frame",
    title:"附件",
    field:"files",
    value:[],
    props:{
        type:"file",
        src:"/file-picker.html",
        maxLength: 3,
    },
}

输入框（input）

const rule = {
    type:"frame",
    title:"自定义内容",
    field:"content",
    value:"",
    props:{
        type:"input",
        src:"/content-editor.html",
        width: "900px",
        height: "700px",
    },
}

开启助手方法

const rule = {
    type:"frame",
    title:"素材选择",
    field:"material",
    value:[],
    props:{
        type:"image",
        src:"/material-picker.html",
        helper: true,
        maxLength: 5,
    },
}

Events 事件示例

监听打开和关闭

const rule = {
    type:"frame",
    title:"素材选择",
    field:"material",
    value:[],
    props:{
        type:"image",
        src:"/material-picker.html",
        maxLength: 5,
    },
    on: {
        open: () => {
            console.log('打开弹出框');
        },
        close: () => {
            console.log('关闭弹出框');
        },
        change: (value) => {
            console.log('值改变:', value);
        },
    },
}

选择后验证

const rule = {
    type:"frame",
    title:"商品图片",
    field:"images",
    value:[],
    props:{
        type:"image",
        src:"/image-picker.html",
        maxLength: 5,
    },
    inject: true,
    on: {
        change: ($inject, value) => {
            // 验证图片数量
            if (value.length < 2) {
                $inject.api.setMessage('images', '请至少选择2张图片');
            } else {
                $inject.api.clearMessage('images');
            }
        },
    },
    validate:[
        {required:true, type: 'array', min: 2, message: '请至少选择2张图片', trigger: 'change'}
    ],
}

value: String | Number | Array

Props

属性	说明	类型	默认值
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	-
okBtnText	弹出框确定按钮文字	String	'确定'
closeBtnText	弹出框关闭按钮文字	String	'关闭'
modalTitle	图片预览弹出框标题文字	String	'预览'
handleIcon	操作按钮的图标 ,设置为false将不显示,设置为true为默认的预览图标,类型为file时默认为false,image类型默认为true	String | Boolean	-
title	弹出框标题	String	-
modal	配置弹出框 props	Object	-
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,用于快速操作组件

• close

• 参数: - field 组件的 field

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

• 示例:

  form_create_helper.close(field)

• set

• 参数: - field 组件的 field - value 组件的值

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

• 示例:

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

• get

• 参数: - field 组件的 field

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

• 示例:

  const value = form_create_helper.get(field)