中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue 使用 Mint UI 實現左滑刪除效果CellSwipe

發布時間:2020-08-19 16:02:06 來源:腳本之家 閱讀:159 作者:小白菜的博客 欄目:web開發

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如下:

Vue 使用 Mint UI 實現左滑刪除效果CellSwipe

代碼示例:

<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的默認樣式

效果展示:

Vue 使用 Mint UI 實現左滑刪除效果CellSwipe 

總結

以上所述是小編給大家介紹的Vue 使用 Mint UI 實現左滑刪除效果CellSwipe,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

西畴县| 榆中县| 当阳市| 阜平县| 文成县| 山阴县| 景谷| 黄石市| 舒兰市| 家居| 新田县| 连江县| 色达县| 新绛县| 湘潭市| 延长县| 如东县| 惠来县| 都江堰市| 广灵县| 茂名市| 盈江县| 汾阳市| 漾濞| 政和县| 万源市| 宜良县| 理塘县| 北海市| 平果县| 莆田市| 珲春市| 鄂州市| 勃利县| 西城区| 木里| 绵竹市| 封开县| 五家渠市| 玉门市| 温州市|