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