mint-ui笔记

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