vuetify中如何避免代码重复？

Question

在这里，我正在使用 vuetify 设计一个项目，目前我正在研究 vuetify 主题颜色，通过我可以更改导航抽屉、菜单栏和页面的背景颜色，但这样做我发现我再次重复代码并且再次增加了我的代码长度。所以，现在我正试图缩短我的代码。您可以在下面看到我正在重复代码：

颜色：[ { 文本：“蓝色”，值：“#2196F3”}， { 文本：“紫色”，值：“#9C27B0”}， { 文本：“灰色”，值：“#9E9E9E”}， {文本：“粉红色”，值：“#E91E63”}， { 文本：“橙色”，值：“#FF9800”}， { 文本：“蓝绿色”，值：“#009688”}， { 文本：“青色”，值：“#00BCD4”}， { 文本：“琥珀”，值：“#FFC107”}， { 文本：“深紫色”，值：“#673AB7”}， { 文本：“深橙色”，值：“#FF5722”}， { 文本：“绿色”，值：“#4CAF50”} ]

我的代码在这里：

<template>
    <v-menu offset-y>
        <template v-slot:activator="{ on }">
            <v-btn v-on="on" icon height="40" width="40" title="Personal preferences">
                <v-icon class="mt-1" size="28">mdi-account-cog</v-icon>
            </v-btn>
        </template>
        <v-list dense>
           <v-list-item  @click.stop="dialog = true">
                <v-list-item-icon class="mr-2">
                  <v-icon color="red">mdi-select-color</v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                    <v-list-item-title>
                        Themes/Colours
                    </v-list-item-title>
                </v-list-item-content>

                 <v-dialog v-model="dialog" max-width="400">
        <v-card>
          <v-card-title>Theme</v-card-title>
          <v-card-text>
            <v-btn
              v-for="color in colors"
              :key="color.text"
              :color="color.text"
              @click="changeTheme(color.value)"
              class="ma-2"
              style="width:150px;"
            >{{color.text}}</v-btn>
          </v-card-text>




        </v-card>
      </v-dialog>
            </v-list-item>



            <v-list-item>
                <v-list-item-icon class="mr-2">
                  <v-icon>mdi-bell-off</v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                    <v-list-item-title>
                        Notification Preferences
                    </v-list-item-title>
                </v-list-item-content>
            </v-list-item>
        </v-list>
    </v-menu>
</template>

      <script>


    export default {
        data() {
            return {

                   dialog: false,

               theme: "",
      colors: [
        { text: "blue", value: "#2196F3" },
        { text: "purple", value: "#9C27B0" },
        { text: "grey", value: "#9E9E9E" },
        { text: "pink", value: "#E91E63" },
        { text: "orange", value: "#FF9800" },
        { text: "teal", value: "#009688" },
        { text: "cyan", value: "#00BCD4" },
        { text: "amber", value: "#FFC107" },
        { text: "deep-purple", value: "#673AB7" },
        { text: "deep-orange", value: "#FF5722" },
        { text: "green", value: "#4CAF50" }
      ]
            }
        },
   methods: {
    changeTheme(item) {
      this.theme = item;
      console.log(item);
      this.$vuetify.theme.themes.light.primary = item;
    }
  }


    }
</script>

Answer 1

你可以这样试试：

<template>
           <v-btn
              v-for="color in colorsList"
              :key="color.text"
              :color="color.text"
              @click="changeTheme(color.value)"
              class="ma-2"
              style="width:150px;"
            >{{color.text}}</v-btn>
</template>

<script>
export default 
{
  data() 
  {
    return {
      dialog: false,
      theme: "",
      colors: 
      {
        blue: "#2196F3",
        purple: "#9C27B0",
        grey: "#9E9E9E",
        pink: "#E91E63",
        orange: "#FF9800",
        teal: "#009688",
        cyan: "#00BCD4",
        amber: "#FFC107",
        "deep-purple": "#673AB7",
        "deep-orange": "#FF5722",
        green: "#4CAF50"
      }
    };
  },
  computed:
  {
    colorsList()
    {
      return Object.entities.map(entitiy => ({
        text: entity[0],
        value: entity[1]
      }));
    }
  }

Answer 2

为什么不修改主题？ https://vuetifyjs.com/en/customization/theme/

在您的应用中初始化 vuetify 时只需提供一个配置对象。

// main.js or a separate file where you init vuetify

import Vuetify from 'vuetify';

const opts = {
  theme: {
    themes: {
      light: { /* your list of colors */},
      dark: { /* another list of colors maybe */},
    },
  },
};

export default new Vuetify(opts);

如果您需要从那里定义的所有颜色名称的新数组，您可以使用Object.keys(this.$vuetify.theme.themes.light).map()。如果您还使用深色主题，则必须稍微修改代码以在 this.$vuetify.theme.dark 为 true 时从 this.$vuetify.theme.themes.dark 调用。

computed: {
  themeColors() {
    const activeTheme = this.$vuetify.theme.dark ? 'dark' : 'light';
    return Object.keys(this.$vuetify.theme.themes[activeTheme]).map();
  }
}

如果您需要为亮/暗设置新颜色，您可以简单地使用基于单击项目的新颜色对象覆盖当前主题。这也使您可以更好地控制要覆盖的颜色，您只能覆盖 Primary，还可以覆盖 Secondary、Accent 或 vuetify 用于其组件样式的任何其他语义颜色名称。