javascript - iView-如何在RTL布局中使用？

我正在使用'Vue.js'创建一个阿拉伯语网站，并且我将iView用于UI组件，但是问题是它是为LTR布局设计的，而阿拉伯语是RTL。如何将iView组件转换为RTL？

示例：我想在此website的左侧输入字段中创建搜索按钮，“它现在在右侧”

最佳答案

您可以像dir='rtl'那样简单地使用<i-input dir="rtl" .../>属性，但是问题在于搜索按钮不合适，因此要修复该问题，请像我在以下工作示例中所做的那样添加一些CSS规则：

var Main = {

}

var Component = Vue.extend(Main)
new Component().$mount('#app')

@import url("//unpkg.com/iview/dist/styles/iview.css");
#app {
  padding: 32px;
}



.ivu-input-group-append,
.ivu-input-group>.ivu-input:last-child {
  border-radius: 4px 0 0 4px!important;

}
.ivu-input-search::before{
width:0;
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
  <div>
    <i-input search enter-button search placeholder="ابحث عن طريق الإسم أو المدينة" dir="rtl" />

  </div>
</div>