如何仅在选择特定选项卡时显示框阴影？

Question

对于这个网站，我有两个登录选项卡，如下图所示，对于选定的选项卡，它旁边显示一个图标，但为了让这个选项卡被选中更加明显，我想添加一些排序box-shadow 之类的东西，但现在，它显示了两个选项卡的 box-shadow，我只是无法理解如何让它只显示选定的选项卡。

这是我的代码 - 我尝试添加 v-if 语句，但它不会工作，因为我已经有 v-for 所以如果有任何方法可以使它工作，我真的会如果你能在这里帮助我，我很高兴。提前致谢！

<template>
  <v-main id="login">
    <v-container fill-height fluid>
      <v-layout align-center justify-center>
        <v-flex md4 sm8 xs12>
          <v-card class="elevation-12">
            <v-toolbar color="primary" dark>
              <v-toolbar-title>
                <v-icon left> mdi-login-variant </v-icon>
                {{ $t("welcome") }}
              </v-toolbar-title>
            </v-toolbar>
            <v-divider />
            <v-tabs v-model="selectedTab" grow hide-slider>
              <v-tab
                v-for="(tab, i) in tabs"
                :key="i"
                :class="{
                  'primary white--text': tab == selectedTab,
                  caption: tab != selectedTab,
                }"
                :href="`#${tab}`"
                id="boxShadow" //This is where I added the ID 
                class="pa-0"
              >
                {{ tab }}
                <v-icon id="IconPosition" v-if="tab === selectedTab"
                  >mdi-login-variant</v-icon
                >
              </v-tab>
              <v-tab-item
                v-for="(tab, i) in tabs"
                :key="i"
                :value="tab"
                reverse-transition="scale-transition"
                transition="scale-transition"
              >
                <v-divider />
                <v-card-text>
                  <v-form @submit.prevent="login">
                    <v-text-field
                      v-model.lazy="username"
                      :label="$t('username')"
                      :prepend-inner-icon="
                        tab === 'Windows'
                          ? 'mdi-microsoft-windows'
                          : 'mdi-account'
                      "
                      :rules="[username !== null || required]"
                      name="username"
                      outlined
                      placeholder=" "
                      type="text"
                    />
                    <v-text-field
                      v-model.lazy="password"
                      :label="$t('password')"
                      :rules="[password !== null || required]"
                      name="password"
                      outlined
                      placeholder=" "
                      prepend-inner-icon="mdi-lock"
                      type="password"
                    />
                    <!-- If error, rended error component -->
                    <error-view
                      v-if="error"
                      :error="error"
                      :is-login="true"
                      class="pa-0"
                    />
                    <v-card-actions class="pa-0">
                      <v-spacer />
                      <v-btn :loading="loading" color="primary" type="submit">
                        {{ $t("submit") }}
                      </v-btn>
                    </v-card-actions>
                  </v-form>
                </v-card-text>
              </v-tab-item>
            </v-tabs>
            <div id="version-div">
              <app-version />
            </div>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-main>
</template>

<script>
import AppVersion from "@/components/version";

const errorView = () => import("@/components/errorView");

export default {
  name: "Login",
  components: {
    errorView,
    AppVersion,
  },

  data() {
    return {
      tabs: ["Windows", "Standard"],
      selectedTab: "Standard",
      username: null,
      password: null,
      loading: false,
      error: null,
      required: (value) => !!value || this.$t("req"),
    };
  },

  methods: {
    resetForm(value) {
      this.username = this.password = value;
    },
    login() {
      if (!this.username || !this.password) {
        this.error = this.$t("warn");
        this.resetForm(null);
      } else {
        this.loading = true;
        const encodedPass = window.btoa(
          unescape(encodeURIComponent(this.password))
        );
        this.$store
          .dispatch("retrieveUser", {
            username: this.username,
            password: encodedPass,
            outside: this.selectedTab === "Windows" ? false : true,
          })
          .then(() => {
            this.$router.push({ name: "home" });
            this.error = null;
          })
          .catch((error) => {
            this.error = error;
          })
          .finally(() => {
            this.resetForm("");
            this.loading = false;
          });
      }
    },
  },
};
</script>

<style>
#boxShadow {
  -moz-box-shadow: inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow: inset 0 0 10px #000000;
}
</style>

Answer 1

id 属性应该是唯一的，在您的情况下呈现的选项卡将具有相同的 ID，请尝试将 #boxShadow 命名为 class .boxShadow喜欢 :

<style>
.boxShadow {
  -moz-box-shadow: inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow: inset 0 0 10px #000000;
}
</style>

然后有条件地绑定它:

          <v-tab
            v-for="(tab, i) in tabs"
            :key="i"
            :class="{
              'primary white--text': tab == selectedTab,
              caption: tab != selectedTab,
               boxShadow: tab === selectedTab,
            }

或者只是：

            :class="{
              'primary white--text boxShadow': tab == selectedTab,
              caption: tab != selectedTab,
            }

如何仅在选择特定选项卡时显示框阴影？

How to show box shadow only when certain tab is selected?

css

vue.js

vuejs2

vuetify.js