简单实用的Vue移动端侧滑菜单(删除、编辑、详情等等)vue.js,javascript,htmlqq42925191的博客-

添加链接描述
上面github地址喜欢就给我点个星星吧~~

 cnpm install vue-fkl-sideslip // 或者npm 

// 引入 import vueSideslip from 'vue-fkl-sideslip' import 'vue-fkl-sideslip/lib/vue-fkl-sideslip.css'  Vue.use(vueSideslip); 

// 调用 <vue-sideslip @click="call" v-for="(item, index) in arr" :operationList="item.operationList" :name="index" :key="index"> <p>标题</p> </vue-sideslip> 

//  这是demo   可自己随意定制自己想要的样式   data () { return {         arr: [ {             title: '标题1',             operationList: [ // 侧滑菜单列表   {                 name: '删除', //                  style: 'background: #f44336;color: #ffffff;line-height: 100px;width: 50px;text-align: center;', // 自定义样式                 click: 'del', // 点击事件回调                 disabledStyle: 'opacity:0.5;', // 按钮禁用样式                 html: (item) => { // 这里可自由添加侧滑结构内容 return `<div>${item.name}</div>` }, },{                 name: '编辑',                 style: 'background: #42b983;color: #ffffff;line-height: 100px;width: 50px;text-align: center;',                 click: 'set',                 html: (item) => { return `<div>${item.name}</div>` } } ] },{             title: '标题2',             operationList: [ {                 name: '删除',                 style: 'background: #f44336;color: #ffffff;line-height: 100px;width: 50px;text-align: center;',                 click: 'del',                 html: (item) => { return `<div>${item.name}</div>` }, } ] },{             title: '标题3',             operationList: [ {                 name: '删除',                 style: 'background: #f44336;color: #ffffff;line-height: 100px;width: 50px;text-align: center;',                 click: 'del',                 html: (item) => { return `<div>${item.name}</div>` }, },{                 name: '编辑',                 style: 'background: #42b983;color: #ffffff;line-height: 100px;width: 50px;text-align: center;',                 click: 'set',                 html: (item) => { return `<div>${item.name}</div>` } },{                 name: '详情',                 style: 'background: #42b943;color: #ffffff;line-height: 100px;width: 50px;text-align: center;',                 click: 'detail',                 disabledStyle: 'opacity:0.5;',                 html: (item) => { return `<div>${item.name}</div>` } } ] } ] } }, 

methods: { call (val, index) {       console.log(val, index); }, }