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));

};