mint-ui 左滑删除 + 传参
vue 2017-11-20 11:14:51

WX20180302-104002@2x.png

可以在leftButtonHandler加弹出层效果并且传参：

XML/HTML Code复制内容到剪贴板
  1. <mt-cell-swipe class="user-publish-item" v-for="(item, index) in publishList" :key="item.publishId" :right="[{content: delTemplate,handler: () =>  deletePublish(item.publishId)}]" >  

 

左侧出现的模板：

JavaScript Code复制内容到剪贴板
  1. data: function() {  
  2.         delTemplate:'<div class="delBtn"><i class="fa fa-trash-o" aria-hidden="true"></i></div>', //左侧删除的模板  

 

 

JS：

JavaScript Code复制内容到剪贴板
  1. methods: {  
  2.     deletePublish(val){  
  3.         //删除发布  
  4.         this.$messagebox.confirm('', {  
  5.                   message: '是否确定删除？',    
  6.                   confirmButtonText: '确定',    
  7.                   cancelButtonText: '取消'    
  8.              }).then(action => {    
  9.                     
  10.                   console.log(val);  
  11.                     
  12.                     
  13.               }).catch(err => {  
  14.                   //this.$toast('您已取消删除');    
  15.               })  
  16.     },  

 

DEMO1：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <mt-cell-swipe class="user-publish-item" v-for="(item, index) in publishList" v-show="!item.show" :key="item.publishId" :value="item.publishId" :right="[{content: delTemplate,handler: () =>  deletePublish(index,item.publishId)}]">  
  3.         {{item.title}}  
  4.     </mt-cell-swipe>  
  5. </template>  
  6.   
  7. <script>  
  8.     methods: {  
  9.         deletePublish(index, id) {  
  10.   
  11.             //删除  
  12.             this.$messagebox.confirm('', {  
  13.                 message: '是否确定删除？',  
  14.                 confirmButtonText: '确定',  
  15.                 cancelButtonText: '取消'  
  16.             }).then(action => {  
  17.   
  18.                 this.$indicator.open();  
  19.                 /* 第一种 */  
  20.                 this.publishList.splice(index, 1); //删除数组中一组  
  21.                 /* 第二种 */  
  22.                 this.$set(this.publishList[index], 'show', true);  
  23.                   
  24.             }).catch(err => {  
  25.                 this.$indicator.close(); //关闭loading    
  26.                 this.$toast("网络连接失败");  
  27.             })  
  28.         },  
  29.           
  30.     }  
  31. </script>  

 

 

 

 

文档上的demo：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   <div class="page-cell">  
  3.     <div class="page-title">Cell Swipe</div>  
  4.     <mt-cell-swipe  
  5.       v-for="n in 15"  
  6.       :right="rightButtons"  
  7.       title="swipe me">  
  8.     </mt-cell-swipe>  
  9.   </div>  
  10. </template>  
  11.   
  12. <script>  
  13.   export default {  
  14.     created() {  
  15.       this.rightButtons = [  
  16.         {  
  17.           content: 'Mark as Unread',  
  18.           style: { background: 'lightgray', color: '#fff' }  
  19.         },  
  20.         {  
  21.           content: 'Delete',  
  22.           style: { background: 'red', color: '#fff' },  
  23.           handler: () => this.leftButtonHandler  
  24.         }  
  25.       ];  
  26.     },  
  27.     methods: {  
  28.       leftButtonHandler(evt) {  
  29.         console.log(123);  
  30.       }  
  31.     }  
  32.   };  
  33. </script>  

 

 

API

option description type acceptable values default
icon cell icon String back, more  
title title of the cell String    
to link String    
value content of the cell *    
label a description shown underneath the title String    
is-link if the cell is a link, works with the to attribute Boolean    
left button group, { content, style, handler } Object[]    
right button group, { content, style, handler } Object[]    

Slot

name description
- custom content
title custom title
icon custom icon

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/216.html

上一篇 vue calender日历插件
下一篇 mint-ui Radio
相关的文章
Powered by yoyo苏ICP备15045725号