• "表单"组件:<form> —— 快应用组件库H-UI


    <import name="form" src="../Common/ui/h-ui/form/c_form"></import>
    <import name="username" src="../Common/ui/h-ui/form/c_username"></import>
    <import name="password" src="../Common/ui/h-ui/form/c_password"></import>
    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <form id="form" action="http://httpbin.org/post" params="{{params}}">
                <username id="username" params="{{params}}"></username>
                <password id="password" params="{{params}}"></password>
                <h-button id="button" type="info" block="true" onclick="handleClick"></h-button>
            </form>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    
    <script>
        export default {
            private: {
                params: {}
            },
            handleClick() {
                this.$child('form').submit()
            }
        }
    </script>
    

    <import name="form" src="../Common/ui/h-ui/form/c_form"></import>
    <import name="username" src="../Common/ui/h-ui/form/c_username"></import>
    <import name="password" src="../Common/ui/h-ui/form/c_password"></import>
    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <form id="form2" action="http://httpbin.org/post" params="{{params2}}">
                <username id="username2" params="{{params2}}"></username>
                <password id="password2" params="{{params2}}"></password>
                <h-button id="button2" type="info" block="true" onclick="handleClick2"></h-button>
            </form>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    
    <script>
        export default {
            private: {
                params2: {
                    accessToken: 'XXX'
                }
            },
            handleClick2() {
                this.$child('form2').submit()
            }
        }
    </script>
    

    <import name="form" src="../Common/ui/h-ui/form/c_form"></import>
    <import name="username" src="../Common/ui/h-ui/form/c_username"></import>
    <import name="password" src="../Common/ui/h-ui/form/c_password"></import>
    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <form id="form3" action="http://httpbin.org/post" params="{{params}}">
                <username id="username3" params="{{params}}"></username>
                <password id="password3" params="{{params}}"></password>
                <h-button id="button3" type="info" block="true" onclick="handleClick3"></h-button>
            </form>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    
    <script>
        import prompt from '@system.prompt'
    
        export default {
            private: {
                params: {}
            },
            onInit() {
                this.$on('form3_dispatchEvt',this.dispatchEvt)
            },
            handleClick3() {
                this.$child('form3').submit()
            },
            dispatchEvt(evt) {
                // 弹窗显示详细说明
                prompt.showToast({
                    message: evt.detail.value,
                    duration: 1,
                    gravity: 'top'
                })
            }
        }
    </script>
    

    扫码体验

  • 相关阅读:
    不安装oracle客户端,用plsql连接oracle
    NaviCat Primium远程连接Oracle 11g数据库操作方法
    PLSQL DEVELOPER 使用技巧
    MyEclipse/Eclipse中properties文件中文乱码问题解决
    log4j日志的配置--Debug
    java-jpa-criteriaBuilder使用入门
    使用@CrossOrigin实现跨域请求
    Could not autowire field: private javax.servlet.http.HttpServletRequest
    java高级-泛型<T>和注解封装与使用
    TableView自动上移
  • 原文地址:https://www.cnblogs.com/cloud-dev/p/biao-danzu-jianltformgt--kuai-ying-yong-zu-jian-ku.html
Copyright © 2020-2023  润新知