vue学习笔记--mint-ui的学习

安装

npm i mint-ui -D

import Vue from 'vue'
import MintUI from 'mint-ui'//导入所有组件
import 'mint-ui/lib/style.css'
Vue.use(MintUI);//所有的组件注册为全局组件

使用

按钮

css样式的组件可以直接通过标签使用：

<mt-button type="default" icon="more">默认按钮</mt-button>
<mt-button type="default" icon="back">默认按钮</mt-button>
<mt-button type="primary" size="large">large</mt-button>
<mt-button type="danger" size="normal">normal</mt-button>
<mt-button type="danger" size="small" disabled>disabled</mt-button>
<mt-button plain>plain</mt-button>

提示消息Toast

引入：

import {Toast} from 'mint-ui'

调用：

Toast("调用的提示消息");

app.vue中的js：

<script>
import {Toast} from 'mint-ui'
	export default {
		data(){//组件中的data必须时函数形式
			return {
				msg:'123',
				toastInstance:null,
			}
		},
		methods:{
			show(){
				this.toastInstance = Toast({
					message:"调用的提示消息,不消失",
					duration:-1,
				});

				Toast({
					message:"调用的提示消息,停留1s",
					duration:1000,//-1不消失
					position:'top',
					iconClass:'glyphicon glyphicon-heart',//图标需要自行准备
					className:'detoast'//自定义样式
				});
			},
			hide(){
				this.toastInstance.close();
			}
		}
	}
</script>

按需要导入

引入插件babel-plugin-component
安装：

npm i babel-plugin-component -D

修改.babelrc，增加plugins中的内容

{
"plugins":[["component",[
		{
			"libraryName":"mint-ui",
			"style":true
		}
	]]]
}

如果只需要使用button

//按需导入mint-ui
import {Button} from 'mint-ui'
//Vue.component注册组件
Vue.component('mybutton',Button);

使用时

<mybutton>btn</mybutton>

如果不替换名字时，可以写为

Vue.component(Button.name,Button);

MUI

下载：https://github.com/dcloudio/mui

引用：

//导入mui
import './lib/mui/css/mui.min.css'

使用：

<button type="button" class="mui-btn mui-btn-royal">按钮</button>

文化建设

答武陵太守 仗剑行千里，微躯敢一言 曾为大梁客，不负信陵恩