禁用 vue 组件交互

Question

我有一个简单的可以点击的vue组件，但是我希望点击本身是有条件的，所以我可以显示组件，但是阻止用户点击它。

我尝试了 disabled 指令，但没有用。

组件

<template>
<!-- the listeners make sure the whole component is clickable -->
  <div class="col hb_click" v-on="$listeners" :class="{disabled:disabled}" :disabled="disabled">
    <div class="">
      <!-- Display icon with label at bottom -->
      <div class="row">
        <div class="col d-flex align-items-center justify-content-center">
          <button
            type="button"
            class="btn btn-link px-0"
          >
            <i :class="icon"></i>
          </button>
        </div>
      </div>
      <div class="row">
        <div class="col d-flex align-items-center justify-content-center">
          <div class="hb_label">{{ label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HB",
  props: {
      label: String,
      icon: String,
      disabled:{
          type: Boolean,
        default: false,
      }
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
i {
  font-size: 1.3rem;
}
.hb_label{
    font-size: 1rem;
} 
.hb_click {
  cursor: pointer;
}
.hb_click:hover{
    background-color: rgb(222, 216, 215);
}
.disabled{
    color: lightgray!important;
}
</style>

Vue

<HB label="Templates" icon="fas fa-search" @click="shouldWork()" :disabled="false"></HB>
<HB label="Templates" icon="fas fa-search" @click="shouldNotWork()" :disabled="true"></HB>

Answer 1

您可以覆盖点击侦听器：

Vue.component('hb', {
  template: `
    <div class="col hb_click" v-on="{ ...$listeners, click: () => {} }" 
      :class="{disabled}" :disabled="disabled" 
      @click="onClick()"
    >
    <div class="">
      <div class="row">
        <div class="col d-flex align-items-center justify-content-center">
          <button type="button" class="btn btn-link px-0" :disabled="disabled">
            <i :class="icon"></i>
          </button>
        </div>
      </div>
      <div class="row">
        <div class="col d-flex align-items-center justify-content-center">
          <div class="hb_label">{{ label }}</div>
        </div>
      </div>
    </div>
  </div>
  `,
  props: {
      label: String,
      icon: String,
      disabled:{
        type: Boolean,
        default: false,
      }
  },
  methods: {
    onClick() {
      !this.disabled && this.$emit("click");
    },
  }
})
new Vue({
  el: "#demo",
  methods: {
    shouldWork() {
      console.log('clicked')
    }
  },
})

i { font-size: 1.3rem; }
.hb_label { font-size: 1rem; } 
.hb_click { cursor: pointer; }
.hb_click:hover{ background-color: rgb(222, 216, 215); }
.disabled { color: lightgray!important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div id="demo">
  <hb label="Templates" icon="fas fa-search" @click="shouldWork" disabled></hb>
  <hb label="Templates" icon="fas fa-search" @click="shouldWork"></hb>
</div>

Answer 2

如何应用 pointer-events: none; 这样当用户点击时点击事件就不会触发。您可以将其添加到 disabled class

禁用 vue 组件交互

Disable vue component interaction

javascript

vue.js

vuejs2