Disable vue component interaction-CodePudding

I have a simple vue component that can be clicked, but I want the click itself to be conditional, so I can display the component, but prevent the user from clicking it.

I tried the disabled directive, but didn't work.

Component

<template>
<!-- the listeners make sure the whole component is clickable -->
  <div  v-on="$listeners" : :disabled="disabled">
    <div >
      <!-- Display icon with label at bottom -->
      <div >
        <div >
          <button
            type="button"
            
          >
            <i :></i>
          </button>
        </div>
      </div>
      <div >
        <div >
          <div >{{ 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>

CodePudding user response：

You can overwrite click listener:

Vue.component('hb', {
  template: `
    <div  v-on="{ ...$listeners, click: () => {} }" 
      : :disabled="disabled" 
      @click="onClick()"
    >
    <div >
      <div >
        <div >
          <button type="button"  :disabled="disabled">
            <i :></i>
          </button>
        </div>
      </div>
      <div >
        <div >
          <div >{{ 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/[email protected]/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>

CodePudding user response：

What about applying pointer-events: none; so the click event wont trigger when users clicks. You can add it in your disabled class