mt-cell-swipe的使用

mint ui 文档

安装

npm i mint-ui -S

使用

采用按需引入：

import { CellSwipe } from 'mint-ui';

Vue.component(CellSwipe.name, CellSwipe);

示例1：content 使用纯文本方式（官网示例）

增加右滑动按钮

<mt-cell-swipe
  title="标题文字"
  :right="[
    {
      content: 'Delete',
      style: { background: 'red', color: '#fff' },
      handler: () => this.$messagebox('delete')
    }
  ]"></mt-cell-swipe>

content 可以是 HTML 或者纯文本。

示例2：content 使用HTML方式（开发中使用）

<template>
	<mt-cell-swipe
	is-link
	title="标题"
	label="显示在标题下面的内容"
	:right="[{content: 
	         `<div >
	             <img src=${btnImg.src}>
	             <div style='font-size: 12px;'>${btnImg.name}</div>
	           </div>
	         `,
	         style: {background: '#E3E1EC', color: '#797979'},
	         handler:()=>clickBtn(item)
	       }]">
	  <span style="color:'#26A2FF'">详情</span>
	</mt-cell-swipe>
</template>

<script>
//引入图标
import Service from '@/assets/images/service.png'
export default {
  data() {
    return {
      btnImg:{
        src:Service,
        name:"维修表单"
      }
      .....
    }
  },
  methods:{
  	clickBtn(){
  		console.log(arguments[0],'传入的数据')
  	}
  }
}
</script>    

content 使用HTML方式显示