Vuetify RTL 风格

Question

我是 vuetify 的新手。我需要带有 top-right 标题的 rtl v-text-field。这怎么可能？我不能在检查员中这样做。这是我现在拥有的：

如有任何帮助，我们将不胜感激

Answer 1

目前没有对 vuetify 的 RTL 支持。但您可以创建自己的 CSS 并更改您需要的内容。首先：将 dir=rtl 添加到您的应用程序并添加此样式：

textarea:focus, input:focus, button:focus { outline: none !important; }

.list__tile__title {
    text-align: right;
}

.toolbar__title {
    margin-right: 16px;
}

.input-group--text-field label {
    position: absolute;
    top: 18px;
    right: 0;
}

.input-group label {
    text-align: right;
    -webkit-transform-origin: top right;
    transform-origin: top right;
}
.input-group.input-group--selection-controls label{
    right: 32px;
    left: auto;
}
.input-group.input-group--selection-controls .icon--selection-control {
    left: auto;
    right: 0;
}
.input-group--selection-controls__ripple {
    -webkit-transform: translate3d(12px,-52%,0);
    transform: translate3d(12px,-52%,0);
    left: auto;
    right: 0;
}

还不完整。但修复了一些问题

Answer 2

Added features in v1.1.0:

Vuetify supports RTL (right to left) languages through the rtl prop during bootstrap. This value is dynamic and will apply custom styles to change the orientation of your components.

要启用配置级 RTL 支持，请将 rtl 属性添加到 Vuetify 实例选项：

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  rtl: true
})

您可以随时通过在您的应用程序中直接修改 $vuetify.rtl 属性来更改此值。

Answer 3

对于Vue2.x，设置RTL为true的方法是a bit different:

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  rtl: true,
})

或者，和以前一样，您可以修改 vuetify 对象上的 rtl 值：this.$vuetify.rtl = true

Answer 4

如果您将最新的 nuxt.js 与 vuetify 一起使用，您可以将其添加到 nuxt.config.js

buildModules: [
  ['@nuxtjs/vuetify', { rtl: true }],
  ...
],

Answer 5

您应该使用 reverse 属性作为输入组件。另外，不要忘记更改输入的文本方向。这是一个例子：

input{
  direction: rtl;
}

.v-list-item__content{
  text-align: right
}

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>
          <v-row>
            <v-col cols="4" right order="2">
              <v-select
                reverse
                outlined
                :items="drinks"
                label="نوشیدنی"
               >
               </v-select>
             </v-col>
             <v-col order="1">
              <v-text-field
                reverse outlined
                label="توضیحات"
                placeholder="شرایط نوشیدنی مطلوب شما"
              >
              </v-text-field>
            </v-col>
          </v-row>
        </v-container>
      </v-content>
    </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>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: {
        drinks: ['چای', 'قهوه']
      }
    })
  </script>
</body>
</html>

Vuetify RTL 风格

Vuetify RTL style

textfield

right-to-left

vue.js

vuetify.js