我們已經開始在Vuetify中使用RTL，它工作得很好，但在滑塊組件中有一個小問題。 問題是，我們使用這個組件作為視頻時間的滑塊，但即使在查看RTL語言時，視頻滑塊也是從左邊開始的(好吧，至少在我們最大的RTL國家以色列是這樣管理的)。

我想選擇繞過應用程序中特定位置的rtl配置，我找不到一種方法在Vuetify文件。有人有線索嗎？

預先感謝

滑塊使用這個。$vuetify.rtl來確定方向。但是，這個。$vuetify是一個全局對象，更改rtl值將會改變整個應用程序的值。

但是您可以替換組件實例中的對象。為此，您需要訪問組件實例，這可以通過模板引用或使用指令來完成:

Vue.directive(
  'vuetify-ltr', 
  (el, binding, vnode) => {
    const instance = vnode.componentInstance
    if (!instance.$vuetify) return
    instance.$vuetify = new Proxy(instance.$vuetify, {
      get(target, prop, receiver) {
        return prop === 'rtl' ? false : target[prop]
      },
    })
  }
)

它使用一個代理將$vuetify中的其他數據綁定到原始對象。但是由于VSlider不使用$vuetify中的任何其他值，所以您也可以覆蓋整個值。

使用該指令，您現在可以切換各個Vuetify組件的方向:

<v-slider
  v-vuetify-ltr
  ...
/>

這是一個片段:

Vue.directive(
  'vuetify-ltr', 
  (el, binding, vnode) => {
    const instance = vnode.componentInstance
    if(!instance.$vuetify) return
    instance.$vuetify = new Proxy(instance.$vuetify, {
      get(target, prop, receiver) {
        return prop === 'rtl' ? false : target[prop]
      },
    })
  }
)

new Vue({
  el: '#app',
  vuetify: new Vuetify({
    rtl: true,
  }),
})

<link  rel="stylesheet">
<link  rel="stylesheet">
<link  rel="stylesheet">

<div id="app">
  <v-app>
    <v-main>
      <v-slider label="rlt"></v-slider>
      <v-slider label="ltr" v-vuetify-ltr></v-slider>
      <v-slider label="still rlt"></v-slider>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>