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

Question

我正在使用Bootstrap的表单文件输入。由于我在RTL中的应用程序，我想逆转它。目前的代码：

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

我得到的是：

​

​

我怎么才能把按钮移到另一边？

编辑：我厌倦了使用这个建议，但没有成功：

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

编辑：postcss-rtl是EOL，所以我尝试使用postcss.config.js文件：

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

此外，我还必须安装rtlcss@2.6.2，因为它依赖于postcss 8，它不适用于Vue 2。其结果是，它以相反的方式翻转所有东西，甚至是文本：

​

​

Answer 1

我在上面对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工具和检查元素来完成。

Answer 2

这应该能起作用：

.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