为什么 Yii2 Captcha 忽略模板中的 {image}

Question

我有这个捕获模板：

<?= $form->field($model, 'verifyCode', [
'template' => '
    <div class="mb-4 field-signupform-verification required">
        <div class="d-flex gap-2 align-items-center w-100">{input}{image}</div>
        <div class="invalid-feedback"></div>
    </div>
',])->widget(Captcha::class, [
   'imageOptions' => [
   'alt' => 'Captcha',
   'title' => 'Click to refresh',
   'style' => 'cursor: pointer',
   'class' => 'ml-auto',
   ],
   'options' => [
   'placeholder' => 'Code from picture',
   ],
   ]) ?>

问题是模板中的 {image} 被完全忽略，它只是将

{image}

回显为 html 文本。虽然有一个图像，但它位于输入的左侧，但我希望它位于右侧。怎么了？

Answer 1

当您执行

$form->field(...)->widget(Captcha::class, ...)

时，您正在使用

yii\captcha\Captcha

作为

yii\widgets\ActiveField

内部的输入小部件。

field()

方法中传递的任何选项都是

ActiveField

小部件的选项，而不是

Captcha

小部件的选项。并且

ActiveField

小部件无法识别其模板中的

{image}

，因为输入字段和图像都是由

Captcha

小部件生成的。因此，您需要将模板分成两部分。第一部分是您将在

field()

方法选项中设置的包装 html。第二部分是图像和输入顺序，您将在

widget()

方法选项中设置：

<?= $form->field($model, 'verifyCode', [
    'template' => '
        <div class="mb-4 field-signupform-verification required">
            <div class="d-flex gap-2 align-items-center w-100">{input}</div>
            <div class="invalid-feedback"></div>
        </div>',
])->widget(Captcha::class, [
    'template' => '{input} {image}',
    'imageOptions' => [
        'alt' => 'Captcha',
        'title' => 'Click to refresh',
        'style' => 'cursor: pointer',
        'class' => 'ml-auto',
    ],
    'options' => [
        'placeholder' => 'Code from picture',
    ],
]) ?>