vue单击操作按钮的焦点区域会破坏它

Question

我正在尝试通过使用vuetify -vspeed拨号创建一个浮动操作按钮。我创建了一个逻辑来对按钮进行样式设置，使其在单击时就可以正常工作，在单击按钮时便会折叠并展开。但是，如果我尝试单击操作按钮的焦点区域，它将使其中断并关闭按钮。我该如何预防呢？当我单击按钮时，这很好-我使用click.stop使其保持不变，但是如果我单击按钮旁边的区域，它将关闭按钮，这破坏了我的样式逻辑。这是我的代码

Test.Vue

<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><span>{{isActive ? "EXPANDED" : ''}}</span>
        </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>
</template>

<script>

export default {
  name: 'FloatingButton',
  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

    }
  },
}
</script>

<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>

App。 vue

<template>
  <v-app>
   <Test :firstProp=a  :secondProp=b :thirdProp=c :lastProp=d />
  </v-app>
</template>

<script>
import Test from './components/Test'

export default {
  name: 'App',

  components: {
    Test
  },

  data(){
    return{
      a:true,
      b:true,
      c:true,
      d:true
    }
  }
};
</script>

Answer 1

我看不出有什么问题。您可以检查此复制品吗？我主要只更改了元素的属性大小写。

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/[email protected]/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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>