简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  問答  >  主體

當活動選項卡更改時更改圖像圖標

<p>目前我有一個 v-tab，它有四個帶有圖像圖示和文字的選項卡。但是，當選項卡處於活動狀態時，活動選項卡圖示應變更為另一個影像。我該怎麼做？ </p> <pre class="brush:php;toolbar:false;"><v-tabs v-model="tabs" class="tabs-menu"> <v-tab v-for="item in items" :key="item.id" > <img :src="item.icon" /> {{ item.name }} </v-tab> </v-tabs> data() { return { tabs: null, items: [ { icon: "/planeInactive.svg", name: "plane" }, { icon: "/hotelInactive.svg", name: "hotel" }, { icon: "/planehotelInactive.svg", name: "plane hotel" }, { icon: "/planeInactive.svg", name: "students" }, ], }; },</pre></p>
P粉448130258P粉448130258438 天前582

全部回覆(1)我來回復

  • P粉413704245

    P粉4137042452023-08-30 09:33:09

    1. 為您的 v-model 使用一些預設值，'tab' 使選項卡預設為活動狀態。 （我在 v-model 中使用選項卡的 name 屬性，但您可以使用您想要的任何唯一屬性。）
    2. 使用此v-model檢查哪個標籤處於活動狀態，並使用條件運算子更新圖示。 （我使用了虛擬圖標，您可以使用您的。）

    在這個演示中，您應該會看到當選項卡處於活動狀態時，將顯示彩色航班圖標，否則將顯示黑色航班圖標。 

    <!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@6.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-main>
          <v-container>
            <v-tabs
              v-model="tab"
              >
              <v-tab
                v-for="(item, index) in items"
                :key="index"
                :href="`#${item.name}`"
                class="home-tabs"
                active-class="activeTab"
                >
                <img :src="tab == item.name ? item.icon : inactive_icon" />
                {{ item.name }}
              </v-tab>
            </v-tabs>
          </v-container>
        </v-main>
      </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',
        data () {
      return {
        tab: 'Flights',
        inactive_icon: 'https://www.svgrepo.com/show/413929/fly.svg',
        items: [
          { icon: "https://www.svgrepo.com/show/424654/airplane-flight-travel.svg", name: "Flights" },
          { icon: "https://www.svgrepo.com/show/424654/airplane-flight-travel.svg", name: "Hotels" },
          { icon: "https://www.svgrepo.com/show/424654/airplane-flight-travel.svg", name: "Flights + Hotels" },
          { icon: "https://www.svgrepo.com/show/424654/airplane-flight-travel.svg", name: "Students" },
        ],
      }
      },
        vuetify: new Vuetify(),
      })
    </script>
  </body>
</html>
</html>

    回覆
    0
  • 取消回覆