详解基于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 相关文章推荐
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
详解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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
python测试mysql写入性能完整实例
2018/01/18 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
python如何操作mysql
2020/08/17 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
实习公司领导推荐函
2014/05/21 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
初中信息技术教学计划
2015/01/22 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js