同福

鬼谷子叔叔
2018-08-19 03:12:05 14

TFWEB框架前端UI控件库（Inspinia_admin_v2.5）

表单（form）

form-static

参数

elem : {
    value : ""
}

示例

<form-static :elem="elem"></form-static>

form-text

参数

elem : {
    name : "text",
    placeholder : "input a text",
    value : ""
}

示例

<form-text :elem="elem"></form-text>

form-password

参数

elem : {
    name : "password",
    placeholder : "input a password",
    value : ""
}

示例

<form-password :elem="elem"></form-password>

form-radios

参数

elem : {
    name : "radios",
    value : "",
    options : [
        {text:"text", value:"value"}
    ]
}

示例

<form-radios :elem="elem"></form-radios>

form-checkboxes

参数

elem : {
    name : "checkboxes",
    value : "",
    options : [
        {text:"text", value:"value"}
    ]
}

示例

<form-checkboxes :elem="elem"></form-checkboxes>

form-select

参数

elem : {
    name : "select",
    value : "",
    defaultOption :{text:"-- select --", value:null},
    options : [
        {text:"text", value:"value"}
    ]
}

示例

<form-select :elem="elem"></form-select>

form-textarea

参数

elem : {
    name : "textarea",
    placeholder : "input a text",
    value : ""
}

示例

<form-textarea :elem="elem"></form-textarea>

form-file

参数

elem : {
    name : "file",
    value : ""
}

示例

<form-file :elem="elem"></form-file>

form-submit

参数

fnclick: null,
fnclickname: null,
elem: {
    name: "smt",
    value: "提交按钮"
}

说明

  • fnclick：function参数，用于传递按钮点击事件

  • fnclickname：字符串参数，用于传递按钮点击事件，事件由 $on('event') 定义

示例

<form-submit :elem="elem" :fnclick="fnclick" :fnclickname="fnclickname"></form-submit>

form-button

参数

fnclick: null,
fnclickname: null,
elem: {
    name: "btn",
    value: "普通按钮"
}

说明

  • fnclick：function参数，用于传递按钮点击事件

  • fnclickname：字符串参数，用于传递按钮点击事件，事件由 $on('event') 定义

示例

<form-button :elem="elem" :fnclick="fnclick" :fnclickname="fnclickname"></form-button>

form-photo

参数

elem: {
    name: "photo",
    value: "",
    imgSrc: '',
    imgCss: {
        width: 160,
        height: 160
    },
    imgAutoThumb : {
        enabled : true,
        maxWidth : 300
    }
},
id: null,
_file: null,
_img: null

示例

<form-photo :elem="elem"></form-photo>

form-vrycode

参数

elem: {
    name: "vrycode",
    value: "",
    imgUrl: $.U('tool/sys/verifycode?t=1&l=4&k=vc')
}

示例

<form-vrycode :elem="elem"></form-vrycode>

form-tftb

参数

elem: {
    id: $.getRandNumber(),
    name: "tftb",
    value: "",
    editor: {

    }
},
homeUrl : $.U('extends/editor/tf/')

示例

<form-tftb :elem="elem"></form-tftb>

form-uetb

参数

elem: {
    id: $.getRandNumber(),
    name: "uetb",
    value: "",
    editor: {
        width: -1,
        height: 350,
        styles: '',
        zindex: 0,
        toolbars: [],
        pastefilter: {
            stripTagsExceptList: 'div,p,br,span,strong,b,h1,h2,h3,a,ol,ul,li,img,embed,video',
            stripStylesExceptList: 'font-color,text-indent,text-align,width,height,border'
        }
    }
},
homeUrl : $.U('extends/editor/ue/')

说明

  • elem.editor.pastefilter.stripTagsExceptList：过滤器，过滤除设定标签以外的所有其他标签

  • elem.editor.pastefilter.stripStylesExceptList：过滤器，过滤除设定样式以外的所有其他样式

示例

<form-uetb :elem="elem"></form-uetb>

form-row-box

参数

elem:{
    label: '',
    error: ''
}

示例

<form-row-box :elem="elem"></form-row-box>

form-row-boxright

参数

elem:{
    label: '',
    error: ''
}

示例

<form-row-boxright :elem="elem"></form-row-boxright>

form-row-boxstatic

参数

elem:{
    label: ''
}

示例

<form-row-boxstatic :elem="elem"></form-row-boxstatic>

form-box

参数

id: '',
info: {},
hiddens : [],
callbacks: {},
validators: {},
validatorForm : null,
validatorEnabled : false,
validatorState : "none"

说明

hiddens：一位数组，传递表单隐藏表单域数据

validators：表单验证规则

callbacks.success：表单AJAX提交请求成功后的回调函数

callbacks.ready：表单AJAX提交请求之前的回调函数

callbacks.error：表单AJAX提交请求失败的回调函数

callbacks.complete：表单AJAX提交请求完成的回调函数

示例

<form-box :id="id" :info="info" :hiddens="hiddens" :callbacks="callbacks" :validators="validators"></form-box>

表格（table）

table-box

参数

id: '',
args : {
    pages_visible: true,
    actions_visible: false,
    group_actions_visible: false,
    cbfield: "id"
},
titles : [],
datas : [],
pages : {}

示例

<table-box :id="id" :args="args" :titles="titles" :datas="datas" :pages="pages"></table-box>

table-search

参数

id : '',
info : {},
args : {
    hiddens : {},
    callbacks : {
        error : function(){

        }
    },
    showadv : function(){

    },
    hasadv : false
},
validators : {},
elements : {
    text : {
        placeholder : "输入关键字",
        value : ""
    },
    submit : {
        value : "搜索"
    },
    button : {
        value : "高级"
    }
}

示例

<table-search :id="id" :info="info" :args="args" :validators="validators" :elements="elements"></table-search>

对话框（dialog）

dialog-box

参数

id : '',
info : {
    title : '',
    visible : false,
    fullscreen : false
}

示例

<dialog-box :id="id" :args="args"></dialog-box>

TFHomeUI

介绍

TFHomeUI是一个将模态表单和对话框对象化的一个封装工具对象，通过这个对象我们可以通过设置一些参数就可以创建任意的表单项目，也可以创建弹出窗表单项目。

定义表单项目

设置表单参数

TFHomeUI.setForm('test', {
    info: {
        title: '用户登录',
        descript: '用户登录',
        method: 'post',
        action: $.U('api/user/_login')
    },
    validators: {
        user: {triggers: ['blur'], rules: [{min: 2, msg: '用户名最少2个字符'}, {max: 20, msg: '用户名最多20个字符'}]},
        pwd: {triggers: ['blur'], rules: [{min: 6, msg: '密码最少6个字符'}]}
    },
    elements: {
        user: {
            type: 'text',
            label: '用户名',
            name: "user",
            placeholder: "用户名",
            error: ""
        },
        pwd: {
            type: 'password',
            label: '密码',
            name: "pwd",
            placeholder: "密码",
            error: ""
        }
    }
});

创建表单项目

TFHomeUI.makeForms();

引用表单项目

直接引用表单

登录表单会被创建在容器 .login-form-content 内

TFHomeUI.loadForm('login', null, {
    bindData: {
        compBox : '.login-form-content' // 页面上放置登录表单的容器的选择器
    }
});

引用弹窗表单

登录表单会被创建在弹窗内，并自动弹出

TFHomeUI.loadDialog('login', null, '用户登录', {
    bindData: {
        
    }
});

form-xxx

参数

id: '',
info: {},
data: {},
hiddens: {},
callbacks: {},
validators: {},
disabledelems: {},
formName: '',
indlg: true

示例

<form-xxx :id="id" :info="info" :hiddens="hiddens" :callbacks="callbacks" :validators="validators" :disabledelems="disabledelems">
    <slot></slot>
</form-xxx>

这里面的插槽 slot 不需要特别处理，我们这么写只是让大家知道这里面会根据设置 setForm 方法传入的参数动态生成表单内容

dialog-xxx

参数

id: '',
info: {},
form: {},
data: {},
disabledelems: {},
dialogName: ''

示例

<dialog-xxx :id="id" :info="info">
    <form-xxx :id="id" :info="form.info" :hiddens="form.hiddens" :callbacks="form.callbacks" :data="data" :disabledelems="disabledelems"></form-xxx>
</dialog-xxx>

这里面的内容 form-xxx 不不需要特别处理，我们这么写只是让大家知道每个 dialog-xxx 组件都会引入一个 form-xxx 的插槽，表单内容会在 form-xxx 内绘制

其他

static-box

参数

args : {
    info : {
        title : ''
    }
}

示例

<dialog-box :id="id" :args="args"></dialog-box>

modal-box

参数

id :  'modal-mask',
msg : ''

示例

<dialog-box :id="id" :msg="msg"></dialog-box>

说明

示例

登录表单

TFHomeUI.setForm('login', {
    info: {
        title: '用户登录',
        descript: '用户登录',
        method: 'post',
        action: $.U('api/user/_login')
    },
    validators: {
        user: {triggers: ['blur'], rules: [{min: 2, msg: '用户名最少2个字符'}, {max: 20, msg: '用户名最多20个字符'}]},
        pwd: {triggers: ['blur'], rules: [{min: 6, msg: '密码最少6个字符'}]},
        vrycode: {triggers: ['blur'], rules: [{regex: /^[0-9]{4}$/, msg: '验证码错误'}]}
    },
    elements: {
        user: {
            type: 'text',
            label: '用户名',
            name: "user",
            placeholder: "用户名",
            error: ""
        },
        pwd: {
            type: 'password',
            label: '密码',
            name: "pwd",
            placeholder: "密码",
            error: ""
        },
        vrycode: {
            type: 'vrycode',
            label: "验证码",
            name: "vrycode",
            imgUrl: $.U('tool/sys/verifycode?t=1&l=4&k=vrycode'),
            error: ""
        }
    },
    submitButtons: {
        submitLabel: '登录'
    },
    created : function(){
        var lsun;
        lsun = $.cookie('tflastsignuname');
        if(lsun != null){
            this.elements.user.value = lsun;
        }
    }
});

TFHomeUI.makeForms();

注册表单

TFHomeUI.setForm('register', {
    info: {
        title: '用户注册',
        descript: '用户注册',
        method: 'post',
        action: $.U('api/user/_register')
    },
    validators: {
        user: {triggers: ['blur'], rules: [{min: 2, msg: '用户名最少2个字符'}, {max: 20, msg: '用户名最多20个字符'}]},
        pwd: {triggers: ['blur'], rules: [{min: 6, msg: '密码最少6个字符'}]},
        vpwd: {
            triggers: ['blur'], rules: [{
                fun: function (form, elem, name) {
                    return (form.vpwd.value != form.pwd.value);
                }, msg: '两次输入的密码不一致'
            }]
        },
        vrycode: {triggers: ['blur'], rules: [{regex: /^[0-9]{4}$/, msg: '验证码错误'}]}
    },
    elements: {
        user: {
            type: 'text',
            label: '用户名',
            name: "user",
            placeholder: "用户名",
            error: ""
        },
        pwd: {
            type: 'password',
            label: '密码',
            name: "pwd",
            placeholder: "密码",
            error: ""
        },
        vpwd: {
            type: 'password',
            label: '确认密码',
            name: "vpwd",
            placeholder: "请再次输入密码",
            error: ""
        },
        vrycode: {
            type: 'vrycode',
            label: "验证码",
            name: "vrycode",
            imgUrl: $.U('tool/sys/verifycode?t=1&l=4&k=vrycode'),
            error: ""
        }
    },
    submitButtons: {
        submitLabel: '注册'
    }
});

TFHomeUI.makeForms();

用户列表