Question

我们最近开始使用Vue和Vuetify。作为应用程序的一部分，我需要在Vuetify徽章上编写click动作，但不确定为什么它不起作用。我尝试了以下代码片段：

<v-badge bottom
               left
               overlap
               :color="red">
        <div slot="badge"
             @click="togglePopover"
             class="availability"></div>
        <Avatar :objData="data.image"
                :size="size"
                :applyBoarder="applyBoarder">
          <slot></slot>
        </Avatar>
      </v-badge>

<script>
  export default {
    methods: {
    togglePopover(e) {
      alert('click action');
    }
  }
</script>

Answer 1

您可以使用v-btn代替徽章插槽的btnCardSea1.setImage(UIImage(cardSeaTapped, ofType: "png"), for: .normal)：

div

<v-badge>
  <v-btn slot="badge" @click="togglePopover">
    <v-icon>done</v-icon>
  </v-btn>
</v-badge>

new Vue({
  el: '#app',
  methods: {
    togglePopover() {
      console.log('click');
    }
  }
})

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons);
@import url(https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.css);

#app {
  padding-top: 20px;
}

Answer 2

您应该在native事件上使用click修饰符。

@click.native="togglePopover"

来自VueJS文档

.native-在组件的根元素上侦听本地事件。

有关更多信息和所有可用的修饰符，请单击此处：https://vuejs.org/v2/api/#v-on

Answer 3

对我来说，@tony19 的答案不起作用，除非添加 z-index

<v-badge
    bordered
    color="red"
    overlap
>
    <v-icon slot="badge" style="z-index: 1;" @click="doSomething">
        mdi-close
    </v-icon>
    <v-img
        class="rounded-lg"
        height="100"
        width="100"
        aspect-ratio="1"
        src="https://placekitten.com/g/300/300"
    />
</v-badge>

Answer 4

我发现徽章所附的物品在点击时有效，但徽章本身无效。这是我的解决方法：除了包装在徽章中的项目之外，添加一个 div 来显示内容槽。

此示例使用数据值 count 作为徽章的内容。

      <v-badge>
        <!-- WORKAROUND badge is not clickable -->
        <template #badge>
          <div
              style="cursor: pointer"
              @click="$emit('show-settings')">
            {{ String(count) }}
          </div>
        </template>
        <v-btn icon @click="$emit('show-settings')">
          <v-icon>settings</v-icon>
        </v-btn>
      </v-badge>

点击操作不适用于vuetify徽章

4 个答案: