在Vuetify 2中禁用v-checkbox上的悬停效果。

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

Disable hover effect on v-checkbox in Vuetify 2

问题

在 Vuetify 2 中悬停在 v-checkbox 上时，复选框后面会出现一个变暗的圆圈。我想让它不出现。目前，我的 v-checkbox 包装在一个 v-tab 和一个 v-tooltip 中。我怀疑这可能不重要，但也有可能重要。

  1. <v-tab v-for="tab in myTabList" :key="tab">
  2.   <span>{{$t(tab)}}</span>
  3.   <v-tooltip bottom>
  4.     <template #activator="{ on }">
  5.       <span v-on="on">
  6.         <v-checkbox @click.stop/>
  7.       </span>
  8.     </template>
  9.     <span>提示文本</span>
  10.   </v-tooltip>
  11. </v-tab>

我尝试将其包装在 v-hover 中并使用禁用属性，但这没有起作用。

英文:

When hovering over a v-checkbox in Vuetify 2, a darkened circle appears behind the checkbox. I would like to make this not appear. Currently, my v-checkbox is wrapped in a v-tab and a v-tooltip. I doubt that matters, but it is possible.

  1. &lt;v-tab v-for=&quot;tab in myTabList&quot; :key=&quot;tab&quot;&gt;
  2.   &lt;span&gt;{{$t(tab)}}&lt;/span&gt;
  3.   &lt;v-tooltip bottom&gt;
  4.     &lt;template #activator=&quot;{ on }&quot;&gt;
  5.       &lt;span v-on=&quot;on&quot;&gt;
  6.         &lt;v-checkbox @click.stop/&gt;
  7.       &lt;/span&gt;
  8.     &lt;/template&gt;
  9.     &lt;span&gt;Tooltip text&lt;/span&gt;
  10.   &lt;/v-tooltip&gt;
  11. &lt;/v-tab&gt;

I tried wrapping it in a v-hover and using the disabled prop, but that didn't work.

答案1

得分: 1

这是涟漪效果，您可以使用 :ripple 属性关闭它：

  1. <v-checkbox
  2.   :ripple="false"
  3.   ...
  4. />

这是一个示例：

  1. <!-- begin snippet: js hide: true console: false babel: false -->
  3. <!-- language: lang-js -->
  4. new Vue({
  5.   el: '#app',
  6.   vuetify: new Vuetify(),
  7.   data() {
  8.     return {
  9.       myTabList: [1, 2, 3]
  10.     }
  11.   }
  12. })
  14. <!-- language: lang-html -->
  15. <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  16. <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  17. <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  19. <div id="app">
  20.   <v-app>
  21.     <v-main>
  22.       <v-container>
  23.         <v-tab v-for="tab in myTabList" :key="tab">
  24.           <span>{{tab}}</span>
  25.           <v-tooltip bottom>
  26.             <template #activator="{ on }">
  27.               <span v-on="on">
  28.                 <v-checkbox @click.stop :ripple="false"/>
  29.               </span>
  30.             </template>
  31.             <span>Tooltip text</span>
  32.           </v-tooltip>
  33.         </v-tab>
  34.       </v-container>
  35.     </v-main>
  36.   </v-app>
  37. </div>
  39. <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  40. <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  42. <!-- end snippet -->
英文:

That's the ripple effect, you can turn it off using the :ripple prop:

  1. &lt;v-checkbox
  2.   :ripple=&quot;false&quot;
  3.   ...
  4. /&gt;

Here it is in a snippet:

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-js -->

  1. new Vue({
  2.   el: &#39;#app&#39;,
  3.   vuetify: new Vuetify(),
  4.   data() {
  5.     return {
  6.       myTabList: [1, 2, 3]
  7.     }
  8.   }
  9. })

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&quot; rel=&quot;stylesheet&quot;&gt;
  2. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  3. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  5. &lt;div id=&quot;app&quot;&gt;
  6.   &lt;v-app&gt;
  7.     &lt;v-main&gt;
  8.       &lt;v-container&gt;
  9.         &lt;v-tab v-for=&quot;tab in myTabList&quot; :key=&quot;tab&quot;&gt;
  10.           &lt;span&gt;{{tab}}&lt;/span&gt;
  11.           &lt;v-tooltip bottom&gt;
  12.             &lt;template #activator=&quot;{ on }&quot;&gt;
  13.               &lt;span v-on=&quot;on&quot;&gt;
  14.                 &lt;v-checkbox @click.stop :ripple=&quot;false&quot;/&gt;
  15.               &lt;/span&gt;
  16.             &lt;/template&gt;
  17.             &lt;span&gt;Tooltip text&lt;/span&gt;
  18.           &lt;/v-tooltip&gt;
  19.         &lt;/v-tab&gt;
  20.       &lt;/v-container&gt;
  21.     &lt;/v-main&gt;
  22.   &lt;/v-app&gt;
  23. &lt;/div&gt;
  25. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js&quot;&gt;&lt;/script&gt;
  26. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月3日 22:17:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/76605620.html
  • javascript
  • vue.js
  • vuejs2
  • vuetify.js
匿名

发表评论

匿名网友

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

确定