一：概述
1.中文文档
https://mint-ui.github.io/#!/en
2.安装包
二：mt-button的使用
主要是介绍css-component
1.程序
在App.vue下面写
<template>
<div>
<h1>这是 App 组件</h1>
<router-link to="/account">Account list</router-link>
<router-link to="/goodlist">Goodslist list</router-link>
<router-view></router-view>
<br>
<mt-button type="primary">primary</mt-button>
<mt-button type="default">default</mt-button>
<mt-button type="danger">danger</mt-button>
<br>
<mt-button size="small" type="primary">small</mt-button>
<mt-button size="large" type="danger">large</mt-button>
<mt-button size="normal" type="primary">normal</mt-button>
<br>
<mt-button disabled>disabled</mt-button>
<br>
<mt-button plain>plain</mt-button>
<br>
<mt-button icon="back">back</mt-button>
<mt-button icon="more">更多</mt-button>
</div>
</template>
<script>
</script>
<style>
</style>
2.效果
三：toast的使用
主要是介绍js component
1.需求说明一下
刷新进页面弹出提示框，然后等页面数据刷新结束之后，就自动关闭弹框
包括弹框图标，以及变色
2.新建一个app.css
用于图标变色
.mytoast i{
color: aqua !important;
}
3.使用bootstrap的图标
所以，需要引用包。同时，将新建的css引入
修改main.js如下：
// js的主要入口
console.log("ok")
import Vue from ‘vue‘
//引用vue-router，然后和vue产生关系
import VueRouter from ‘vue-router‘
Vue.use(VueRouter)
//MintUI
import MintUI from ‘mint-ui‘
import ‘mint-ui/lib/style.css‘
Vue.use(MintUI)
//bootstrap的样式
import ‘bootstrap/dist/css/bootstrap.css‘
import ‘./css/app.css‘
import app from ‘./App.vue‘
import router from ‘./router.js‘
var vm = new Vue({
el:‘#app‘,
render:c=>c(app),
router
})
4.App.vue代码如下
<template>
<div>
<h1>这是 App 组件</h1>
<router-link to="/account">Account list</router-link>
<router-link to="/goodlist">Goodslist list</router-link>
<router-view></router-view>
<br>
<mt-button type="primary" @click="show">primary</mt-button>
<mt-button type="default">default</mt-button>
<mt-button type="danger">danger</mt-button>
<br>
<mt-button size="small" type="primary">small</mt-button>
<mt-button size="large" type="danger">large</mt-button>
<mt-button size="normal" type="primary">normal</mt-button>
<br>
<mt-button disabled>disabled</mt-button>
<br>
<mt-button plain>plain</mt-button>
<br>
<mt-button icon="back">back</mt-button>
<mt-button icon="more">更多</mt-button>
</div>
</template>
<script>
import {Toast} from ‘mint-ui‘;
export default {
data(){
return {
toastTnstance:null
};
},
created(){
this.getList();
},
methods:{
//模拟获取样表的方法
getList(){
this.show();
setTimeout(() => {
this.toastTnstance.close();
}, 2000);
},
show(){
this.toastTnstance=Toast({
message: ‘Upload Complete‘,
position: ‘bottom‘,
duration: -1,
iconClass: ‘glyphicon glyphicon-king‘, //图标
className:‘mytoast‘ //自定义toast样式
});
}
}
}
</script>
<style>
</style>
5.效果
四：
原文：https://www.cnblogs.com/juncaoit/p/11441201.html