一:移动端UI框架mint-ui_mint ui

官网按需引入的.babelrc写法是老的写法,配置的plugins一直报错是因为"component"后面不要[]直接跟{}

一：Mint-UI中按钮组件的使用

简介:Mint UI是基于 Vue.js 的移动端组件库.mint-ui官网链接
1.安装

// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S
1
2
3
4
5

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





1
2
3
4
5
6
7
8
9
10
11
12

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>
1
2
3
4
5

注册的全局组件 所以所有模板内都可使用 效果图如下:

二： 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("消息提示");
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.配置参数

(此API图来自官网,若侵权可联系我删除)
2.1传入对象可配置更多选项

Toast({
     message: '提示',//文本提示内容
     position: 'top',//弹出框显示的位置
     duration: 3000//持续3秒消失,单位毫秒
    });
1
2
3
4
5

显示效果

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,//一直不消失
                });
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.3提示框可设图标，并为图标设置样式。
2.3.1.（图标需自行准备）若需在文字上方显示一个 icon 图标，可以将图标的类名作为 iconClass 的值传给 Toast
此处我用bootstrap中的图标，非必须。
安装bootstrap,安装版本三，版本四里面没有font字体文件，图标不生效

cnpm i bootstrap@3
1

引入
只写bootstrap默认引入bootstrap的js文件，所以此处需写详细路径

import 'bootstrap/dist/css/bootstrap.css';
1

使用

Toast({
  message: '操作成功',
  iconClass: 'glyphicon glyphicon-heart'
});
1
2
3
4

效果图：

2.3.2
给图标和提示文本设置样式
设置样式后若设置color:red;图标和文本都会变成红色

Toast({
     className:'mytoast'//Toast 的类名。可以为其添加样式
      });
1
2
3

<style>
    .mytoast{
        color: red;
    }
</style>
1
2
3
4
5

效果

若只想给图标或文本其中一个设置样式则设置mytoast i或mytoast span的样式（因如图类默认给div设置的，其子元素i为图标，span为提示文本）

<style>
    .mytoast i{
        color: red;
    }
</style>
1
2
3
4
5

效果

三：

声明:本文仅用于学习分享.是根据教学视频做的笔记,如涉及侵权,可联系我立即删除,谢谢!