欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2018年04月27日 09:36:40   作者：小白菜的博客  
這篇文章主要介紹了Vue 使用 Mint UI 實現(xiàn)左滑刪除效果CellSwipe,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

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

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

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

效果展示：

 

總結(jié)

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

相關(guān)文章

  • 解決router.beforeEach()動態(tài)加載路由出現(xiàn)死循環(huán)問題

    解決router.beforeEach()動態(tài)加載路由出現(xiàn)死循環(huán)問題

    這篇文章主要介紹了解決router.beforeEach()動態(tài)加載路由出現(xiàn)死循環(huán)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • vue中實現(xiàn)回車鍵登錄功能

    vue中實現(xiàn)回車鍵登錄功能

    這篇文章主要介紹了vue中實現(xiàn)回車鍵登錄功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-02-02
  • 老生常談Vue中的偵聽器watch

    老生常談Vue中的偵聽器watch

    開發(fā)中我們在data返回的對象中定義了數(shù)據(jù)，這個數(shù)據(jù)通過插值語法等方式綁定到template中，這篇文章主要介紹了Vue中的偵聽器watch,需要的朋友可以參考下
    2022-10-10
  • Element-UI中<el-cascader?/>回顯失敗問題的完美解決

    Element-UI中<el-cascader?/>回顯失敗問題的完美解決

    我們在使用el-cascader控件往數(shù)據(jù)庫保存的都是最后一級的數(shù)據(jù),那如果再次編輯此條數(shù)據(jù)時,直接給el-cascader傳入最后一級的數(shù)據(jù),它是不會自動勾選的,下面這篇文章主要給大家介紹了關(guān)于Element-UI中<el-cascader?/>回顯失敗問題的完美解決辦法,需要的朋友可以參考下
    2023-01-01
  • vue定時器清除不掉,導致功能頻繁執(zhí)行問題

    vue定時器清除不掉,導致功能頻繁執(zhí)行問題

    這篇文章主要介紹了vue定時器清除不掉,導致功能頻繁執(zhí)行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-06-06
  • vuex數(shù)據(jù)持久化的兩種實現(xiàn)方案

    vuex數(shù)據(jù)持久化的兩種實現(xiàn)方案

    在vuex的時候刷新以后里面存儲的state就會被瀏覽器釋放掉,因為我們的state都是存儲在內(nèi)存中的,所以一刷新頁面就會把state中的數(shù)據(jù)重置,這就涉及到vue數(shù)據(jù)持久化的問題,這篇文章主要給大家介紹了關(guān)于vuex數(shù)據(jù)持久化的兩種實現(xiàn)方案,需要的朋友可以參考下
    2021-07-07
  • vue動態(tài)綁定多個類名方法詳解(:class動態(tài)綁定多個類名)

    vue動態(tài)綁定多個類名方法詳解(:class動態(tài)綁定多個類名)

    vue中可以通過:class=""這樣來根據(jù)一定的條件來動態(tài)添加class,但是有時候需要判斷的條件比較多,需要動態(tài)添加的class也比較多,下面這篇文章主要給大家介紹了關(guān)于vue動態(tài)綁定多個類名(:class動態(tài)綁定多個類名)的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • VeeValidate在vue項目里表單校驗應用案例

    VeeValidate在vue項目里表單校驗應用案例

    這篇文章主要介紹了VeeValidate在vue項目里表單校驗應用案例，VeeValidate是Vue.js的驗證庫，它有很多驗證規(guī)則，并支持自定義規(guī)則，非常具有實用價值，需要的朋友可以參考下
    2018-05-05
  • 對VUE中的對象添加屬性

    對VUE中的對象添加屬性

    今天小編就為大家分享一篇對VUE中的對象添加屬性，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue開發(fā)樹形結(jié)構(gòu)組件(組件遞歸)

    vue開發(fā)樹形結(jié)構(gòu)組件(組件遞歸)

    這篇文章主要為大家詳細介紹了vue開發(fā)樹形結(jié)構(gòu)組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-08-08

最新評論