Popup

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
            <span class="if-not-md">返回</span>
          </a>
        </div>
        <div class="title">弹出框</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>弹出窗口是一个在应用程序的主要内容上方弹出的具有任何HTML内容的模态窗口。弹出窗口和其他覆盖层一样，是所谓的“临时视图”的一部分。.</p>
        <p>
          <a class="button button-fill popup-open" data-popup=".demo-popup">打开弹出框</a>
        </p>
        <p>
          <a class="button button-fill" @click=${createPopup}>创建动态弹出框</a>
        </p>
      </div>
      <div class="block-title">滑动关闭</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>弹出窗口可以通过向上或向下滑动来关闭。</p>
        <p>
          <a class="button button-fill popup-open" data-popup=".demo-popup-swipe">滑动关闭</a>
        </p>
        <p>或者可以通过在特殊的滑动处理程序上向下滑动来关闭它。</p>
        <p>
          <a class="button button-fill popup-open" data-popup=".demo-popup-swipe-handler">滑动回调事件</a>
        </p>
      </div>
      <div class="block-title">覆盖视图</div>
      <div class="block block-strong-ios block-outline-ios">
        <p>弹出窗口可能会将视图推到后面。默认情况下，只有当"safe-area-inset-top"大于零时（iOS全屏Web应用程序或iOS Cordova应用程序），才会产生效果。</p>
        <p>
          <a class="button button-fill popup-open" data-popup=".demo-popup-push">push弹出框</a>
        </p>
      </div>
    </div>
    <div class="popup demo-popup">
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Popup Title</div>
            <div class="right"><a class="link popup-close">Close</a></div>
          </div>
        </div>
        <div class="page-content">
          <div class="block">
            <p>这里出现了弹出窗口。您可以在这里放置任何内容，甚至可以包含具有自己导航的独立视图。另外，请注意，默认情况下，iPhone/iPod和iPad上的弹出窗口外观略有不同，在iPhone上是全屏显示的。</p>
            <p>从前有一个小村庄，村庄里住着一群快乐的农民。他们过着简单而宁静的生活，每天努力工作，互相帮助。然而，村庄的水井却出了问题，水源渐渐枯竭，农民们陷入了困境。

              为了解决这个问题，村庄的领导决定召开一次村民大会。在会上，一位年轻的农民提出了一个创新的想法：利用雨水收集系统来解决水井干涸的问题。他详细解释了如何设计和建造这个系统，并列出了所需的材料和步骤。</p>
            <p>农民们被这个想法所激发，他们积极参与到项目中。大家分工合作，有的负责收集材料，有的负责挖掘水渠，有的负责安装雨水收集设备。大家一起努力，克服了各种困难和挑战。.</p>
            <p>最终，雨水收集系统建成了。当第一场雨来临时，水渠迅速充满了清澈的雨水。农民们欢呼雀跃，他们终于解决了水井干涸的问题。村庄重新恢复了生机，农作物茁壮成长。

              这个小故事告诉我们，团结合作和创新思维可以克服各种困难。只要我们齐心协力，勇于尝试新的解决方案，就能够找到问题的答案，并创造出美好的未来。</p>
          </div>
        </div>
      </div>
    </div>

    <div class="popup demo-popup-push">
      <div class="view view-init">
        <div class="page page-with-navbar-large">
          <div class="navbar navbar-large navbar-transparent">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
              <div class="title">Push Popup</div>
              <div class="right"><a class="link popup-close">Close</a></div>
              <div class="title-large">
                <div class="title-large-text">Push Popup</div>
              </div>
            </div>
          </div>
          <div class="page-content">
            <div class="block">
              <p>从前有一个小村庄，村庄里住着一群快乐的农民。他们过着简单而宁静的生活，每天努力工作，互相帮助。然而，村庄的水井却出了问题，水源渐渐枯竭，农民们陷入了困境。

                为了解决这个问题，村庄的领导决定召开一次村民大会。在会上，一位年轻的农民提出了一个创新的想法：利用雨水收集系统来解决水井干涸的问题。他详细解释了如何设计和建造这个系统，并列出了所需的材料和步骤。</p>
              <p>农民们被这个想法所激发，他们积极参与到项目中。大家分工合作，有的负责收集材料，有的负责挖掘水渠，有的负责安装雨水收集设备。大家一起努力，克服了各种困难和挑战。.</p>
              <p>最终，雨水收集系统建成了。当第一场雨来临时，水渠迅速充满了清澈的雨水。农民们欢呼雀跃，他们终于解决了水井干涸的问题。村庄重新恢复了生机，农作物茁壮成长。

                这个小故事告诉我们，团结合作和创新思维可以克服各种困难。只要我们齐心协力，勇于尝试新的解决方案，就能够找到问题的答案，并创造出美好的未来。</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="popup demo-popup-swipe">
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">滑动关闭</div>
            <div class="right"><a class="link popup-close">关闭</a></div>
          </div>
        </div>
        <div class="page-content">
          <div style="height: 100%" class="display-flex justify-content-center align-items-center">
            <p>Swipe me up or down</p>
          </div>
        </div>
      </div>
    </div>
    <div class="popup demo-popup-swipe-handler">
      <div class="page">
        <div class="swipe-handler"></div>
        <div class="page-content">
          <div class="block-title block-title-large">Hello!</div>
          <div class="block block-strong-ios block-outline-ios">
            <p>从前有一个小村庄，村庄里住着一群快乐的农民。他们过着简单而宁静的生活，每天努力工作，互相帮助。然而，村庄的水井却出了问题，水源渐渐枯竭，农民们陷入了困境。

              为了解决这个问题，村庄的领导决定召开一次村民大会。在会上，一位年轻的农民提出了一个创新的想法：利用雨水收集系统来解决水井干涸的问题。他详细解释了如何设计和建造这个系统，并列出了所需的材料和步骤。</p>
            <p>农民们被这个想法所激发，他们积极参与到项目中。大家分工合作，有的负责收集材料，有的负责挖掘水渠，有的负责安装雨水收集设备。大家一起努力，克服了各种困难和挑战。.</p>
            <p>最终，雨水收集系统建成了。当第一场雨来临时，水渠迅速充满了清澈的雨水。农民们欢呼雀跃，他们终于解决了水井干涸的问题。村庄重新恢复了生机，农作物茁壮成长。

              这个小故事告诉我们，团结合作和创新思维可以克服各种困难。只要我们齐心协力，勇于尝试新的解决方案，就能够找到问题的答案，并创造出美好的未来。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $onMounted, $onBeforeUnmount }) => {
    let popup;
    let popupSwipe;
    let popupSwipeHandler;
    let popupPush;

    const createPopup = () => {
      // Create popup
      if (!popup) {
        popup = $f7.popup.create({
          content: /*html*/`
            <div class="popup">
              <div class="page">
                <div class="navbar">
                  <div class="navbar-bg"></div>
                  <div class="navbar-inner">
                    <div class="title">Dynamic Popup</div>
                    <div class="right"><a  class="link popup-close">Close</a></div>
                  </div>
                </div>
                <div class="page-content">
                  <div class="block">
                    <p>This popup was created dynamically</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
                  </div>
                </div>
              </div>
            </div>
          `
        });
      }
      // Open it
      popup.open();
    }

    $onMounted(() => {
      popupSwipe = $f7.popup.create({
        el: '.demo-popup-swipe',
        swipeToClose: true,
      });
      popupSwipeHandler = $f7.popup.create({
        el: '.demo-popup-swipe-handler',
        swipeToClose: 'to-bottom',
        swipeHandler: '.swipe-handler'
      });
      popupPush = $f7.popup.create({
        el: '.demo-popup-push',
        swipeToClose: true,
        push: true,
      });
    })

    $onBeforeUnmount(() => {
      // Destroy popup when page removed
      if (popup) popup.destroy();
      if (popupSwipe) popupSwipe.destroy();
      if (popupSwipeHandler) popupSwipeHandler.destroy();
      if (popupPush) popupPush.destroy();
    })

    return $render;
  }
</script>