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

最新推荐文章于 2022-12-04 00:45:08 发布

原创最新推荐文章于 2022-12-04 00:45:08 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

Vue.JS 专栏收录该内容

57 篇文章

订阅专栏

本文介绍如何使用MintUI组件库创建按钮、索引列表、进度条和Tabbar组件。通过具体代码示例，展示了组件的基本用法，包括安装、配置和使用过程，适用于Vue移动端UI开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要操作技能：

饿了么公司基于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按钮