Javascript 禁用Vuetify 2中的vcheckbox悬停效果

发布于07月03日

当鼠标悬停在Vutify 2中的v-复选框上时，复选框后面会出现一个黑色的圆圈.我不想让这件事出现.目前，我的v-复选框被包装在v-标签和v-工具提示中.我怀疑这很重要，但这是有可能的.

<v-tab v-for="tab in myTabList" :key="tab">
  <span>{{$t(tab)}}</span>
  <v-tooltip bottom>
    <template #activator="{ on }">
      <span v-on="on">
        <v-checkbox @click.stop/>
      </span>
    </template>
    <span>Tooltip text</span>
  </v-tooltip>
</v-tab>

我试着用v型悬停将它包裹起来，并使用残障props ，但没有奏效.

推荐答案

这就是涟漪效果，你可以使用:rippleprops 将其关闭:

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

以下是它的一个片段:

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>