一:概述

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.效果

  

四:按需导入

1.导包

  

2.在.babelrc中修改

  

3.引入需要的组件

  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) //按需导入
import {Button} from 'mint-ui'
Vue.component(Button.name,Button) //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
})

  

013 mint-ui的更多相关文章

  1. vue mint UI

    vue 与mint  UI 结合开发手机app  html5页面 api  文档   http://mint-ui.github.io/#!/zh-cn

  2. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  3. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  4. Mint UI文档

    Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...

  5. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  6. iView webapp / Mint UI / MUI [前端UI]

    前端UI iView webapp一套高质量的 微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 ...

  7. Mint UI 使用指南

    上来直接在webpack里将Mint UI引入项目,发现各种问题.饿了么组件库文档太坑了,好多地方写错,有些该说明的地方没说,比如例子里单文件.vue组件里用的类post-css处理器,我一直使用SA ...

  8. Mint UI Example的运行

    Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, ...

  9. vuetify,vux,Mint UI 等框架的选择

    vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...

  10. Vue移动组件库Mint UI的安装与使用

    一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...

随机推荐

  1. img垂直居中div - css样式

    参考: https://www.jianshu.com/p/f1b570eabe33 html: <div class="showImg" style="text- ...

  2. js事件3-事件对象

    对于每次点击一个事件,都会产生一个事件对象,这个事件对象中包含了这个事件的很多信息 我们来看看事件对象具体有哪些信息 Object.onclick=function(e){ ..... }其中的参数e ...

  3. python预课04 列表,元祖,统计值计算示例,py文件转为EXE文件,爬虫初步学习

    列表,元组 #list l1 = [1, 2, 3, '高弟弟'] #定义一个列表 #增 l1.append("DSB") #最后增加"DSB"的元素 #删 l ...

  4. Sitemap Error : XML declaration allowed only at the start of the document解决方法

    今天ytkah的客户反馈说他的xml网站地图有问题,提示Sitemap Error : XML declaration allowed only at the start of the documen ...

  5. OpenCV录制视频,播放视频

    一.录制视频 获取摄像头操作 camObj = cv2.VideoCapture(0) :0为默认计算机默认摄像头,多个摄像头依次后面1.2.3 检查是否成功初始化: camObj.isOpen() ...

  6. 无故出现 mysql dead but subsys locked的有关问题

    无故出现 mysql dead but subsys locked的问题问题描述:1.mysql安装完成后,使用service mysqld restart总是出现stop mysqld servic ...

  7. Buy Fruits-(构造)

    https://ac.nowcoder.com/acm/contest/847/C 在blueland上有 n n个水果店,它们的编号依次为 0,1,2...n−1 0,1,2...n−1.奇妙的是, ...

  8. Tips on C/C++

    运算符优先级 !> 算术运算符 > 关系运算符 > (&& ||)> 条件运算符> 赋值运算符 > 逗号运算符 库引用 include   &quo ...

  9. docz 强大简单的文档管理工具

    使用docz我们可以用来方便的编写以及发布文档,同时提供漂亮友好的交互,可以快速的制作一个产品级的 站点,使用了了mdx 文件(还是markdown),同时可以方便的集成到自己的web 项目中 安装试 ...

  10. fork,vfork

    转自 http://blog.csdn.net/todd911/article/details/14062103 1.fork函数 一个现有的进程可以调用fork函数创建一个新的子进程. #inclu ...