Vuetify RTL 风格答案

【问题标题】：Vuetify RTL styleVuetify RTL 风格
【发布时间】：2018-04-21 09:24:10
【问题描述】：

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

任何帮助将不胜感激

【问题讨论】：

嘿@HoseinPanahi，如果您觉得我的回答有帮助，请将其标记为正确的，谢谢:)

标签： vue.js textfield right-to-left vuetify.js

【解决方案1】：

Added features in v1.1.0:

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

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

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

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

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

【讨论】：

【解决方案2】：

对于 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

【讨论】：

【解决方案3】：

如果你正在使用最新的 nuxt.js 和 vuetify，你可以在 nuxt.config.js 中添加它

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

【讨论】：

【解决方案4】：

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;
}

它不完整。但修复一些问题

【讨论】：

dir=rtl 是做什么的？如果我想为我的 datepicker 组件添加自定义样式怎么办？
现在有 :) 已在 v1.1.0 中添加：libupdate.com/libs/38f99a55-a650-4d67-8e60-cd3c2737d043

【解决方案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>

【讨论】：