<import-sjs from="./popup.prop.sjs" name="p" />
  <view class="{{className || ''}}" title="{{title}}">
    <view>
      <view class="btn-container">
        <button class="btn" size="mini" type="primary" onTap="onTopBtnTap">
          上
        </button>
        <button class="btn" size="mini" type="primary" onTap="onButtomBtnTap">
          下
        </button>
        <button class="btn" size="mini" type="primary" onTap="onRightBtnTap">
          右 无mask
        </button>
        <button class="btn" size="mini" type="primary" onTap="onLeftBtnTap">
          左 无动画
        </button>
      </view>
      <popup
        position="left"
        ref="_saveRef1"
        anyuiProps="{{p.getProps('_3') || {}}}"
        show="{{showLeft}}"
        animation="{{false}}"
        onClose="onPopupClose"
      >
        <view class="box left">hello world</view>
      </popup>
      <popup
        position="right"
        anyuiProps="{{p.getProps('_6') || {}}}"
        show="{{showRight}}"
        mask="{{false}}"
        onClose="onPopupClose"
      >
        <view class="box right" style="display: flex; flex-direction: column">
          <view>hello world</view>
          <view style="margin-top: 20px">
            <button style="width: 100px" onTap="onPopupClose">关闭</button>
          </view>
        </view>
      </popup>
      <popup
        position="top"
        anyuiProps="{{p.getProps('_8') || {}}}"
        show="{{showTop}}"
        onClose="onPopupClose"
      >
        <view class="box top">hello world</view>
      </popup>
      <popup
        position="bottom"
        anyuiProps="{{p.getProps('_10') || {}}}"
        show="{{showBottom}}"
        onClose="onPopupClose"
      >
        <view class="box bottom">hello world</view>
      </popup>
    </view>
  </view>
