Mint UI 是饿了么开源的,基于 Vue.js 的移动端组件库。
关于Mint UI,有文档不够准确详尽,组件略显粗糙,功能不够完善等问题;也有高度组件化,体积小等优点。
安装Mint UI:
- # Vue 1.x
- npm install mint-ui@1 -S
- # Vue 2.0
- npm install mint-ui -S
引入组件:
- // 引入全部组件
- import Mint from 'mint-ui';
- import 'mint-ui/lib/style.css'
- Vue.use(Mint);
- // 按需引入部分组件
- import { CellSwipe } from 'mint-ui';
- Vue.component(CellSwipe.name, CellSwipe);
从 文档中摘录API,Slot如下:
代码示例:
- <ul class="list">
- <li class="item" v-for="section in sectionList">
- <mt-cell-swipe
- :right="[
- {
- content: '删除',
- style: { background: '#ff7900', color: '#fff'},
- handler: () => deleteSection(section.PartId)
- }
- ]">
- <p class="section">{{section.PartName}}</p>
- <p class="teacher">{{section.TeacherName}}</p>
- </mt-cell-swipe>
- </li>
- </ul>
效果展示: