二、使用

安装

1.x版本的Vue安装时需指定Mint UI的版本

# Vue 1.x
npm install mint-ui@1 -S

# Vue 2.0
npm install mint-ui -S

引入

Mint UI的引入方式分为两种：可引入全部组件 使用会较为方便但占用内存较大还可按需引入部分的组件 节省占用的内存

// 引入全部组件
import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

// 按需引入部分组件
import { 组件名 } from 'mint-ui';
Vue.component(组件名);
Vue.component(组件名.name, 组件名);

Mint UI的组件分为两种：CSS组件 和 JS组件

1、CSS组件 – 以Button为例

CSS组件有很多按钮(button)只是其中之一CSS组件的特点是只要全局引入了Mint UI的组件即可在页面中以标签的形式直接使用

main.js：

// 导入Mint UI所有组件
import MintUI from "mint-ui"
// 导入Mint UI的样式(前面可省略node_modules目录)
import "mint-ui/lib/style.css"
// 手动安装Mint UI到Vue中
Vue.use(MintUI)

App.vue：
按钮组件的默认标签名为<mt-button>

<template>
    <div>
        <mt-button type="danger" size="large">button</mt-button>

        <mt-button disabled>disabled</mt-button>
        <mt-button plain>plain</mt-button>

        <mt-button icon="back">back</mt-button>
        <mt-button on icon="more">更多</mt-button>
    </div>
</template>

<script> export default { } </script>

<style>

</style>用type属性改变按钮的颜色：

用type属性改变按钮的颜色：

<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>

用size属性改变按钮的大小：

<mt-button size="small">small</mt-button>
<mt-button size="large">large</mt-button>
<mt-button size="normal">normal</mt-button>

用disabled属性禁用按钮：

<mt-button disabled>disabled</mt-button>

用plain属性设为幽灵按钮：
(即颜色和外面的相反只有边框颜色里面是空白的)

<mt-button plain>plain</mt-button>

用icon属性设置按钮的图标：

<mt-button icon="back">back</mt-button>
<mt-button icon="more">更多</mt-button>

用src属性设置自定义图标：

<mt-button>
  <img src="http://www.toutiao.com/assets/100x100.png" height="20" width="20" slot="icon">
  自定义图标
</mt-button>用**.native**绑定点击事件：

用**.native**绑定点击事件：

<mt-button @click.native="handleClick">点击触发</mt-button>

2、JS组件 – 以Toast为例

JS组件也有很多弹出框(Toast)只是其中之一JS组件的特点是需要在<script>标签内导入

导入：

import { 组件名} from 'mint-ui';

App.vue：

<template>
    <div>
        <mt-button type="danger" size="large" @click="show">button</mt-button>
    </div>
</template>

<script> // 从Mint UI中按需导入Toast组件 import { Toast } from 'mint-ui'; export default { data(){ return{} }, methods:{ show() { Toast("提示"); } } } </script>

<style>

</style>

在调用Toast时可传入一个对象 以配置更多选项：

Toast({
	message: '提示', // 弹窗内容
	position: 'bottom', // 弹窗位置(top middle bottom)
	duration: 5000 // 持续时间(毫秒) 若为-1则永久显示
});

可用iconClass属性设置在Toast的文字上方显示一个图标：
将图标的类名作为iconClass的值传给Toast

Toast({
	message: '操作成功',
	iconClass: 'icon icon-success' // 图标的类名
});

可用className属性设置图标的样式：
传入一个类的类名(class) 即可实现该类的样式
app.css：

.mytoast
{
    color:aqua;
}

main.js：

// 导入bootstrap样式
import "bootstrap/dist/css/bootstrap.css"
// 导入自定义的css样式
import "http://www.toutiao.com/a6821404705248248331/css/app.css"

App.vue：

<template>
    <div>
        <mt-button type="danger" @click="show">button</mt-button>
    </div>
</template>

<script> // 从Mint UI中按需导入Toast组件 import { Toast } from 'mint-ui'; export default { data(){ return{} }, methods:{ show() { Toast({ message: '提示', // 弹窗内容 position: 'middle', // 弹窗位置(top middle bottom) duration: 5000, // 持续时间(毫秒) 若为-1则永久显示 iconClass: 'glyphicon glyphicon-ok', // 图标的类名 className: "mytoast" // 自定义样式 传入一个类的类名 }); } } } </script>

<style>

</style>