Lumpuhkan kesan tuding kotak semak v dalam Vuetify 2
P粉826429907
2023-09-03 20:25:54
<p>Apabila menuding pada kotak semak v dalam Vuetify 2, bulatan yang malap muncul di belakang kotak pilihan. Saya mahu ia tidak muncul. Pada masa ini, kotak semak v saya dibalut dengan tab v dan tip alat v. Saya ragu ia penting, tetapi ia mungkin. </p>
<pre class="brush:php;toolbar:false;"><v-tab v-for="tab dalam myTabList"
<span>{{$t(tab)}}</span>
<v-petua alat bawah>
<template #activator="{ pada }">
<span v-on="on">
<v-kotak semak @click.stop/>
</span>
</template>
<span>Teks petua alat</span>
</v-tooltip>
</v-tab></pre>
<p>Saya cuba membungkusnya dalam v-hover dan menggunakan atribut dilumpuhkan, tetapi tidak berjaya. </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini adalah kesan riak, anda boleh mematikannya menggunakan sifat
:ripple:Berikut adalah contoh:
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>