Désactiver l'effet de survol de la case à cocher v dans Vuetify 2
P粉826429907
P粉826429907 2023-09-03 20:25:54
0
1
532
<p>Lorsque vous survolez une case à cocher en V dans Vuetify 2, un cercle grisé apparaît derrière la case à cocher. Je veux qu'il n'apparaisse pas. Actuellement, ma case à cocher v est enveloppée dans v-tab et v-tooltip. Je doute que cela soit important, mais c'est possible. </p> <pre class="brush:php;toolbar:false;"><v-tab v-for="onglet dans myTabList" :key="tab"> <span>{{$t(tab)}}</span> <v-info-bulle en bas> <template #activator="{ sur }"> <span v-on="on"> <v-checkbox @click.stop/> </envergure> </modèle> <span>Texte de l'info-bulle</span> </v-info-bulle> </v-tab></pre> <p>J'ai essayé de l'envelopper dans v-hover et d'utiliser l'attribut désactivé, mais sans succès. </p>
P粉826429907
P粉826429907

répondre à tous(1)
P粉248602298

C'est l'effet d'entraînement, vous pouvez le désactiver en utilisant la propriété :ripple :

<v-checkbox
  :ripple="false"
  ...
/>

Voici un exemple :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      myTabList: [1, 2, 3]
    }
  }
})
<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">

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-tab v-for="tab in myTabList" :key="tab">
          <span>{{tab}}</span>
          <v-tooltip bottom>
            <template #activator="{ on }">
              <span v-on="on">
                <v-checkbox @click.stop :ripple="false"/>
              </span>
            </template>
            <span>Tooltip text</span>
          </v-tooltip>
        </v-tab>
      </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>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal