mint-ui笔记

1.安装： npm install mint-ui --save

　　　　npm install babel-plugin-component --save-dev //（只引入部分组件时须要安装）

2.导入项目中

　　(1).直接引入整个项目

//main.js文件

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

　　(2).按组件引入

//main文件

import 'mint-ui/lib/style.css';   //官方文档上没有引入CSS文件，但是我没有引入时组件不生效 
import { Swipe, SwipeItem, Badge, Header, Button } from 'mint-ui';

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Badge.name, Badge);
Vue.component(Header.name, Header);
Vue.component(Button.name, Button);

 3.在vue模块中直接引入某些模块的方式

//.vue文件

<script>
import { Indicator, Toast, MessageBox  } from "mint-ui";
...
</script>

 

 4.一些注意点

  import { MessageBox} from 'mint-ui'

  MessageBox.confirm ('', '', {

 message: '继续发布？', title: '提示', confirmButtonText: '继续编辑', cancelButtonText: '确认取消'
}).then(action => {}, action => {})

MessageBox.prompt(message, title, {option});

//下面是源码

MessageBox.alert = function(message, title, options) {

if (typeof title === 'object') {

options = title;

title = '';

}

return MessageBox(merge({

title: title,

message: message,

$type: 'alert',

closeOnPressEscape: false,

closeOnClickModal: false

}, options));

};

MessageBox.confirm = function(message, title, options) {

if (typeof title === 'object') {

options = title;

title = '';

}

return MessageBox(merge({

title: title,

message: message,

$type: 'confirm',

showCancelButton: true

}, options));

};

MessageBox.prompt = function(message, title, options) {

if (typeof title === 'object') {

options = title;

title = '';

}

return MessageBox(merge({

title: title,

message: message,

showCancelButton: true,

showInput: true,

$type: 'prompt'

}, options));

};