css - Bootstrap-Vue 输入在 RTL 应用程序的右侧显示警告图标

Question

我使用 Boostrap-Vue 和 Vue2。我想使用b-form-input. 该组件提供state了在输入无效的情况下可以使框变为红色的组件。我的应用程序是 RTL，所以我希望红色图标位于框的左侧，但我得到：

编码：

<div class="col-md-6">
  <div class="modal-label">HEADER</div>
  <b-form-input
   class="modal-input"
   v-model="dNumber"
   type="text"
   :state="stateDNumber"
   :trim="trimInput"/>
</div>

在 CSS 中我有：

div {
  margin: auto 0;
  direction: rtl;
}

input {
  direction: rtl;
}

如何将图标移动到左侧？

标签： cssvue.jsvuejs2bootstrap-vue

Answer 1

声明direction: rtl在这里没有任何效果，因为 bootstrap-vue 组件只是使用硬编码值来表示方向性，因此不支持 RTL。

这不是很干净，但您可以覆盖负责表单控件验证的 CSS 选择器：

.form-control.is-invalid,
.form-control.is-valid,
.was-validated .form-control:invalid,
.was-validated .form-control:valid {
    /* overriding hard-coded values, quite dirty. */
    background-position: left calc(0.375em + 0.1875rem) center;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    /* this one is bluntly copied from the base rule
       in .form-control, which makes it even more dirty! */
    padding: .375rem .75rem;
    padding-left: calc(1.5em + .75rem);
}

如果您想要一个更强大的解决方案，我建议您使用另一个库，该库对双向性有更好的（嗯，现有的）支持。

经过一番搜索，我发现vuetify开箱即用。