官网按需引入的.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

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>

效果

三：

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

一:移动端UI框架mint-ui相关推荐

【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...
Vue移动端框架Mint UI接口跨域问题
自己写了一个json数据,放在服务器上,现在要通过vue项目调用数据 http://www.intmote.com/test.json 我现在要调用在调用接口数据的时候的时候会出现这样的报错 Ac ...
Vue移动端框架Mint UI教程-调用模拟json数据(五)
1:安装 npm install vue-resource 2:打开main.js 注册 import VueResource from 'vue-resource' Vue.use(VueResou ...
jQuery的UI框架 Liger UI
jQuery的UI框架 Liger UI http://www.oschina.net/p/ligerui
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别！
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别! 文章目录 1.官网Popup 弹出层链接 2.属性不同 3.属性对照 4.弹出的方式 5.uView特有属 ...
vue 移动端跳转页面_Vue移动端框架Mint UI教程-跳转新页面(四)
前三节写了vue的移动端框架的入门篇章,今天接着写,今天写的教程其实很简单,在之前的基础上,新建一个界面,并且进行跳转新页面. 1:首先,在pages底下新建一个新的页面fa.vue 在页面里面写一些 ...
python 移动ui框架_Touch UI：基于vue的移动端UI框架
Hi,我们做了一款高质量的.免费的移动端UI框架. 经过将两年多开发和项目实践,我们终于把Touch UI开放出来了.这是一套基于vue.js打造的移动端UI框架,包含近百种组件,几乎囊括了开发移动应 ...
推荐一款多平台快速开发的前端UI框架 —— uView UI
本人体验了一遍,风格简约,功能齐全,正是心心念念的前端UI框架配合uni-app 真正是一款多平台开发的神器!! 强烈推荐!! 官网直达:uView UI 体验链接:uView多平台前端开发UI - ...
关于uni-app的ui库、ui框架、ui组件
首先需要3个新认知: 传统vue的库,只是for web的,不能跨多端. 而微信小程序的库,虽然也可以用于app,但不能跨到h5和百度支付宝等其他小程序. 比如element-ui.mint-ui只能 ...
基于 jQuery 的前端 UI 框架 LuLu UI
LuLu UI 详细介绍 LuLu UI 是一个基于 jQuery,针对 PC 网站,兼容 IE8+ 或 IE7+ 的前端 UI 框架,包含 20+ 静态或动态 UI 组件. 上手简单 lulu整个项 ...

一:移动端UI框架mint-ui

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

二： Mint-UI中Toast组件的使用

三：

一:移动端UI框架mint-ui相关推荐

最新文章

热门文章