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

更新時(shí)間：2018年04月27日 09:36:40 作者：小白菜的博客

這篇文章主要介紹了Vue 使用 Mint UI 實(shí)現(xiàn)左滑刪除效果CellSwipe,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

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

關(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)樣式

效果展示：

總結(jié)

以上所述是小編給大家介紹的Vue 使用 Mint UI 實(shí)現(xiàn)左滑刪除效果CellSwipe，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

el-table如何添加loading效果
這篇文章主要介紹了el-table如何添加loading效果問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
詳解Vue注冊(cè)組件的方法
Vue注冊(cè)組件有這幾種，分別是全局注冊(cè)、局部注冊(cè)、在模塊系統(tǒng)中注冊(cè)，這篇文章主要介紹了Vue注冊(cè)組件的方法,需要的朋友可以參考下
2022-08-08
Vue3 + ElementPlus動(dòng)態(tài)合并數(shù)據(jù)相同的單元格的完整代碼
文章介紹了如何使用ElementPlus的Table組件動(dòng)態(tài)合并單元格,適用于后臺(tái)數(shù)據(jù)返回格式動(dòng)態(tài)且沒有規(guī)律的場景,包括數(shù)據(jù)處理和按鈕操作,文章還附帶了效果圖和代碼詳解,希望能對(duì)大家有所幫助,感興趣的朋友跟隨小編一起看看吧
2025-02-02
vue的傳參方式匯總和router使用技巧
這篇文章主要介紹了vue的傳參方式和router使用技巧,本文給大家列舉了好幾種傳參方式，需要的朋友可以參考下
2018-05-05
Vue.js 和 MVVM 的注意事項(xiàng)
MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發(fā)的架構(gòu)模式，Vue.js 是一個(gè)提供 MVVM 風(fēng)格的雙向數(shù)據(jù)綁定的 Javascript 庫，專注于View 層。這篇文章給大家介紹Vue.js 和 MVVM 的注意事項(xiàng)，感興趣的朋友一起看看吧
2016-11-11
Vue實(shí)現(xiàn)電子簽名功能的完整代碼
本文介紹了在Vue項(xiàng)目中實(shí)現(xiàn)電子簽名功能的步驟,包括將原始文檔轉(zhuǎn)換為圖片、使用`signature_pad`和`html2canvas`庫、調(diào)整簽名位置和縮放比例、合并圖片等步驟,并提供了完整的源碼,需要的朋友可以參考下
2025-02-02
Vue.Draggable使用文檔超詳細(xì)總結(jié)
Vue拖拽組件(Draggable)是一個(gè)允許與View-Model同步進(jìn)行拖放排序的Vue組件,下面這篇文章主要給大家介紹了關(guān)于Vue.Draggable使用文檔的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
Vue中實(shí)現(xiàn)在線畫流程圖的方法
最近在調(diào)研一些在線文檔的實(shí)現(xiàn),包括文檔編輯器、在線思維導(dǎo)圖、在線流程圖等,本文分享在Vue框架下基于metaeditor-mxgraph實(shí)現(xiàn)在線流程圖,感興趣的朋友一起看看吧
2024-07-07
vue-cli+webpack項(xiàng)目修改項(xiàng)目名稱的方法
下面小編就為大家分享一篇vue-cli+webpack項(xiàng)目修改項(xiàng)目名稱的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue 表單控件綁定的實(shí)現(xiàn)示例
本篇文章主要介紹了Vue 表單控件綁定的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08