Vue 使用 Mint UI 實(shí)現(xiàn)左滑刪除效果CellSwipe

2019-11-19 13:56:44

字體：大中小

供稿：網(wǎng)友

Mint UI 是餓了么開源的，基于 Vue.js 的移動端組件庫。

關(guān)于Mint UI，有文檔不夠準(zhǔn)確詳盡，組件略顯粗糙，功能不夠完善等問題；也有高度組件化，體積小等優(yōu)點(diǎn)。

安裝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可以定義不止一個(gè)按鈕，也可以自行修改CellSwipe的默認(rèn)樣式

效果展示：