专栏首页web秀VUE开发一个组件——移动端弹出层(IOS版)

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • uni-app: 从运行原理上面解决性能优化问题

    Uni-App,从了解到开发,相信大家都会觉得Uni-App性能不好,其实也这是非原生的弊病。React Native、Flutter等,非原生框架,性能上都会...

    Javanx
  • JS 中几种轻松处理’this’指向方式

    现在,当调用execute(agent.getFullName)时,一切工作正常,因为getFullName()方法内 this 总是指向正确的值。

    Javanx
  • Swiper如何快速上手?

    Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。

    Javanx
  • 我的第一个游戏:GetMessage

    王兵
  • JavaScript之数据类型

      JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined、Null、Boolean、Number和String。还有1种复杂数据类...

    用户6182664
  • 面试题:JVM 配置常用参数和常用 GC 调优策略

    如上表所示,目前主要有串行、并行和并发三种,对于大内存的应用而言,串行的性能太低,因此使用到的主要是并行和并发两种。并行和并发 GC 的策略通过 UsePara...

    芋道源码
  • 如何使用sysdba身份通过jdbc连接oracle?

    程序员一一涤生
  • Settype COM_TA_R3_ID - mapping between ERP Equipment and CRM Individual Object

    Several fields of Equipment header will be persisted to settype COM_TA_R3_ID in ...

    Jerry Wang
  • Java初步学习之三 数据类型

    吾爱乐享
  • 使用 Cocos Creator 开发动感音乐游戏!

    在浏览器端 AudioContext 是一个专门用于音频处理的接口,工作原理是将 AudioContext 创建出来的各种节点相互连接,音频数据流经这些节点,我...

    张晓衡

扫码关注云+社区

领取腾讯云代金券