mint UI MessageBox 使用

一、全局注册

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;

原文地址:https://www.cnblogs.com/wubaiwan/p/11809071.html

时间: 2024-10-08 22:48:27

mint UI MessageBox 使用的相关文章

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

npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入

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

Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库.自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本.本文介绍如何从零开始构建一个使用 Mint UI 的 Vu

vue2.0中使用mint ui做底部选项卡切换

首先在vue2.0中webpack中下载 mint ui 然后再main.js引入 这样就可以使用mint ui里面的布局组件了html部分(就是你要使用底部选项卡的部分) <!--底部选项卡--><mt-tab-container v-model="selected"> <mt-tab-container-item id="one"> one </mt-tab-container-item> <mt-tab-c

基于Mint UI开发VUE项目一之环境搭建和头部底部导航栏的实现

一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大.考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验.依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS

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

前端UI iView webapp一套高质量的 微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 http://mint-ui.github.io/#!/zh-cn MUI 最接近原生APP体验的高性能前端框架 http://dev.dcloud.net.cn/mui/ 原文地址:https://www.cnblogs.com/pengchenggang/p/10108891.html

Mint UI Example的运行

Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, 然后按提示安装npm install 依赖 3.运行npm run dev ,不过发现有报错" Missing radix parameter",点击连接查看原因以及解决办法 4.最后得到的是以下信息,表面打包有效. 但是,访问地址,要怎么在浏览器上访问呢? 要更改配置,如下: 即将 h

mint ui的tabBar监听路由变化实现tabBar切换

说明 最近学习vue,使用了mint ui的tabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的.mui与它基本相反,因此它能根据搜索栏的路由变化,相应的tabBar高亮显示,而mint ui就不能,要加点代码实现了. mint ui tabBar标签栏 //页面 和 数据 <template> <div id="main"> <mt-tabbar v-model="selected"&g

Windows8 UI MessageBox In DevExpress

// custom messagebox using System; using System.Drawing; using System.Windows.Forms; using DevExpress.XtraBars.Docking2010.Views.WindowsUI; using DevExpress.XtraBars.Docking2010.Customization; namespace StatTools { public static class MessageBoxServi

mint ui datetimepicker 手机端jquery datetimepicker 总结应用

对于手机端datetimepicker的使用 在使用minit ui 的datatimepicker的使用方法 首先它需要两个触发器 这里因为项目用到的是开始到结束的时间 我就点击的时候手动传入了一个参数 <input id='start' type="text" class='form-control input-sm' readonly="" name='start' @click='openPicker("start")' v-mod