這次帶給大家Vue Mint UI 做出手機端滑動刪除,Vue Mint UI做出手機端滑動刪除的注意事項有哪些,以下就是實戰案例,一起來看一下。
關於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>
:right可以定義不只一個按鈕,也可以自行修改CellSwipe的預設樣式
效果顯示:
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是Vue+Mint UI 做出手機端滑動刪除的詳細內容。更多資訊請關注PHP中文網其他相關文章!