详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件


Posted in Javascript onAugust 02, 2018

wc-messagebox

  1. 基于 vue 2.0 开发的插件
  2. 包含 Alert, Confirm, Toast, Prompt
  3. 仿照 iOS 原生UI(样式来源: MUI)

一些想法

刚开始的时候想要用现成的弹窗组件来着, 但是查找一圈没有发现比较合适项目的, 所以才自己开发了一个, 包含 Alert, Comfirm, Toast, Prompt 四种, 并且可以单个引入.

Vue 的组件开发实际上比较简单, 有兴趣的可以看下源码实现, 步骤很清晰.

关于样式的问题, 是直接从 MUI(魅族开发的) 中拿过来的, 仿照 iOS 的效果.

效果图

详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件

图是动图... 动不了点一下就好.

Install

npm i wc-messagebox --save

Quick Start

import {Alert, Confirm, Toast} from 'wc-messagebox'
import 'wc-messagebox/style.css'

Vue.use(Alert, options)
Vue.use(Confirm, options)
Vue.use(Toast, options)

Usage

this.$alert(text, options)
options = {
  title: '', // 默认无标题
  btn: {
    text: '',
    style: {
      'backgroun-color': 'red',
      'font-size': '20px',
      'color': 'blue'
    }
  }
}

this.$confirm(text, options)
options = {
  title: '', // 默认无标题
  yes: {
    text: '确定',
    style: {}
  },
  no: {
    text: '取消',
    style: {}
  }
}
this.$toast(text, options);
options = {
  position: 'bottom' // 'bottom' | 'center',
  duration: '1500'
}

其他

Alert, Confirm 返回的是一个Promise, 以支持链式调用.

this.$confirm(text).then(success).catch(fail)

项目地址

项目地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 遍历对象的属性的代码
Dec 29 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 #Javascript
vue组件挂载到全局方法的示例代码
Aug 02 #Javascript
原生js封装的ajax方法示例
Aug 02 #Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 #Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 #Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 #Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 #Javascript
You might like
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
js实现for循环跳过undefined值示例
2019/07/02 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
Python matplotlib实时画图案例
2020/04/23 Python
python time.strptime格式化实例详解
2021/02/03 Python
初三政治教学反思
2014/01/30 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
爱护草坪标语
2014/06/24 职场文书
自我管理的活动方案
2014/08/25 职场文书
企业法人代表证明书
2014/09/27 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
体检通知范文
2015/04/21 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书