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

Z时代
2024-01-10
分类：综合

vue

主要操作技能：

饿了么公司基于vue开发的vue的Ui组件库

(1) Element Ui 基于vue pc端的UI框架

(2) MintUi 基于vue 移动端的ui框架

通过github.com 网站去查询mint ui" title="mint ui">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>