详解基于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 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
JQuery 文本框使用小结
May 22 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
详解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中创建并处理图象
2006/10/09 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成"...")
2016/11/28 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python 绘制可视化折线图
2020/07/22 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
Python读写锁实现实现代码解析
2020/11/28 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
资深生产主管自我评价
2013/09/22 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
限期整改通知书
2015/04/22 职场文书
天那边观后感
2015/06/09 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
安全生产协议书
2016/03/22 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android