[Vuejs]-Vue clicking on the action button's focus area breaks it

by

0👍

I don’t see what’s wrong. Can you check this reproduction? I mostly only changed the casing of attributes on <Test> element.

Vue.component('Test', {
  template: `
  <v-card :class="{create: backgroundColor }">
    <v-speed-dial
      :bottom="true"
      :right="true"
      :direction="direction"
      :transition="transition"
      fixed
    >
      <template v-slot:activator>
        <v-btn
          :class="{is_active:isActive}"
          color="#C6002B"
          fab
          dark
          @click="toggleButton"
          x-large
        > 
            <v-icon>{{isActive? 'mdi-close' : 'mdi-account-circle'}}</v-icon>
        </v-btn>
      </template>
        <v-btn 
            v-if="finalProp"
            :class="{alignLeft:isActive}"
            fab 
            dark 
            large
            @click.stop="$emit('func1')"
            color="white" >
            <v-icon color="#F0BE85">mdi-pencil</v-icon>
        </v-btn>
        <v-btn
            v-if="thirdProp"
            :class="{alignLeft:isActive}"
            fab
            dark
            large
            @click.stop="$emit('func2')"
            color="white">
        >
            <v-icon color="purple">mdi-delete</v-icon>
        </v-btn>
        <v-btn
            :class="{alignLeft:isActive}"
            v-if="secondProp"
            fab
            dark
            large
            @click.stop="$emit('func3')"
            color="white">
        >
            <v-icon color="green">mdi-plus</v-icon>
        </v-btn>
        <v-btn 
            v-if="firstProp"
            :class="{alignLeft:isActive}"
            fab
            dark
            large
            @click.stop="$emit('func4')"
            color="white">
        >
            <v-icon color="red">home</v-icon>
        </v-btn>
    </v-speed-dial>
  </v-card>
  `,
  props: {
    firstProp: Boolean,
    secondProp: Boolean,
    thirdProp: Boolean,
    finalProp: Boolean
  },

  data: () => ({
    direction: 'top',
    fab: false,
    right: true,
    bottom: true,
    transition: 'scale-transition',
    isActive: false,
    backgroundColor: false,
    check:true
  }),
  methods: {
    toggleButton: function() {
      this.isActive = !this.isActive
      this.backgroundColor = !this.backgroundColor
    }
  },
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return{
      a:true,
      b:true,
      c:true,
      d:true
    }
  }
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<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@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<style scoped>
.is_active {
  /*min-width:120px
   width: 380px;
  height: 70px;
  border-radius: 36px;
  margin:5px; */

}
.is_active span {
  font-size: 18px;
  letter-spacing: 0px;
}

.create {
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  background:rgba(0,0,0,0.4); 
  color:rgba(0,0,0,0.8);
}
} 

</style>
</head>
<body>
  <div id="app">
    <v-app>
      <Test :first-prop="a"  :second-prop="b" :third-prop="c" :last-prop="d" />
    </v-app>
  </div>
</body>
</html>

Leave a comment