javascript - Vue-portal 条件门户是否启用？

Question

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

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

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

因此，在导航栏组件中，我有：

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