mint-ui框架的使用
1、安装mint-ui框架:
cnpm install mint-ui --save-dev
在main.js入口文件中引入并命名用mint-ui框架
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue' Vue.use(MintUI) new Vue({
el: '#app',
components: { App }
})
在app.vue组件中使用:
<template>
<div class="page-tabbar">
<div class="page-wrap">
<div class="page-title">Tabbar</div>
<div>
<mt-cell class="page-part" title="当前选中" :value="selected" />
</div> <!-- tabcontainer -->
<mt-tab-container class="page-tabbar-container" v-model="selected"> <mt-tab-container-item id="外卖">
<mt-cell v-for="n in 10" :title="'餐厅 ' + n" />
</mt-tab-container-item> <mt-tab-container-item id="订单">
<mt-cell v-for="n in 5" :title="'订单 ' + n" />
</mt-tab-container-item> <mt-tab-container-item id="发现">
<mt-cell v-for="n in 7" :title="'发现 ' + n" />
</mt-tab-container-item> <mt-tab-container-item id="我的">
<div class="page-part">
<!-- cell -->
<mt-cell v-for="n in 12" :title="'我的 ' + n" />
</div>
<router-link to="/">
<!-- button -->
<mt-button type="danger" size="large">退出</mt-button>
</router-link>
</mt-tab-container-item>
</mt-tab-container>
</div> <mt-tabbar v-model="selected">
<mt-tab-item id="外卖">
<img slot="icon" src="../assets/logo.png">
外卖
</mt-tab-item>
<mt-tab-item id="订单">
<img slot="icon" src="../assets/logo.png">
订单
</mt-tab-item>
<mt-tab-item id="发现">
<img slot="icon" src="../assets/logo.png">
发现
</mt-tab-item>
<mt-tab-item id="我的">
<img slot="icon" src="../assets/logo.png">
我的
</mt-tab-item>
</mt-tabbar>
</div>
</template> <script>
export default {
name: 'tabbar',
data() {
return {
selected: '外卖'
};
}
};
</script> <style>
.page-tabbar {
overflow: hidden;
height: 100vh;
} .page-wrap {
overflow: auto;
height: 100%;
padding-bottom: 100px;
}
</style>
效果如下:
mint-ui框架的使用的更多相关文章
- vuetify,vux,Mint UI 等框架的选择
vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- 前端UI框架小汇总
前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[ ...
- 优秀的基于VUE移动端UI框架合集
1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...
- 前端常用UI框架
移动端UI框架 Mint UI(饿了么团队) 中文官网:http://mint-ui.github.io/#!/en 饿了么前端团队推出的基于Vue.js的移动端组件库 GitHub地址:https: ...
- vue使用桌面Element-UI和移动端MintUI的UI框架
vue使用桌面Element-UI和移动端MintUI的UI框架 element-uiElement - 网站快速成型工具http://element-cn.eleme.io/#/zh-CN 安装:n ...
- 前端UI框架选择区别对比推荐
UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...
- vue UI框架
一.pc端 element UI 饿了么UI支持vue2.x80分优点:组件的API方法.属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观 N3 N3支持vue2.x70分优点:组件操作几乎都有动 ...
- 基于vue的UI框架集锦
前端框架百花齐放.争奇斗艳,令人眼花缭乱.大神们一言不合就整一个框架出来,另小白们无所适从.下面罗列了一些比较优秀的UI框架,Star多的大都是老牌劲旅,Star少的许多是后起之秀. (1)Eleme ...
- 微信公众号 几种移动端UI框架介绍
微信公众号开发,主要是移动端网页的页面开发,在这里推荐3个移动端UI框架:WeUI.SUI和Mint UI. 1. WeUI 1.1 WeUI WeUI是微信官方设计团队为微信 Web 开发量身设计, ...
随机推荐
- ctci1.4
; ; ; i < len ; i++) ; +]; ; i < len; i++){ '; } ...
- ItemsSource数据源 或 集合属性 的定义 ——> 的数据源定义(典型)
在Xaml中: ItemsSource="{Binding Path=GridDataSource.PoliceforceDataSource}" 在ViewModel中: Obs ...
- 进程上下文频繁切换导致load average过高
一.问题现象 现网有两台虚拟机主机95%的cpu处于idle状态,内存使用率也不是特别高,而主机的load average达到了40多. 二.问题分析 先在主机上通过top.free.ps.iosta ...
- python:小乌龟turtle
turtle的意思是乌龟,也是python中自带的图形函数,使用turtle的方法也很形象,就好像在画布上有一个小乌龟(在画布上是一个箭头),然后你可以让它动来动去,它经过的地方就被留下了记号. 例如 ...
- nodejs利用express操作mysql增删改查
如果不知道怎么连接数据库的请看http://www.cnblogs.com/complete94/p/6714757.html 我当大家都知道怎么连接数据库了,那么 我们开始吧 var express ...
- Gridview 尾部添加总计
1.GridView控件showfooter的属性=true 2. int totalZJ, iZJ; protected void GridView1_RowDataBound(object sen ...
- 本地如何搭建IPv6环境测试你的APP(转)
IPv6的简介 IPv4 和 IPv6的区别就是 IP 地址前者是 .(dot)分割,后者是以 :(冒号)分割的(更多详细信息自行搜索). PS:在使用 IPv6 的热点时候,记得手机开 飞行模式 哦 ...
- Okhttp之CacheInterceptor简单分析
<OkHttp之BridgeInterceptor简单分析 >简单分析了BridgeInterceptor的工作原理,在Okhttp的拦截器链上BridgeInterceptor的下一个拦 ...
- XOR Queries(莫队+trie)
题目链接: XOR Queries 给出一个长度为nn的数组CC,回答mm个形式为(L, R, A, B)(L,R,A,B)的询问,含义为存在多少个不同的数组下标k \in [L, R]k∈[L,R] ...
- python常用模块之sys模块
python常用模块之sys模块 1.sys.argv[]:命令行参数List,第一个元素是程序本身 # 写一个简单的python程序,代码如下: #!/usr/bin/python #coding= ...