VUE開發一個組件——移動端彈出層（IOS版）

前言

再造一輪，vue移動端彈出層，包括confrim詢問框，tips提示框，popup選擇器等。

相關文章： 《如何將你封裝的組件使用 npm 發佈》 《VUE開發一個組件——日曆選擇控件》

快速開始

# 安裝
npm install vue-h5-popup -S
複製代碼

# 引入
import h5Popup from 'vue-h5-popup';
Vue.use(h5Popup)
複製代碼

示例

<!--alert-->
<modal-alert ref="alert">
  <div class="trave-tip-content txt-l" slot="content">
    <div class="confirm-text">
      <p>這裏是alert提示框，我和notice有些相同，可是又有所不一樣，注意區分哦</p>
    </div>
  </div>
  <span slot="button">知道了</span>
</modal-alert>
複製代碼

<!--notice-->
<modal-notice :button="tipsBtnText" :buttonBehavior="tipsRedirect" :title="false" ref="tips">
    <div slot="content" class="tips-content">
      web秀測試試試看咯
    </div>
</modal-notice>
複製代碼

<!--confirm-->
<modal-confirm title="肯定支付" confirm="繼續支付" cancel="取消" ref="confirm" @confirm="submitPay" @cancel="$refs.confirm.close()">
    <div class="alert-content" slot="content">
        <h3></h3>
        <p class="txt-l fs28 confirm-text">你肯定用支付寶支付10,000元嗎？
        </p>
    </div>
</modal-confirm>
複製代碼

github地址： vue-h5-popup npm地址： vue-h5-popup