![RTL]( "RTL")
本文介绍了Vue.js - 如何在 RTL 方向使用 iView?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 'Vue.js' 创建一个阿拉伯语网站，我使用 iView 作为 UI 组件，但问题是它是为 LTR 布局而设计的，而阿拉伯语是RTL.如何将 iView 组件转换为 RTL?
示例:我想在此网站现在在右边"
解决方案
您可以简单地使用 dir='rtl' 属性，如 <i-input dir="rtl" .../> 但问题在于搜索按钮不适合，因此要解决该问题，请添加一些 CSS 规则，就像我在以下工作示例中所做的那样:
var Main = {}var 组件 = Vue.extend(Main)new Component().$mount('#app')
@import url("//unpkg.com/iview/dist/styles/iview.css");#应用程序 {填充:32px；}.ivu-input-group-append,.ivu-input-group>.ivu-input:last-child {边界半径:4px 0 0 4px！重要；}.ivu-input-search::before{宽度:0；}
<script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/iview/dist/iview.min.js"></script><div id="应用程序"><div><i-input search enter-button search placeholder="ابحث عن طريق الإسم أو المدينة" dir="rtl"/>
I'm creating an Arabic website with 'Vue.js', and I use iView for UI components, but the problem is that it's designed for LTR layouts while Arabic is RTL. How can I convert iView components to RTL??
Example: I want to make the search button in the input field on the left in this website "it's now on the right"
解决方案
You could simply use dir='rtl' attribute like <i-input dir="rtl" .../> but the problem is with the search button which will not fit appropriately, so to fix that add some CSS rules like i did in the following working example :
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>
这篇关于Vue.js - 如何在 RTL 方向使用 iView?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！