微信小程序组件root-portal

微信小程序新增了一个组件：root-portal。这又是一个令人迷惑的组件，官方文档的介绍是：使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。

明明用CSS就可以轻松解决的问题，又弄一个新的组件。估计还是为了开发人员好，工作的复杂性和工资基本是成正比的，组件和api越混乱，开发人员的日子越有希望。几十年的软件工程积累，能解决的复杂问题基本都已经被解决掉了，所以必须创造一些问题，提高门槛。不然，软件开发人员早晚要和搬砖一样了。

下面是一个简单的例子

wxml:

<view>
  <root-portal wx:if="{{ show }}">
    <view class="dialog" bindtap="tabClose">
      我是弹窗
    </view>
  </root-portal>
  <button bindtap="tabShow">显示弹窗</button>
</view>

js:

const app = getApp()

Page({
  data: {
    show: false,
  },

  tabShow() {
    this.setData({
      show: true,
    })
  },

  tabClose() {
    this.setData({
      show: false
    })
  },
})

wxss:

.dialog{
  position: absolute;
  background-color: #CCCCCC;
  width: 80%;
  height: 200rpx;
  left: 10%;
  top: 20%;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}