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

【问题标题】：Bootstrap-Vue input shows warning icon on the right side in RTL appBootstrap-Vue 输入在 RTL 应用程序的右侧显示警告图标
【发布时间】：2021-12-12 04:55:39
【问题描述】：

我使用 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;
}

如何将图标移到左侧？

【问题讨论】：

标签： css vue.js vuejs2 bootstrap-vue

【解决方案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 可以满足您对out of the box 的需求。

【讨论】：

感谢 Eliran。 Bootstrap-Vue 是否提供了一种传递自定义 UI 的方法，以某种方式覆盖原始 UI？在这种情况下，我可以实现我自己的版本。
@vesii，据我所知，它没有。而且似乎也没有一种干净的方法来扩展它。