013 mint-ui
一:概述
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的更多相关文章
- vue mint UI
vue 与mint UI 结合开发手机app html5页面 api 文档 http://mint-ui.github.io/#!/zh-cn
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- Mint UI文档
Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- iView webapp / Mint UI / MUI [前端UI]
前端UI iView webapp一套高质量的 微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 ...
- Mint UI 使用指南
上来直接在webpack里将Mint UI引入项目,发现各种问题.饿了么组件库文档太坑了,好多地方写错,有些该说明的地方没说,比如例子里单文件.vue组件里用的类post-css处理器,我一直使用SA ...
- Mint UI Example的运行
Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, ...
- vuetify,vux,Mint UI 等框架的选择
vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...
- Vue移动组件库Mint UI的安装与使用
一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...
随机推荐
- 【Mysql异常】[HY000][1030] Got error 28 from storage engine
原因: 应该是磁盘空间不足导致 可通过 df -h 查看部署mysql的服务磁盘空间使用情况
- 5.Lvs+Keepalived健康检查
1. Nginx+keepalived对后端服务器心跳检查(需要自定义脚本) 原理:Keepalived并不跟nginx耦合,它俩完全不是一家人但是keepalived提供一个机制:让用户自定义一个s ...
- 轻量级C#编辑器RoslynPad((基于Roslyn编译器))
简介 RoslynPad是一个Apache 2.0协议开源的轻量级C#编辑器.支持自动完成,语法提示,修改建议等功能.很适合平时随手写个C#程序看看运行结果. 目前版本:0.10.1,无需保存也可以运 ...
- php的类使用样例
这个demo.差不多php的类的主要知识点都用到了. public,private关键字, namespace,use命令空间, require导入, interface复用, abstract抽象类 ...
- lxml获取结点属性整并转换为字典参数
#-*- coding: UTF- -*- from lxml import etree source = u''' <div><p ">测试数据1</p> ...
- podium micro-frontends 简单试用
以下是一个简单的podium 试用,包含了layout 以及podlets,使用docker 运行 podium 主要包含了两大部分 podlets 片段服务 layouts 片段组合服务 环境准备 ...
- GoCN每日新闻(2019-11-01)
GoCN每日新闻(2019-11-01) GoCN每日新闻(2019-11-01) 1. Rob Pike 认为 Go 成功的 5 个因素 https://changelog.com/posts/5- ...
- nginx.conf 配置解析之 events配置
worker_connections 1024; 定义每个work_process同时开启的最大连接数,即允许最多只能有这么多连接. accept_mutex on; 当某一个时刻只有一个网络连接请求 ...
- tomcat找不到java_home
Tomcat Neither the JAVA_HOME nor the JRE_HOME environment variable is defined 一眼就能看出来是jdk的环境有问题,但是用了 ...
- Appium-Python-Windows 环境搭建
目录 1.安装JDK 2.安装Android SDK 3.安装Node.js 4.安装Appium server 5.安装Python 6.安装Appium-Python-Client 7.安装pyt ...