首页
核心
实例
资源
关于
v1.0

Input 表单基础

使用方法

整体用ax-form-group样式包裹，输入部分用ax-form-con包裹，ax-form-con中的输入控件是按100%显示，通过定义ax-form-input的宽度来确定输入控件的宽度；表头用ax-form-label包裹，框架设定其宽度是160px，用户根据需要自行修改。基本格式如下：

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="text"></div>
                                </div>
                                </div>
                                </div>
姓名：
评论内容：

考虑到一些特殊行业的特殊字段，表头可以一行，也可以两行显示。

您十年前在深圳的曾用名是什么：
IE11下有BUG，暂时没有解决方法。

禁止录入

对输入控件input和textarea填入readonly="即可。

姓名：
评论内容：

文件选择

原始的file控件显示效果比较差，而且不同浏览器显示结果不同，故使用原生js设计了本文件上传控件，美观实用。更多文件域使用方法详见这里。

选择文件：
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择文件：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
                                <input type="file">
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg);"></a>
                                </div>
                                </div>

扩展一：右侧显示结果

在ax-form-con之后使用ax-form-txt样式，配合使用图标即可实现。请观摩效果演示。

姓名：
姓名：
姓名：
你错了
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="text"></div>
                                </div>
                                <div class="ax-form-txt ax-color-error"><span class="ax-iconfont ax-icon-close-o-f"></span> 文字</div>
                                </div>
                                </div>

扩展二：右侧添加清除按钮

在输入控件input和textarea后添加ax-pos-right样式，对图标使用即可，请观摩效果演示。

姓名：
评论内容：
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span></div>
                                </div>
                                </div>
                                </div>

除了添加清除图标之外，同理还可以添加其他图标，想让图标具备什么功能用户可通过自行编写js实现。

姓名：
评论内容：

扩展三：右侧按钮

表单中经常在右侧放置按钮用来跳转或者打开窗口，本框架使用ax-form-btn表示表单右侧按钮。以下以手机验证码为例进行效果演示。更多按钮用法见按钮

手机验证码：
获取验证码
手机验证码：
获取验证码
手机验证码：
52s后重新获取
手机验证码：
手机验证码：
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="text"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn">文字</a>
                                </div>
                                </div>

扩展四：一行输入多个值

在某些行业中，多个字段是关联的，所以需要在一行录入相关联的字段，比如省市县、房源等。在ax-form-input中使用均分或者非均分布局方法实现，本框架设计了两种效果，请观摩效果演示。

选择房子：
室
厅
卫
所在位置：
省
市
县/区
病症：
疾病
症状
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><input type="text"></div>
                                <span class="ax-bunch-txt">文字</span>
                                <div class="ax-col ax-col-8"><input type="text"></div>
                                <span class="ax-bunch-txt">文字</span>
                                <div class="ax-col ax-col-8"><input type="text"></div>
                                <span class="ax-bunch-txt">文字</span>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><input type="text"><span class="ax-pos-right">文字</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input type="text"><span class="ax-pos-right">文字</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input type="text"><span class="ax-pos-right">文字</span></div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>

扩展五：右侧显示文字或图片

框架定义了ax-form-txt、ax-form-head和ax-form-img，用来显示文字和图片。请观摩演示效果

单价：
单位(元)
带头像：
李创江
带图片：
李创江
验证码：
显示验证码 
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">单价：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入商品单价" value="" type="text"></div>
                                </div>
                                <span class="ax-form-txt ax-color-ignore">单位(元)</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">带头像：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg);"></a><span class="ax-form-txt ax-color-brief">李创江</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">带图片：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"></div>
                                </div>
                                <a href="###" class="ax-form-img"><img src="
                                https://src.axui.cn/v2.0/examples/images/image-1.jpg"></a><span class="ax-form-txt ax-color-brief">李创江</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">验证码：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"></div>
                                </div>
                                <span class="ax-form-img"><a href="###">显示验证码</a></span>
                                </div>
                                </div>

基础效果预览

姓名：
姓名：
姓名：
你错了
姓名：
姓名：
您十年前在深圳的曾用名是什么：
选择房子：
室
厅
卫
选择房子：
室
厅
卫
手机验证码：
获取验证码
手机验证码：
获取验证码
手机验证码：
52s后重新获取
单价：
单位(元)
名称(头像)：
李创江
名称(图片)：
李创江
选择文件：
评论：
评论(只读)：
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                </div>
                                <span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                </div>
                                <span class="ax-form-txt ax-color-error ax-iconfont ax-icon-close-o-f"></span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                </div>
                                <div class="ax-form-txt ax-color-error"><span class="ax-iconfont ax-icon-close-o-f"></span> 你错了</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="只读的input" readonly type="text"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="李畅" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">您十年前在深圳的曾用名是什么：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                </div>
                                <span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择房子：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text"><span class="ax-pos-right">室</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div>
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-error ax-icon ax-round"><span class="ax-iconfont ax-icon-trash-alt-f"></span></a><a href="###" class="ax-form-btn ax-btn ax-icon ax-round"><span class="ax-iconfont ax-icon-trash-alt-f"></span></a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择房子：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text"></div>
                                <span class="ax-bunch-txt">室</span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text"></div>
                                <span class="ax-bunch-txt">厅</span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text"></div>
                                <span class="ax-bunch-txt">卫</span>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">手机验证码：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-primary">获取验证码</a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">手机验证码：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn">获取验证码</a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">手机验证码：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text"></div>
                                </div>
                                <span class="ax-form-btn ax-btn ax-forbid">52s后重新获取</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">单价：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入商品单价" value="" type="text"></div>
                                </div>
                                <span class="ax-form-txt ax-color-ignore">单位(元)</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(头像)：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg);"></a><span class="ax-form-txt ax-color-brief">李创江</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(图片)：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text"></div>
                                </div>
                                <a href="###" class="ax-form-img"><img src="
                                https://src.axui.cn/v2.0/examples/images/image-1.jpg"></a><span class="ax-form-txt ax-color-brief">李创江</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择文件：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-file" data-placeholder="点击选择头像" data-text="选择文件">
                                <input type="file">
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg);"></a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">评论：</div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">评论(只读)：</div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论" readonly=""></textarea></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label"></div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full">提交button</button></div>
                                </div>
                                </div>
                                </div>

在线调试请点击这里。

直角风格

框架表单风格是3px的圆角风格，对input、teatarea、selet使用ax-square类即可。

姓名：
选择房子：
室
厅
卫
手机验证码：
获取验证码
名称(头像)：
李创江
选择文件：
评论：
选择城市：
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text" class="ax-square"></div>
                                </div>
                                <span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择房子：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text" class="ax-square"><span class="ax-pos-right">室</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text" class="ax-square"><span class="ax-pos-right">厅</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text" class="ax-square"><span class="ax-pos-right">卫</span></div>
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-error ax-icon ax-square"><span class="ax-iconfont ax-icon-trash-alt-f"></span></a>
                                </div>
                                </div>


                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">手机验证码：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text" class="ax-square"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-primary ax-square">获取验证码</a>
                                </div>
                                </div>


                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(头像)：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text" class="ax-square"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg);"></a><span class="ax-form-txt ax-color-brief">李创江</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择文件：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-file ax-square" data-placeholder="点击选择头像" data-text="选择文件">
                                <input type="file">
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg);"></a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">评论：</div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论" class="ax-square"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择城市：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <select class="ax-square">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="重庆">重庆</option>
                                </select>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label"></div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full ax-square">提交button</button></div>
                                </div>
                                </div>
                                </div>

圆形风格

框架表单风格是3px的圆角风格，对input、textarea、select使用ax-round类即可。

姓名：
选择房子：
室
厅
卫
手机验证码：
获取验证码
名称(头像)：
李创江
选择文件：
评论：
选择城市：
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text" class="ax-round"></div>
                                </div>
                                <span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-f"></span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择房子：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text" class="ax-round"><span class="ax-pos-right">室</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text" class="ax-round"><span class="ax-pos-right">厅</span></div>
                                <span class="ax-gutter-md"></span>
                                <div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text" class="ax-round"><span class="ax-pos-right">卫</span></div>
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-error ax-icon ax-round"><span class="ax-iconfont ax-icon-trash-alt-f"></span></a>
                                </div>
                                </div>


                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">手机验证码：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text" class="ax-round"></div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-primary ax-round">获取验证码</a>
                                </div>
                                </div>


                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(头像)：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" type="text" class="ax-round"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg);"></a><span class="ax-form-txt ax-color-brief">李创江</span>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择文件：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-file ax-round" data-placeholder="点击选择头像" data-text="选择文件">
                                <input type="file">
                                </div>
                                </div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg);"></a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">评论：</div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><textarea name="" cols="" rows="" placeholder="写评论" class="ax-round"></textarea><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a></span></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">选择城市：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <select class="ax-round">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="重庆">重庆</option>
                                </select>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label"></div>
                                <div class="ax-flex-block">
                                <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full ax-round">提交button</button></div>
                                </div>
                                </div>
                                </div>

标题避让

这种用法暂时叫做“避让”，顾名思义当表单控件成为焦点的时候，指示标题缩小至左上方，既能输入内容又可告知当前输入字段，比表单控件自带的placeholder属性好用。目前看来避让效果只是对input和textarea使用比较合适。另外该效果只对常规尺寸和ax-lg尺寸良好，不建议对ax-sm和ax-xs尺寸使用。

axDodge是一个插件，插件运行方式有两种：

  • ax*属性：对ax-dodge标签使用axDodge属性即可按默认参数运行插件（节点没有ax-dodge插件会自动加上）。
  • js实例：通过new axDodge('#id',{参数})方式创建实例运行。

该插件有若干变量：

  • this.targetDom：ax-dodge节点
  • this.inputDom：表单控件节点
  • this.labelDom：填写提示节点
  • this.isFocus：聚焦状态，true或false
  • this.inputDom：表单控件节点

该插件有两个操作方法：

  • this.set：填值并聚焦表单，支持两个参数：填入文本值和回调函数，回调函数支持一个参数即填入值
  • this.clear：清除表单值并失焦，支持一个参数即回调函数，回调无参数

本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：

  • onInit/init：初始化后执行，无参数
  • onSet/set：设置值并聚焦后执行，支持一个参数即表单值
  • onClear/clear：清除值并失焦后执行，无参数

演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。

立即避让 取消避让
JS HTML 
  •                                             let dodgeIns = new axDodge('#divDodge'),
                                                doDodge = document.querySelector('#doDodge'),
                                                clearDodge = document.querySelector('#clearDodge');
                                            doDodge.onclick = function () {
                                                dodgeIns.set('张春阳');
                                            }
                                            clearDodge.onclick = function () {
                                                dodgeIns.clear();
                                            }
                                            dodgeIns.on('set', (value) => {
                                                console.log(`聚焦了，当前值是:${value}`)
                                            }).on('clear', (value) => {
                                                console.log(`失焦了，并清除了值`)
                                            });
                                        
  •                                     <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-con">
                                                <div class="ax-form-input" id="divDodge"><input name="username" placeholder="请输入姓名" type="text"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-flex-block">
                                                <div class="ax-form-input" axDodge><textarea name="" cols="" rows="" placeholder="请写下你的评论"></textarea></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-con">
                                                <div class="ax-form-input" axDodge><input name="username" placeholder="请输入姓名" type="text" class="ax-lg"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ax-break-md"></div>

                                    <div class="ax-form-group">
                                        <div class="ax-flex-row">
                                            <div class="ax-flex-block">
                                                <div class="ax-form-input" axDodge><textarea name="" cols="" rows="" placeholder="请写下你的评论" class="ax-lg"></textarea></div>
                                            </div>
                                        </div>
                                    </div>

可配置的参数如下：

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axDodge('#id'{
        insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
        placeholder: '请输入...',//input的提示
        onInit: '',//回调函数，初始化后执行，无参数
        onSet: '',//回调函数，设置值并聚焦后执行，支持回调函数，回调带一个参数即input的值
        onClear: '',//回调函数，清空失焦后执行，支持回调函数，回调无参数
      });
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"

不同尺寸

本框架input默认高度是38px，用户可以对input和textarea追加尺寸类实现不同大小，包括：高22px的ax-xs尺寸、高28px的ax-sm尺寸和高48px的ax-lg尺寸。如果是组合表单，那么除了给input和textarea追加尺寸类之外还需要给ax-form-group追加尺寸类。

高22px的ax-xs。

名称(头像)：
李创江 
                                <input name="username" placeholder="输入登录名称" type="text" class="ax-xs">
                                <div class="ax-break-md"></div>
                                <textarea name="" cols="" rows="" placeholder="写评论" class="ax-xs"></textarea>
                                <div class="ax-break-md"></div>
                                <select class="ax-xs">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="重庆">重庆</option>
                                </select>
                                <div class="ax-break-md"></div>
                                <div class="ax-form-group ax-xs">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(头像)：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" class="ax-xs" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg);"></a><span class="ax-form-txt ax-color-brief">李创江</span>
                                </div>
                                </div>

高28px的ax-sm。

名称(头像)：
李创江 
                                <input name="username" placeholder="输入登录名称" type="text" class="ax-sm">
                                <div class="ax-break-md"></div>
                                <textarea name="" cols="" rows="" placeholder="写评论" class="ax-sm"></textarea>
                                <div class="ax-break-md"></div>
                                <select class="ax-sm">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="重庆">重庆</option>
                                </select>
                                <div class="ax-break-md"></div>
                                <div class="ax-form-group ax-sm">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(头像)：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" class="ax-sm" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg);"></a><span class="ax-form-txt ax-color-brief">李创江</span>
                                </div>
                                </div>

高48px的ax-lg。

名称(头像)：
李创江 
                                <input name="username" placeholder="输入登录名称" type="text" class="ax-lg">
                                <div class="ax-break-md"></div>
                                <textarea name="" cols="" rows="" placeholder="写评论" class="ax-lg"></textarea>
                                <div class="ax-break-md"></div>
                                <select class="ax-lg">
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="重庆">重庆</option>
                                </select>
                                <div class="ax-break-md"></div>
                                <div class="ax-form-group ax-lg">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">名称(头像)：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="" class="ax-lg" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear></a><span class="ax-iconfont ax-icon-me"></span></span></div>
                                </div>
                                <a href="###" class="ax-form-head" style="background-image:url(
                                https://src.axui.cn/v2.0/examples/images/head01.jpg);"></a><span class="ax-form-txt ax-color-brief">李创江</span>
                                </div>
                                </div>

所有文本输入类型

对于input文本输入的诸多类型，大致分为两类，一类是除了外框没有其他修饰的元素；一类是带着某些修饰功能的元素。

无修饰类别：text、url、tel、email、password

有修饰类别：number(增减按钮)、search(清空按钮)、color(颜色选择按钮)、date(包括datetime/month/week/time/datetime-local)

AXUI只对type=text进行默认样式设定，如果其他类型的文本输入框需要美化请追加ax-input样式。

text
无type：
url：
tel：
email：
password：
number：
search：
date：
color：
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">text</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="text" placeholder="请输入..." ></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">无type：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">url：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="url" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">tel：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="tel" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">email：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="email" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">password：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="password"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">number：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="number" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">search：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="search" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">date：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="date" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">color：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="color" placeholder="请输入..." class="ax-input"></div>
                                </div>
                                </div>
                                </div>

移动端自适应

本框架默认在PC下使用，如果需要在移动端实现自适应效果请在ax.css之后加载ax-response.css。自适应效果请详见：基础表单

插件使用方法

以上的input方法是最原始、简单的创建方法，对于管理系统开发者而言大概认为不够好用的。我们通常需要对input进行赋值、清空、事件等操作，通过实例化之后更便于管理。

插件运行方式有四种：

  • ax*属性：对input标签使用axInput属性即可按默认参数运行插件。
  • ax*属性：对div标签使用axInput属性即可按默认参数运行插件（此div将作为wrapper包裹input）。
  • js实例：通过new axInput('#ID')方式创建实例运行。
  • js实例：通过new axInput('')方式创建内存实例运行。
input创建实例：
父层创建实例：
用ID创建实例：
创建内存实例：
F12打开控制台看看，input节点将被新创建的ax-form-wrapper包裹。
HTML JS 
  •                                             <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                            <div class="ax-form-label">input创建实例：</div>
                                            <div class="ax-form-con">
                                            <div class="ax-form-input"><input placeholder="请输入姓名" type="text" axInput></div>
                                            </div>
                                            </div>
                                            </div>

                                            <div class="ax-break-md"></div>

                                            <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                            <div class="ax-form-label">父层创建实例：</div>
                                            <div class="ax-form-con">
                                            <div class="ax-form-input" axInput></div>
                                            </div>
                                            </div>
                                            </div>

                                            <div class="ax-break-md"></div>

                                            <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                            <div class="ax-form-label">用ID创建实例：</div>
                                            <div class="ax-form-con">
                                            <div class="ax-form-input"><input placeholder="请输入姓名" type="text" id="input"></div>
                                            </div>
                                            </div>
                                            </div>
                                        
  •                                             new axInput('#input');
                                            console.log(new axInput(''));

功能扩展

实例化的input自带了清除按钮，可通过clearShow:true显示，另外用户可通过extend参数自行扩展功能按钮。

extend可以是一个对象（一个扩展），也可以是一个数组（多个扩展），扩展的参数说明如下：

  • name：对扩展组件取一个名字。
  • icon：扩展组件的图标样式名，比如"ax-iconfont ax-icon-zoomin"。
  • text：扩展的按钮文本，icon和text用一个便好了。
  • node：扩展按钮的节点名称，默认是“a”，用户可以填“i”或“span”。
  • callback：扩展按钮点击之后的回调函数，支持两个参数button（按钮自身）和field（input域）。
创建扩展：
HTML JS 
  •                                             <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                            <div class="ax-form-label">创建扩展：</div>
                                            <div class="ax-form-con">
                                            <div class="ax-form-input" id="extend"></div>
                                            </div>
                                            </div>
                                            </div>
                                        
  •                                             new axInput('#extend',{
                                            extend:[
                                            {
                                            name:'zoom',
                                            icon:'ax-iconfont ax-icon-zoomin',
                                            node:'a',
                                            callback:function(button,field){
                                            button.onclick = ()=>{
                                            field.value = '看，我创建了一个扩展组件！';
                                            }
                                            }
                                            },
                                            {
                                            name:'me',
                                            icon:'ax-iconfont ax-icon-me',
                                            node:'a',
                                            callback:function(button,field){
                                            button.onclick = ()=>{
                                            new axMessage({
                                            content:'看，我创建了一个扩展组件！'
                                            }).show();
                                            }
                                            }
                                            },
                                            ],
                                            });

字数限制

input实例化后的一个重要功能是使用字数限制，通过limit参数设置允许的文字数量，input下方将实时显示已输入文字数量和剩余可输入的文字数量。

允许输入10个字：
HTML JS 
  •                                             <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                            <div class="ax-form-label">允许输入10个字：</div>
                                            <div class="ax-form-con">
                                            <div class="ax-form-input" id="limit"></div>
                                            </div>
                                            </div>
                                            </div>
                                        
  •                                             new axInput('#limit', {
                                            limit: 10,
                                            });

其他类型

axInput实例化的类型type，默认是text，除了text还支其他持四类input实例化。

  • 多行文本域：textarea
  • 隐藏域：hidden
  • 按钮：submit、reset和button
  • 功能性类型input：url、tel、search、email、color、number、range、month、week、date、time、datetime、datetime-local
search类型：
textarea类型：
button类型：
注意：按钮类型的按钮文字通过value参数来设定
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">search类型：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input" axInput='type:"search",className:"ax-input"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">textarea类型：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input" axInput='type:"textarea"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">ccccc
                                <div class="ax-form-label">button类型：</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input" axInput='type:"button",value:"按钮",className:"ax-btn"'></div>
                                </div>
                                </div>
                                </div>

操作方法

创建实例后我们需要使用内置方法进行增删改操作。

  • set：设置input的value，支持两个参数：设置文本和回调函数
    • text:文本内容
    • callback:回调函数，支持三个参数：input本身、实际文本值和剩余可输入的文字数量
  • getValues：获取input的值，支持回调函数，无参数
  • clear：清空input值，支持回调函数，回调函数可使用一个参数，即input本身

既然需要操作实例，那么便需要了解内置的变量有哪些：

  • this:实例本身
  • this.parent:input的父节点
  • this.field:input的自身节点
  • this.limit:字数限制的div节点
  • this.tools:扩展工具节点
  • this.output:实例输出内容，是一个对象，属性如下：
    • name:字段名
    • value:input的文本值
    • dom:input本身节点
    • parent:input父节点
    • type:input类型，与options.type一致
操作：
设置值 清除值 获取值 获取详细，打开F12看控制台
HTML JS 
  •                                             <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                            <div class="ax-form-label">操作：</div>
                                            <div class="ax-form-con">
                                            <div class="ax-form-input" id="operate"></div>
                                            </div>
                                            </div>
                                            </div>

                                            <div class="ax-break"></div>

                                            <a href="###" id="set" class="ax-btn">设置值</a>
                                            <a href="###" id="clear" class="ax-btn">清除值</a>
                                            <a href="###" id="get" class="ax-btn">获取值</a>
                                            <a href="###" id="detail" class="ax-btn">获取详细，打开F12看控制台</a>
                                        
  •                                             let optIns = new axInput('#operate', {
                                            limit: 20,
                                            clearShow: true,
                                            placeholder: '请输入...'
                                            }),
                                            set = document.querySelector('#set'),
                                            get = document.querySelector('#get'),
                                            clear = document.querySelector('#clear'),
                                            detail = document.querySelector('#detail');

                                            set.onclick = () => {
                                            optIns.set('伟大的中国', () => {
                                            alert('设置了“伟大的中国”');
                                            });
                                            }
                                            get.onclick = () => {
                                            alert('当前值：' + optIns.getValues());
                                            }
                                            clear.onclick = () => {
                                            optIns.clear(() => {
                                            alert('清空了');
                                            });
                                            }
                                            detail.onclick = () => {
                                            console.log(optIns.output);
                                            }

监听事件

本插件有若干监听方法，以on为关键字，实例后监听和在参数中监听效果相同。格式是：instance.on('event',function(){})；具体事件说明如下：

  • set/onSet 设置值后执行，支持三个参数：
    • field input节点本身
    • text input的值
    • remainder 剩余可输入的文字数量
  • onInit 初始化后执行，支持参数output，即输出详细
  • clear/onClear 清除后执行，支持参数output，即输出详细
  • set/onSet 设置值后执行，支持input节点本身，input的值和剩余可输入的文字数量
  • reset/onReset 重置后执行，支持参数output，即输出详细
  • exceed/onExceed 字数到极限后执行，支持参数output，即输出详细
  • input/onInput 键入文字后执行，支持参数output，即输出详细

演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。

监听：
设置值 重置 清除值
HTML JS 
  •                                             <div class="ax-form-group">
                                            <div class="ax-flex-row">
                                            <div class="ax-form-label">监听：</div>
                                            <div class="ax-form-con">
                                            <div class="ax-form-input" id="on"></div>
                                            </div>
                                            </div>
                                            </div>

                                            <div class="ax-break"></div>

                                            <a href="###" id="onset" class="ax-btn">设置值</a>
                                            <a href="###" id="onclear" class="ax-btn">清除值</a>
                                        
  •                                             let onIns = new axInput('#on', {
                                                limit: 20,
                                                value:'我和我的祖国',
                                                clearShow: true,
                                                placeholder: '请输入...',
                                                onInit: () => {
                                                    console.log('初始化了！')
                                                }
                                            }),
                                                onset = document.querySelector('#onset'),
                                                onreset = document.querySelector('#onreset'),
                                                onclear = document.querySelector('#onclear');
                                            onset.onclick = () => {
                                                onIns.set('伟大的中国');
                                            }
                                            onreset.onclick = () => {
                                                onIns.reset();
                                            }
                                            onclear.onclick = () => {
                                                onIns.clear();
                                            }
                                            onIns.on('set', (field, text) => {
                                                console.log('设置了值：' + text)
                                            }).on('reset', () => {
                                                console.log('重置了')
                                            }).on('clear', (field, text) => {
                                                console.log('清空了')
                                            }).on('exceed', () => {
                                                console.log('字数到极限了');
                                            }).on('input', (obj) => {
                                                console.log('输入了文字：' + obj.dom.value);
                                            });

参数选项

                                document.addEventListener("DOMContentLoaded", function() {
                                var demo1 = new axInput('#id',{
                                insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
                                type: 'text', //input类型，text、range、date、password、textarea等
                                name: '', //字段名
                                value: '', //初始值
                                limit: 0, //最多录入多少字符，默认为0不限制
                                placeholder: '', //表单域输入提示
                                width: '', //设置表单域宽度，比如width:'100px'
                                height: '', //设置表单域高度，比如height:'100px'
                                size: '', //设置表单域的尺寸,可以填xs、sm、md或lg
                                className: '', //设置表单域样式名
                                props: '', //设置表单域其他属性，比如props:{role:'',display:''}
                                toolsShow: true, //设置是否显示右侧工具，默认显示
                                extend: '', //工具扩展，可以是一个对象也可以是一个数组，格式为[{name:'',icon:'',text:'',node:'',callback:''},]
                                clearShow: false, //当toolsShow: true的时候是否显示清除按钮，默认true显示，可选择false不显示
                                language:{
                                    limit: `已输入<i have>0</i>个字符,还可以输入<i remainder><# this.value #></i>个字`,//字数限制提示
                                },
                                breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
                                onClear: '', //清除值后的回调函数，支持参数output，即输出详细
                                onSet: '', //设置值后的回调函数，支持input节点本身，input的值和剩余可输出的文字数量
                                onReset: '', //重置后回调，支持参数output，即输出详细
                                onGet: '', //获取值后的回调函数，支持参数output，即输出详细
                                onInit: '', //初始化后的回调函数，支持参数output，即输出详细
                                });
                                });
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"