官网按需引入的.babelrc写法是老的写法,配置的plugins一直报错是因为"component"后面不要[]直接跟{}
一：Mint-UI中按钮组件的使用
简介:Mint UI是基于 Vue.js 的移动端组件库.mint-ui官网链接
1.安装
// 安装# Vue 1.xnpm install mint-ui@1 -S# Vue 2.0npm install mint-ui -S
2.引入
// 引入全部组件//先引入vue再导入mint-ui和样式文件,最后通过vue.use(mint)把mint-ui注册到vue身上//注:如果包安装到node_modules里,想引入某包的某文件可以直接省略node_modules这一层目录,因为它会自动到这里面去找.import Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(Mint);
3.使用
mint-ui分为三部分,js基于js的,css用于简单样式的,from用于表单
拿按钮为例:
3.1.引入全部组件
因引入的全部组件,使用css组件时不需要再单独引入对应组件,直接在el选定的区域内使用组件即可(如果是js组件还需单独引入).mt-button为组件名,更多尺寸颜色可查看官方文档 添加对应属性即可.
el选定区域内写:
<template><div><mt-button type="danger" plain>danger</mt-button></div></template>
注册的全局组件 所以所有模板内都可使用 效果图如下:
二： Mint-UI中Toast组件的使用
Toast组件:
简短的消息提示框，支持自定义位置、持续时间和样式。更直观的效果展示见官网.
1.基本使用
1.1.全部引入组件后,使用css组件,不需再单独引入,使用js组件仍需单独引入.且需要在对应的组件.vue文件中引.
1.2.点击按钮 调用show方法 show方法内调用Toast()
1.3.查看效果如图,点击按钮弹出提示信息,3秒后自动消失
<template><div class="one">//2.点击按钮 调用show方法 show方法内调用Toast()<mt-button type="danger" @click="show">danger</mt-button></div></template><script>import {Toast } from 'mint-ui';//1.引入组件export default {methods:{show(){Toast("消息提示");}}}
2.配置参数
(此API图来自官网,若侵权可联系我删除)
2.1传入对象可配置更多选项
Toast({message: '提示',//文本提示内容position: 'top',//弹出框显示的位置duration: 3000//持续3秒消失,单位毫秒});
显示效果
2.2模拟访问网页加载数据提示框弹出正在加载，直到数据返回，提示框才消失。此处用延时器模拟ajax获取数据1秒后成功返回数据，提示框消失。
时间若传-1则提示框一直不消失
export default {data(){return{instance:null}},created(){this.show()；//刚进入网页就弹出提示框setTimeout(()=>{//setTimeout有作用域问题，所以必须用箭头函数确定this指向this.instance.close();//手动关闭toast},1000)},methods:{show(){this.instance = Toast({message: '正在加载页面',//文本提示内容position: 'top',//弹出框显示的位置duration: -1,//一直不消失});}}}
2.3提示框可设图标，并为图标设置样式。
2.3.1.（图标需自行准备）若需在文字上方显示一个 icon 图标，可以将图标的类名作为 iconClass 的值传给 Toast
此处我用bootstrap中的图标，非必须。
安装bootstrap,安装版本三，版本四里面没有font字体文件，图标不生效
cnpm i bootstrap@3
引入
只写bootstrap默认引入bootstrap的js文件，所以此处需写详细路径
import 'bootstrap/dist/css/bootstrap.css';
使用
Toast({message: '操作成功',iconClass: 'glyphicon glyphicon-heart'});
效果图：
2.3.2
给图标和提示文本设置样式
设置样式后若设置color:red;图标和文本都会变成红色
Toast({className:'mytoast'//Toast 的类名。可以为其添加样式});
<style>.mytoast{color: red;}</style>
效果
若只想给图标或文本其中一个设置样式则设置mytoast i或mytoast span的样式（因如图类默认给div设置的，其子元素i为图标，span为提示文本）
<style>.mytoast i{color: red;}</style>
效果
三：
声明:本文仅用于学习分享.是根据教学视频做的笔记,如涉及侵权,可联系我立即删除,谢谢!
