Question

我是vuetify的新手。我需要带有右上角标题的rtl v-text-field。怎么可能？我无法在检查员那里做到这一点。这就是我现在所拥有的：

任何帮助将不胜感激

Answer 1

Vuetify在引导过程中通过rtl支持RTL（从右到左）语言。此值是动态的，将应用自定义样式来更改组件的方向。

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

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

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

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

Answer 2

目前没有对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 3

对于Vue 2.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风格

5 个答案: