一、全局注册

1.在main.js中引入

//引入

import { MessageBox } from 'mint-ui';

 
//全局使用,挂载到原型上

Vue.prototype.$messagebox = MessageBox   

2.在xxx.vue使用

//alert

this.$messagebox.alert("操作成功").then(action => {
 
});
 
//confirm
 
this.$messagebox.confirm("确定执行此操作?").then(action => {
 
});
 
//prompt
 
this.$messagebox.prompt("请输入你的姓名").then(({ value, action }) => {
 
});
 
二、局部使用
 
1.在xxx.vue文件的script标签中引入
 
import { MessageBox } from 'mint-ui';
 
2.使用
 
//alert
 
MessageBox.alert("确定执行此操作?").then(action => {
 
});
 
//confirm
 
MessageBox.confirm("确定执行此操作?").then(action => {
 
});
 
//prompt
 
MessageBox.prompt("确定执行此操作?").then(({ value, action }) => {

 
});
 

 附加:(toast | indicator | messagebox)三者使用方式一样

Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
Vue.$toast = Vue.prototype.$toast = Toast;
Vue.$indicator = Vue.prototype.$indicator = Indicator;

mint UI MessageBox 使用的更多相关文章

  1. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  2. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  3. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  4. vue mint UI

    vue 与mint  UI 结合开发手机app  html5页面 api  文档   http://mint-ui.github.io/#!/zh-cn

  5. Mint UI文档

    Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...

  6. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  7. iView webapp / Mint UI / MUI [前端UI]

    前端UI iView webapp一套高质量的 微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 ...

  8. Mint UI 使用指南

    上来直接在webpack里将Mint UI引入项目,发现各种问题.饿了么组件库文档太坑了,好多地方写错,有些该说明的地方没说,比如例子里单文件.vue组件里用的类post-css处理器,我一直使用SA ...

  9. Mint UI Example的运行

    Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, ...

随机推荐

  1. Java基础系列5:深入理解Java异常体系

    该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 前言: Java的基 ...

  2. 易初大数据 2019年11月14日 spss笔记 王庆超

    “均匀分布”的随机数 需要打开本章的数据文件“sim.sav.”. 1.设置随机数种子 1选择[转换]--[随机数字生成器],勾选‘设置起点’,并在‘固定值’ 的下‘值’中输入一个用户给定的数值.该数 ...

  3. Linux命令大全(个人整理,如不全面望谅解)

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  4. springMVC-MyBatis-Mysql 环境下, 返回时间格式不是指定格式

    在数据库中的时间是: 比如: 2018-04-06:12;23:34. 但是mybatis查询出来以后是下面的格式. {"updatedTime":{"date" ...

  5. mysql中int、bigint、smallint、tinyint 长度

    mysql中int.bigint.smallint.tinyint 长度 bigint -2^63 (-9223372036854775808) 到 2^63-1 (92233720368547758 ...

  6. nyoj 56-阶乘因式分解(一)(数学)

    56-阶乘因式分解(一) 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:15 submit:16 题目描述: 给定两个数m,n,其中m是一个素数. ...

  7. bootstrap中图片响应式

    主要解决的是在轮播图中图片响应式的问题 目的 各种终端都需要正常显示图片 移动端应该使用更小(体积)的图片 实现方式 给标签添加两个data-属性(如:data-img-sm="小图路径&q ...

  8. PostgreSQL各数据类型的内置函数

    参考<PostgreSQL实战> 3.1.2 数字类型操作符和数学函数 PostgreSQL 支持数字类型操作符和丰富的数学函数 例如支持加.减.乘.除.模取取余操作符 SELECT 1+ ...

  9. 程序员修神之路--kubernetes是微服务发展的必然产物

    菜菜哥,我昨天又请假出去面试了 战况如何呀? 多数面试题回答的还行,但是最后让我介绍微服务和kubernetes的时候,挂了 话说微服务和kubernetes内容确实挺多的 那你给我大体介绍一下呗 可 ...

  10. Linux root设置初始值的方法

    Linux root设置初始值的方法 ubuntu默认不允许使用root登录,因此初始root账户是不能使用的,需要在普通账户下利用sudo权限修改root密码. 在终端输入sudo passwd r ...