Vue+Mint UI가 휴대폰에서 슬라이딩 삭제 기능을 제공합니다.

이번에는 휴대폰에서 슬라이딩 삭제를 할 수 있는 Vue+Mint UI를 가져왔습니다. Vue+Mint UI를 사용하여 휴대폰에서 슬라이딩 삭제를 할 때의 주의사항은 다음과 같습니다. 봐.

민트 UI에 관해서는 문서가 정확하지 않고 상세하지 않고, 구성 요소가 약간 거칠고, 기능이 완벽하지 않은 등의 문제가 있으며, 구성 요소가 많고 크기가 작다는 장점도 있습니다.

InstallationMint 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를 추출합니다. 슬롯은 다음과 같습니다.

코드 예:

<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 중국어 웹사이트!

추천 자료:

mockjs로 임의의 데이터를 생성하는 방법

vue에서 게시물 요청 사용(코드 포함)

위 내용은 Vue+Mint UI가 휴대폰에서 슬라이딩 삭제 기능을 제공합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!