vue.js - 防止开关切换并在 Vuetify 中显示警告消息 v-switch

Question

我遇到了阻止 v-switch 切换并显示警告消息的问题。这是 Codepen example

如果我添加 CSS 来防止切换，则点击事件不起作用

.v-input--switch {
  pointer-events: none;
}

此外，如果我添加 disabled 属性来切换，那么点击事件将不起作用

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      switch1: true,
       snackbar: false
    }
  },
  methods:{
    showALert(){
      this.snackbar = true;
    }
  }
})

.v-input--switch .v-input--switch__thumb {
  color: black !important;
}

.v-input--switch .v-input--switch__thumb.primary--text {
  color: black !important;
}

.v-input--switch .v-input--switch__track.primary--text {
  color: rgba(0, 0, 0, 0.38) !important;
}

.v-input--switch.v-input--is-disabled:not(.v-input--is-dirty) .v-input--switch__thumb {
  color: black !important;
}

.v-input--switch .v-input--switch__thumb:after {
  content: "£";
  color: #fff;
}

//.v-input--switch {
 // pointer-events: none;
//}

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.3.14/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.14/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container class="px-0" fluid>
      <v-switch :ripple="false" flat @change="showALert"></v-switch>
      <v-snackbar v-model="snackbar" bottom right>
        This has been set to Historical Mode
        <template v-slot:action="{ attrs }">
          <v-icon v-bind="attrs" color="white" small @click="snackbar = false">
            mdi-close
          </v-icon>
        </template>
      </v-snackbar>
    </v-container>
  </v-app>
</div>

有人可以帮我解决这个问题吗？任何解决方案将不胜感激。

Answer 1

您可以使用 v-switch 的 readonly 属性，它可以防止在单击时切换开关。您还可以直接在 v-switch 上添加 @click 以处理您希望在单击开关时发生的任何行为，例如在以编程方式切换开关之前显示警报或验证值。

  <v-switch @click="showALert" readonly></v-switch>