如何在 RTL 应用程序中使用 Bootstrap-Vue 的表单文件输入小部件？

Question

我正在使用 Bootstrap-Vue 的 Form File Input。由于我在 RTL 中的应用程序，我想扭转它。当前代码：

<b-form-file
class="modal-input"
v-model="fileLocation"
:state="stateFileLocation"
browse-text="בחר"
placeholder="בדיקה בדיקה בדיקה" />

我得到了什么：

如何将按钮移到另一侧？

编辑：我厌倦了使用这个suggestion，但没有任何成功：

.custom-file-label::after {
    left: 0;
    right: auto;
    border-left-width: 0;
    border-right: inherit;
}

编辑：postcss-rtl 是 EOL，所以我通过拥有 postcss.config.js 文件尝试了 rtlcss：

module.exports = {
  plugins: {
    'rtlcss':{
      autoRename: true
    }
  }
}

我还必须安装 rtlcss@2.6.2，因为它依赖于 postcss 8，它不适用于 Vue 2。结果是它翻转了所有内容，甚至是文本：

Answer 1

这应该可以解决问题：

.custom-file-label:after {
   left: 0;
   right: unset;
   border-right: inherit;
   border-left: unset;
   border-radius: 0;
}

.custom-file-label {
   padding-left: 75px; // adjust as needed
}

这是CodeSandbox

Answer 2

我对上面 Tim 的解决方案进行了一些更改，以提供一些清晰性。

在下面链接的完整功能示例中，我对上面 Tim 提供的示例进行了细微更改。

1. 添加了一条注释，以更好地告知如何应用按钮“右侧”的填充来为占位符文本提供适当的间距
2. 使用您的类和嵌套的 SCSS 来避免任何混淆
3. 添加了::v-deep，以防您的样式块被限定（因为它们应该用于组件）
4. 使用您的占位符语言和文本将完整的解决方案完全可视化

工作示例的屏幕截图（来自下面的 stackblitz 链接）：

工作示例可以在这里查看： https://stackblitz.com/edit/vue2-vue-cli-ozudwg?file=src/App.vue

注意：您提到添加其他库来帮助解决此问题无济于事。如果在应用这些代码更改后它仍然无法正常工作。请首先检查这些包的版本是否不匹配，并报告任何不一致的地方。

  "devDependencies": {
    "@vue/cli-service": "^4.5.13",
    "sass": "^1.22.10",
    "sass-loader": "^7.2.0",
    "vue-template-compiler": "^2.6.14"
  },
  "dependencies": {
    "bootstrap": "4.5.3",
    "bootstrap-vue": "2.21.2",
    "vue": "^2.6.14"
  }

如果这些都签出，请暂时删除您可能已安装的所有软件包。如果它有效，我们将知道包以某种方式干扰。

如果在删除包时解决方案有效，但您的应用程序的其他区域需要该包，请重新安装包并回发在浏览器中生成的呈现 HTML，同时获取相关呈现的 CSS。这可以使用 Chrome 开发工具并检查元素来完成。

如果您发现此解决方案解决了您的问题，请将 Tim 归功于任何赏金。我只是想明确解决方案以及您在实施时可能遇到的潜在陷阱。