[Vuejs]-How to binding events on slots without break layout of contents?

by

0👍

Problem solved.

The problem is, I shouldn’t try to affect slot contents in the parent component. So instead of binding event on slot#content while keep its layout, I let the component itself become the flex container:

// ContextMenu.vue
<template>
<div @contextmenu.prevent.stop="onRightclickContent">
  <div class="contextmenu-wrapper" v-if="showContextMenu">
    <slot name="contextmenu"></slot>
  </div>
  <slot name="default"></slot>
</div>
</template>

// parent component
<template>
  <!--no another wrapper div here!-->
    <ContextMenu class="wrapper">
      <template #contextmenu>
        <div class="contextmenu"></div>
      </template>
      <!--will be correctly layout now-->
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
    </ContextMenu>
</template>

<style>
.wrapper{
  display: flex;
}
</style>

class="wrapper" will fall through to root div in ContextMenu then it becomes the flex container.

Leave a comment