详解基于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 相关文章推荐
实现JavaScript中继承的三种方式
Oct 16 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
原生js实现3D轮播图
Mar 21 Javascript
vue使用video插件vue-video-player详解
Oct 23 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
文章推荐系统(二)
2006/10/09 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
php判断linux下程序问题实例
2015/07/09 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
js图片上传的封装代码
2017/08/01 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python中的zip函数使用示例
2015/01/29 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
python双向链表原理与实现方法详解
2019/12/03 Python
python实现经纬度采样的示例代码
2020/12/10 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
荣耀商城:HIHONOR
2020/11/03 全球购物
结婚周年感言
2014/02/24 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
员工保密承诺书
2014/05/28 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
MySQL七大JOIN的具体使用
2022/02/28 MySQL