Vue+Mint UI 做出手機端滑動刪除-js教程-PHP中文網

首頁

web前端

js教程

Vue+Mint UI 做出手機端滑動刪除

php中世界最好的语言

Jun 04, 2018 pm 03:02 PM

刪除滑動

這次帶給大家Vue Mint UI 做出手機端滑動刪除，Vue Mint UI做出手機端滑動刪除的注意事項有哪些，以下就是實戰案例，一起來看一下。

關於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如下：

#程式碼範例：

<ul class="list"> 
 <li class="item" v-for="section in sectionList"> 
  <mt-cell-swipe 
   :right="[ 
    { 
     content: &#39;删除&#39;, 
     style: { background: &#39;#ff7900&#39;, color: &#39;#fff&#39;}, 
     handler: () => deleteSection(section.PartId) 
    } 
   ]"> 
   <p class="section">{{section.PartName}}</p> 
   <p class="teacher">{{section.TeacherName}}</p> 
  </mt-cell-swipe> 
 </li> 
</ul>

:right可以定義不只一個按鈕，也可以自行修改CellSwipe的預設樣式

效果顯示：

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

8647

Java教學

1790

CakePHP 教程

1733

Laravel 教程

1583

PHP教程

1453

Related knowledge

inetpub資料夾可以刪除嗎？快速刪除C盤inetpub資料夾的方法 Mar 13, 2024 pm 02:00 PM

　　電腦C盤發現有個inetpub資料夾佔用極大的內存，這個inetpub是什麼資料夾？可以直接刪除嗎？其實inetpub是IIS服務端的一個資料夾，IIS全名為InternetInformationServices，也就網路資訊服務，是可以搭建網站、調試網站用的，如果不需要的話，可以將其卸載掉。　　具體方法如下：　　1、右鍵點選開始選單，選擇「程式與功能」。　　2、開啟後點選「啟用或關閉Windows功能」。　　3、在Windows功能清單中，取消勾選II

小紅書筆記怎麼刪除 Mar 21, 2024 pm 08:12 PM

小紅書筆記怎麼刪除?在小紅書APP中是可以編輯筆記的，多數的用戶不知道小紅書筆記如何的刪除，接下來就是小編為用戶帶來的小紅書筆記刪除方法圖文教程，有興趣的用戶快來一起看看吧！小紅書使用教學小紅書筆記怎麼刪除1、先打開小紅書APP進入到主頁面，選擇右下角【我】進入到專區;2、之後在我的專區，點擊下圖所示的筆記頁面，選擇要刪除的筆記;3、進入到筆記頁面，右上角【三個點】;4、最後下方會展開功能欄，點選【刪除】即可完成。

微信拉黑再刪除永久加不上是真的嗎 Apr 08, 2024 am 11:41 AM

1.首先，拉黑再刪除永久加不上是假的，拉黑刪除後想要再加對方，只要對方同意即可。 2.如果用戶將某人封鎖，對方將無法向用戶發送訊息、查看用戶的朋友圈、與用戶通話。 3.封鎖並不意味著將對方從用戶的微信聯絡人清單中刪除。 4.如果用戶在封鎖後又將對方從用戶的微信聯絡人清單中刪除，那麼在刪除後是沒有辦法恢復的。 5.如果用戶想再加入對方為好友，需要對方同意並重新新增使用者。

小紅書把別人評論刪了怎麼找回來？把別人留言刪了會有顯示嗎？ Mar 21, 2024 pm 10:46 PM

小紅書作為一款熱門的社群電商平台，用戶之間的互動評論是平台中不可或缺的溝通方式。有時候，我們可能會發現自己的評論被其他人刪除，這種情況可能會讓我們感到困惑。一、小紅書把別人評論刪了怎麼找回來？當發現自己的評論被刪除時，首先可以嘗試在平台上直接搜尋相關的貼文或商品，查看是否還能找到該評論。如果評論被刪除後仍然顯示，那麼可能是被原帖主刪除的，這時候可以嘗試聯絡原帖主，詢問其刪除評論的原因，並要求恢復評論。如果評論已經被完全刪除且無法在原始貼文上找到，那麼在平台上恢復評論的機會相對較小。可以嘗試使用其他途徑

小紅書發怎麼刪除？發布刪除怎麼恢復？ Mar 21, 2024 pm 05:10 PM

小紅書作為一個受歡迎的社群電商平台，吸引了大量用戶分享生活點滴和購物心得。有時候我們可能會不經意發布一些不合適的內容，這時候需要及時刪除，這樣可以更好地維護個人形像或遵守平台規定。一、小紅書發布怎麼刪除？ 1.登入小紅書帳號，進入個人首頁。 2.在個人主頁下方，找到「我的創作」選項，點選進入。 3.在「我的創作」頁面，你可以看到所有發布的內容，包括筆記、影片等。 4.找到需要刪除的內容，點選右側的「...」按鈕。 5.在彈出的選單中，選擇“刪除”選項。 6.確認刪除後，該條內容將從你的個人主頁和公開頁面消失

found.000是什麼資料夾？ found.000資料夾可以刪除嗎？ Mar 13, 2024 pm 08:52 PM

　　日常使用電腦的過程中，可能會收到found.000檔案遺失損壞的錯誤提示，這個found.000是什麼資料夾？如果沒有用的話，可以刪除嗎？既然有這麼多人不認識這個文件，下面小編就來跟大家仔細說說found.000文件夾吧~　　一、found.000是什麼文件夾當電腦出現因非法關機導致的文件部分或全部丟失時，可以在位於系統分割區中指定目錄下找到名為「found.000」的特殊資料夾及其內部所包含的以「.chk」為副檔名的檔案。　　這個「fo

如何發布小紅書內容？發布小紅書內容怎麼刪除？ Mar 21, 2024 pm 04:10 PM

隨著社群媒體的不斷發展，小紅書成為了年輕人分享生活、發現潮流、獲取靈感的重要平台。在這個充滿活力的社群裡，如何發布高品質的內容，吸引更多的關注和點贊，成為了許多用戶關心的問題。一、如何發布小紅書內容？在創作之前，選擇一個合適的主題至關重要。你可以根據自己的興趣和專長來挑選一個吸引人的主題。這樣做不僅能讓你在寫作過程中保持熱情，還能讓讀者更容易與你的作品產生共鳴。 2.精心設計標題：標題是吸引讀者點擊的關鍵，應該簡潔明了，同時要具有一定的吸引力和引人入勝的特點。避免使用誇張的措辭，以免讀者產生反

微信朋友圈怎麼刪除 Apr 08, 2024 pm 03:25 PM

1.打開微信app，點選右下角的【我】，找到並點選【朋友圈】選項。 2.點選右上角的【我的朋友圈】，在我的朋友圈介面找到想要刪除的朋友圈內容。 3.點選進入這條朋友圈的詳情頁，點選該條內容發佈時間右側的【小垃圾桶】圖示。 4.在彈出的視窗中選擇【確定】即可，這樣就完成了刪除朋友圈內容的操作。

See all articles

Vue+Mint UI 做出手機端滑動刪除

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題