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 是餓了么開(kāi)源的，基于 Vue.js 的移動(dòng)端組件庫(kù)。
關(guān)于Mint UI，有文檔不夠準(zhǔn)確詳盡，組件略顯粗糙，功能不夠完善等問(wè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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
解決router.beforeEach()動(dòng)態(tài)加載路由出現(xiàn)死循環(huán)問(wèn)題
這篇文章主要介紹了解決router.beforeEach()動(dòng)態(tài)加載路由出現(xiàn)死循環(huán)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue中實(shí)現(xiàn)回車鍵登錄功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
開(kāi)發(fā)中我們?cè)赿ata返回的對(duì)象中定義了數(shù)據(jù)，這個(gè)數(shù)據(jù)通過(guò)插值語(yǔ)法等方式綁定到template中，這篇文章主要介紹了Vue中的偵聽(tīng)器watch,需要的朋友可以參考下2022-10-10
Element-UI中<el-cascader?/>回顯失敗問(wèn)題的完美解決
我們?cè)谑褂胑l-cascader控件往數(shù)據(jù)庫(kù)保存的都是最后一級(jí)的數(shù)據(jù),那如果再次編輯此條數(shù)據(jù)時(shí),直接給el-cascader傳入最后一級(jí)的數(shù)據(jù),它是不會(huì)自動(dòng)勾選的,下面這篇文章主要給大家介紹了關(guān)于Element-UI中<el-cascader?/>回顯失敗問(wèn)題的完美解決辦法,需要的朋友可以參考下2023-01-01
vue定時(shí)器清除不掉,導(dǎo)致功能頻繁執(zhí)行問(wèn)題
這篇文章主要介紹了vue定時(shí)器清除不掉,導(dǎo)致功能頻繁執(zhí)行問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案
在vuex的時(shí)候刷新以后里面存儲(chǔ)的state就會(huì)被瀏覽器釋放掉,因?yàn)槲覀兊膕tate都是存儲(chǔ)在內(nèi)存中的,所以一刷新頁(yè)面就會(huì)把state中的數(shù)據(jù)重置,這就涉及到vue數(shù)據(jù)持久化的問(wèn)題,這篇文章主要給大家介紹了關(guān)于vuex數(shù)據(jù)持久化的兩種實(shí)現(xiàn)方案,需要的朋友可以參考下2021-07-07
vue動(dòng)態(tài)綁定多個(gè)類名方法詳解(:class動(dòng)態(tài)綁定多個(gè)類名)
vue中可以通過(guò):class=""這樣來(lái)根據(jù)一定的條件來(lái)動(dòng)態(tài)添加class,但是有時(shí)候需要判斷的條件比較多,需要?jiǎng)討B(tài)添加的class也比較多,下面這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)綁定多個(gè)類名(:class動(dòng)態(tài)綁定多個(gè)類名)的相關(guān)資料,需要的朋友可以參考下2022-11-11
VeeValidate在vue項(xiàng)目里表單校驗(yàn)應(yīng)用案例
這篇文章主要介紹了VeeValidate在vue項(xiàng)目里表單校驗(yàn)應(yīng)用案例，VeeValidate是Vue.js的驗(yàn)證庫(kù)，它有很多驗(yàn)證規(guī)則，并支持自定義規(guī)則，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-05-05
今天小編就為大家分享一篇對(duì)VUE中的對(duì)象添加屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue開(kāi)發(fā)樹(shù)形結(jié)構(gòu)組件(組件遞歸)
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)樹(shù)形結(jié)構(gòu)組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08