form-create教程:移除默认提交按钮

本文将介绍form-create如何修改,隐藏默认提交按钮

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。

如果对您有帮助,您可以在 GitHub 上给作者点个"Star" 支持一下 谢谢!

 

隐藏默认按钮

首先通过设置全局配置隐藏默认的提交按钮和重置按钮

{
  submitBtn: false,
  resetBtn: false
}

 

生成自定义按钮组件

示例中使用的是 ElementUI

default-button.png

[
    {
        type: 'input',
        field: 'field-1',
        title: 'test',
        value: 'test submit',
        col: {
            span:6
        }

    },
    {
        type: 'el-button',
        on: {
            click: function(){
                //TODO 提交表单
                $f.submit();
                //或者
                $f.resetFields();
            }
        },
        col: {
            span:3,
            push: 1
        },
        children: ['submit']

    }
]

 

form-create教程系列:

form-create教程:移除默认提交按钮

form-create教程:给内置组件和自定义组件添加事件

form-create教程:自定义布局,实现一行多个组件

 

转载于:https://www.cnblogs.com/xaboy/p/11266377.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是上述代码的注释: ```css /* 设置背景图片 */ body { background: url(../img/background.jpg) top left; background-size: 100%; } /* 设置图片大小 */ img { width: 160px; height: 160px; } /* 设置登录图像的样式 */ #login-img { margin-left: 50px; float: left; } /* 再次设置登录图像的样式,可能是代码中的重复 */ #login-img { margin-left: 50px; float: left; } /* 设置表单的边框样式 */ #form-border { background-color: rgba(220, 226, 241, 0.6); /* 海天蓝色,带有透明度 */ width: 520px; height: 400px; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } /* 设置表单输入框的样式 */ .form-input { width: 200px; height: 25px; padding-left: 5px; border-radius: 5px; } /* 设置表单标签的样式 */ .form-label { margin-left: 30px; font-family: "微軟正黑體 Light体"; } /* 设置表单第一个按钮的样式 */ .form-button1 { width: 200px; height: 30px; margin-top: 35px; margin-left: 70px; font-size: 20px; font-family: "华文楷体"; border: 1px solid #eee; } /* 设置表单第一个按钮的悬停样式 */ .form-button1:hover { background-color: aliceblue; } /* 设置表单第二个按钮的样式 */ .form-button2 { width: 200px; height: 30px; margin-top: 35px; margin-left: 70px; font-size: 20px; font-family: "华文楷体"; border: 1px solid #eee; } /* 设置表单第二个按钮的悬停样式 */ .form-button2:hover { background-color: aliceblue; } /* 设置表单标题的样式 */ #div-title { text-align: center; margin-top: 10px; } /* 设置表单中的标题的样式 */ h3 { font-size: 30px; font-family: "华文彩云"; } /* 设置密码输入框的位置 */ #password { margin-top: 30px; margin-bottom: 20px; } /* 设置注册按钮的位置 */ #register { margin-left: 80px; } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值