Vuetify 3 更改选择中的颜色

huangapple
go评论139阅读模式
英文:

Vuetify 3 change color in selection

问题

你好，我理解你的请求，以下是翻译好的部分：

"hello everyone i am new to the front end , and i ve been learning vuejs for a long time and started to learn vuetify3 these days
i am facing a problem where in my code below , i am creatnig a navigation drawer , and my intention is to highlight the icon in red or any other color when its selected and keep the rest icons white"

我是前端的新手，我学习Vue.js已经有一段时间了，最近开始学习Vuetify3。我在下面的代码中遇到了一个问题，我正在创建一个导航抽屉，我的意图是在选中图标时将其高亮显示为红色或其他颜色，而保持其余图标为白色。

  1. <template>
  2.     <v-navigation-drawer app color="#000000" mini-variant rail-width="110" class="d-flex justify-center mt-8">
  3.         <v-avatar class="d-block text-center mx-auto mt-16 mb-16" size="100">
  4.             <v-btn class="ma-2" fab color="white" rounded icon="mdi-basket" variant="outlined"></v-btn>
  5.         </v-avatar>
  7.         <v-card flat color="#151515">
  8.             <v-layout>
  9.                 <v-list dense nav class="d-block mx-auto my-2" active-class="selected">
  10.                     <v-list-item v-for="(item, index) in items" :key="index" class="my-8" v-slot="{ active }"
  11.                         :ripple="false" @click="selectedItem = index" :value="index">
  12.                         <v-icon :color="active ? 'red' : 'white'" :icon="item.icon" class="pa-auto" size="50"></v-icon>
  13.                     </v-list-item>
  14.                 </v-list>
  15.             </v-layout>
  16.         </v-card>
  17.     </v-navigation-drawer>
  18. </template>

我不明白问题出在哪里。

英文:

hello everyone i am new to the front end , and i ve been learning vuejs for a long time and started to learn vuetify3 these days
i am facing a problem where in my code below , i am creatnig a navigation drawer , and my intention is to highlight the icon in red or any other color when its selected and keep the rest icons white

  2. &lt;template&gt;
  3.     &lt;v-navigation-drawer app color=&quot;#000000&quot; mini-variant rail-width=&quot;110&quot; class=&quot;d-flex justify-center mt-8&quot;&gt;
  4.         &lt;v-avatar class=&quot;d-block text-center mx-auto mt-16 mb-16&quot; size=&quot;100&quot;&gt;
  5.             &lt;v-btn class=&quot;ma-2&quot; fab color=&quot;white&quot; rounded icon=&quot;mdi-basket&quot; variant=&quot;outlined&quot;&gt;&lt;/v-btn&gt;
  6.         &lt;/v-avatar&gt;
  8.         &lt;v-card flat color=&quot;#151515&quot;&gt;
  9.             &lt;v-layout&gt;
  10.                 &lt;v-list dense nav class=&quot;d-block mx-auto my-2&quot; active-class=&quot;selected&quot;&gt;
  11.                     &lt;v-list-item v-for=&quot;(item, index) in items&quot; :key=&quot;index&quot; class=&quot;my-8&quot; v-slot=&quot;{ active }&quot;
  12.                         :ripple=&quot;false&quot; @click=&quot;selectedItem = index&quot; :value=&quot;index&quot;&gt;
  13.                         &lt;v-icon :color=&quot;active ? &#39;red&#39; : &#39;white&#39;&quot; :icon=&quot;item.icon&quot; class=&quot;pa-auto&quot; size=&quot;50&quot;&gt;&lt;/v-icon&gt;
  14.                     &lt;/v-list-item&gt;
  15.                 &lt;/v-list&gt;
  16.             &lt;/v-layout&gt;
  17.         &lt;/v-card&gt;
  18.     &lt;/v-navigation-drawer&gt;
  19. &lt;/template&gt;
  20.   
  21. &lt;script&gt;
  22. export default {
  23.     data: () =&gt; ({
  24.         selectedItem: 0,
  25.         items: [
  26.             { icon: &quot;mdi-home-outline&quot; },
  27.             { icon: &quot;mdi-cart-outline&quot; },
  28.             { icon: &quot;mdi-store-outline&quot; },
  29.             { icon: &quot;mdi-calendar-check-outline&quot; },
  30.             { icon: &quot;mdi-apps&quot; },
  31.         ],
  32.     }),
  33. };
  34. &lt;/script&gt;
  35.   
  36. &lt;style scoped&gt;
  37. .selected {
  38.     background-color: #6f0dff;
  39. }
  40. &lt;/style&gt;
  42.

i dont see where the problem

答案1

得分: 0

VListItem的#default插槽中传递的slot属性被命名为isActive，而不仅仅是active，因此您必须使用isActive或重命名它：

  1. <v-list-item
  2.   ...
  3.   v-slot="{ isActive: active }"
  4. >

playground示例

英文:

The slot prop passed to VListItem's #default slot is named isActive, not just active, so you have to use isActive or rename it:

  1. &lt;v-list-item
  2.   ...
  3.   v-slot=&quot;{ isActive: active }&quot;
  4. &gt;

playground example

huangapple
  • 本文由 发表于 2023年8月10日 22:00:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/76876461.html
  • vue.js
  • vuejs3
  • vuetify.js
  • vuetifyjs3
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定