因目前项目并非前后端分离模式，且用到PHP的yii2框架（所有html代码，js较多内嵌在.php文件内多少采用同步提交【喷墨中...】），遂对于前端面上需要用到的yii2小组件一些整理（因是前端若涉及到php写法错误或者风格问题，敬请指点）

 使用场景尽量为表单

　　基础注册调用小组件

　　

<?php
　　use yii\helpers\Html;
　　use yii\widgets\ActiveForm;
？>

　　//首先注册activeForm小部件，并赋值给$form(php中的声明变量方法用$ 等价于js中的var let)
　　//begin 标志小部件开始
　　<?php $form = ActiveForm::begin([
    　　'id' => 'login-form', //声明小部件的id 即form的id
　　　　 //声明需要添加的属性 ，例如class ， data-x等
    　　'options' => ['class' => 'form-horizontal'],
　　]) ?>

　　　　//注册完小部件后可以在 activeForm小部件声明块中调用小部件的方法
　　    <?= $form->field($model, 'password')->passwordInput() ?>

//：：end标识小部件结束
<?php ActiveForm::end() ?>

 

 

 

1.首先就列出activeForm的一些基本方法：

　　自定义input框：input();

　　文本框:textInput(); 

　　密码框:passwordInput();

　　单选框:radio(),radioList(); 

　　复选框:checkbox(),checkboxList();

　　下拉框:dropDownList(); 

　　多选列表:listBox(); 

　　隐藏域:hiddenInput(); 

　　文本域:textarea(['rows'=>3]); 

　　文件上传:fileInput(); 

　　widget扩展 <?= $form->field($model, 'username')->widget(\yii\widgets\MaskedInput::className(), ['mask' => '9999/99/99',]); ?>

 

 2.下面我就逐一描述下各个方法的基本调用以及如何自定义所需(上述各方法中input之前均是描述的是input标签的类型)

　　2.1 input 文本框/密码框以及各指定类型框

<?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?>
    <!-- 简易用法 使用activeForm 的 fiedld方法  -->
    <!-- 其中 该方法下有 
        textInout/passwordInput 等一些常用input类型方法
        hint 输入前的提示内容
        error 错误内容 //一般由后台生成
        label 可以更改label内的内容
        在hint,error,label设置class后将会重置了 这些方法内原来属于容器上的class若需要可以原样赋回去
    -->
    <!-- 这里的
        $mode为跟字段有关的数据模型 ，
        第二个参数为关系模型中的字段不存在将报错，
        第三个参数为模板内的一些内容的进行自定义
    -->
    <?= $form->field($model, 'username',[
        'options'=>[],//数组里面可以设置自需属性
        // template 为字符串模板可自定义模板 ，
        // 其中 {label} {input} {hint} {error} 存在是会调用对应封装好的html模板 当然你也可以不写这样就不会生成yii2内置小部件模板
        'template' => '{label} {input} {hint} {error}',
        // 以下三个分别可以设置label ，input ，hint，error的属性（都是选填项）
        // 其中如果后面有使用->input...,label(...)等将会将这些里面的配置合并值对应的xxxOptions 内
        'labelOptions' => [
            'class'=>'需要在label上添加的类名'
            //....其他属性集
        ],
        'inputOptions' => [],
        'hintOptions' => [],
        'errorOptions' => [],
    ])->textInput([
        // 在options数组内可以设置任意属性
        'class'=>'testClass',
        'value'=>'测试'
    ])->hint(
        // 设置提示内容，当只有一个参数切为false（boolean）用于显示提示的标签
        'Please enter your name',
        [
            // 设置任意属性
            'class' => 'testHint'
    ])->label(
        // 设置label显示内容，当只有一个参数切为false（boolean）label标签将不会被渲染
        'Name',
        [
            // 设置任意属性
            'class' =>'testLabel'
    ])->error([
        // 任意属性，当只有一个参数切为false（boolean）用于显示错误的标签
        'class'=>'errors'
    ]) ?>

    <!-- 可自定义类型input 这里只描述了input的参数  其余参数参考上个示例 -->
    <?= $form->field($model, 'username')->input(
        // input内只允许放置两个参数即[type ,options]
        'email',//该处为指定type="xxxx"的input类型
        ['class'=>'tests','value'=>'值']//可在内部定义任何属性
    ) ?>
                       
<?php ActiveForm::end();?>

 

　　 2.2 radio 单选框系列

<?php $form=ActiveForm::begin(['id'=>'login','class'=>'login'])?>

    <!-- 
        老实说对这个radio方法相当迷惑  一个单选按钮选择而且一旦选择无法取消，无法一次柑橘属性放置多个值 在有radioList方法的前提下觉得相当鸡肋
        第二个参数中false为是否开启label标签若没开启 labelOption 将无效  ，label设置的值直接显示在容器内
     -->
    <?= $form->field($model, 'username')->radio([
        // 隐藏域中的