Vue.js框架--Ui框架的Mint UI（二十一）

主要操作技能：

饿了么公司基于vue开发的vue的Ui组件库
     (1)   Element Ui    基于vue  pc端的UI框架  
     (2)   MintUi         基于vue 移动端的ui框架

  通过github.com 网站去查询mint ui

查找第一个OK！

 

     1）官方网站： http://mint-ui.github.io/#!/en

     2）安装 cnpm i  mint-ui -S     （ i 代表是 install  ；  -S 代表是--save)

     3）使用MintUi时，在main.js中配置
         import MintUI from 'mint-ui'
         import 'mint-ui/lib/style.css'
         Vue.use(MintUI)

  

编写代码:

Home.vue

<mt-button type="default">default</mt-button>
		<mt-button type="primary">primary</mt-button>
		<mt-button type="danger">danger</mt-button>
		<mt-button disabled>disabled</mt-button>
		
		<mt-button>
		  <img src="../assets/logo.png" height="20" width="20" slot="icon">
		    带自定义图标
		</mt-button><br />
		
		<mt-button @click.native="handleClick">点击触发 handleClick</mt-button>



handleClick(){
				alert(this.msg);
			}

Inst.vue子路由

<mt-index-list>
			<mt-index-section index="A">
				<mt-cell title="Aaron"></mt-cell>
				<mt-cell title="Alden"></mt-cell>
				<mt-cell title="Austin"></mt-cell>
			</mt-index-section>
			<mt-index-section index="B">
				<mt-cell title="Baldwin"></mt-cell>
				<mt-cell title="Braden"></mt-cell>
			</mt-index-section>
			<mt-index-section index="C">
				<mt-cell title="Cool"></mt-cell>
				<mt-cell title="Color"></mt-cell>
				<mt-cell title="Clear"></mt-cell>
				<mt-cell title="Coot"></mt-cell>
			</mt-index-section>
			<mt-index-section index="D">
				<mt-cell title="Door"></mt-cell>
				<mt-cell title="Driver"></mt-cell>
				<mt-cell title="Dipt"></mt-cell>
				<mt-cell title="Dear"></mt-cell>
			</mt-index-section>
			
			<mt-index-section index="Z">
				<mt-cell title="Zack"></mt-cell>
				<mt-cell title="Zane"></mt-cell>
			</mt-index-section>
		</mt-index-list>

Inter.vue子路由

	<mt-progress :value="10" :bar-height="15"></mt-progress><br />

		<mt-progress :value="20" :bar-height="20">
			<div slot="start">0%</div>
			<div slot="end">100%</div>
		</mt-progress> <br />

Tab.vue 子路由

<div id="tab">

		<div class="page-wrap">
			<div class="page-title">Tabbar</div>
			<div>
				<mt-cell class="page-part" title="当前选中" :value="selected" />
			</div>
			<mt-tab-container class="page-tabbar-container" v-model="selected">
				<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 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" fixed>
			<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>

 

效果：

Button按钮

Index List 索引列表，可由右侧索引导航快速定位到相应的内容。

Progress 进度条

 

Tabbar底部选项卡，点击 tab 会切换显示的页面。依赖 tab-item 组件。

搭配 tab-container 组件使用

tab-container面板，可切换显示子页面。