vue-portal 条件门户是否启用？

Question

我想使用 Vue Portal 在导航栏（父组件）上注入一些信息。

所以在一个组件中，我可以这样做：

<portal to="navbar">
   <b-button>Some option</b-button>
</portal>

因此，在 Navbar 组件中我有：

<portal-target name="navbar"></portal-target>

但我想在此导航栏中添加分隔符当且仅当 门户已启用时:

<b-nav-text v-if="$portal.navbar.enabled">|</b-nav-text> 
<portal-target name="navbar"></portal-target>

显然 $portal 原型不可用...有什么替代方案？

Answer 1

这可以由 CSS 轻松完成。

.portal {
  position: relative;
  color: #000;
}
.portal:after {
  display: block;
  position: absolute;
  right: 0 // or left, depends on your design.
  content: "|" // or content: "" and the styles down below
  top: 0; // or any value
  bottom: 0;  // or any value
  width: 1px;  // or any value
  background: currentColor;
}

vue-portal 条件门户是否启用？

Vue-portal conditional whether the portal is enabled?

javascript

vue.js

vue-portal