前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >VUE开发一个组件——移动端弹出层(IOS版)

VUE开发一个组件——移动端弹出层(IOS版)

作者头像
Javanx
发布2019-09-04 10:23:26
1.1K0
发布2019-09-04 10:23:26
举报
文章被收录于专栏:web秀web秀

前言

再造一轮,vue移动端弹出层,包括confrim询问框,tips提示框,popup选择器等。

相关文章:

《如何将你封装的组件使用 npm 发布》

《VUE开发一个组件——日历选择控件》

快速开始

代码语言:javascript
复制
# 安装
npm install vue-h5-popup -S
代码语言:javascript
复制
# 引入
import h5Popup from 'vue-h5-popup';
Vue.use(h5Popup)

示例

代码语言:javascript
复制
<!--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>
代码语言:javascript
复制
<!--notice-->
<modal-notice :button="tipsBtnText" :buttonBehavior="tipsRedirect" :title="false" ref="tips">
    <div slot="content" class="tips-content">
      web秀测试试试看咯
    </div>
</modal-notice>
代码语言:javascript
复制
<!--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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年11月6日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 快速开始
  • 示例
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档