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

今天药忘吃喽~ 2024-02-19 12:33 62阅读 0赞

**主要操作技能：**

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

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

![70][]

查找第一个OK！

![70 1][]

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

![70 2][]  
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)

![70 3][]

![70 4][]

**编写代码:**

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">
    						
    						<mt-cell v-for="n in 12" :title="'我的 ' + n" />
    					</div>
    					<router-link to="/">
    						
    						<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按钮**

![70 5][]

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

![70 6][]

Progress 进度条

![70 7][]

####  ####

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

搭配 [tab-container][] 组件使用

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

![70 8][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b7052f89344f4669b40ec5210ce3ad75.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/37fa685c35414faba4d29b75400bb986.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/268e13c1b945437dbcab4c1d27291930.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b7a820b41b9d4d6ab159c2ced935bd4d.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a58515444f184ae1a66ee9082f30206b.png
[70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/37f2c604d80b42cd9febac7fc11c030c.png
[70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b9487b2e37d34a89ac5c756e10956f74.png
[70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/47a0156df1c3470c892a2a3038a95e7d.png
[tab-container]: http://mint-ui.github.io/docs/#/zh-cn2/tab-container
[70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5975cd22973f431f84d0948504d88d4c.png