Question

import { Slidbtn } from 'feui';
components: {
  [Slidbtn.name]: Slidbtn,
},
data() {
  return {
  };
}
methods: {
  
}

代码演示

正经用法

<fe-slidbtn :right-width="65" :left-width="65" @on-click-left='clickLeft'
  @on-click-right='clickRight' >
  <span slot="left" >选择</span>
  <fe-group>
    <fe-cell title="单元格1" value="单元格1内容"></fe-cell>
  </fe-group>
  <span slot="right" >删除</span>
</fe-slidbtn>

自定义按钮颜色

<fe-slidbtn :right-width="65" :left-width="65" :bg-color="['green','red']"
  @on-click-left='clickLeft' @on-click-right='clickRight'>
  <span slot="left" >选择</span>
  <fe-group>
    <fe-cell title="单元格1" value="单元格1内容"></fe-cell>
  </fe-group>
  <span slot="right" >删除</span>
</fe-slidbtn>

只能左滑

<fe-slidbtn :right-width="65" @on-click-left='clickLeft' @on-click-right='clickRight' >
  <fe-group>
    <fe-cell title="单元格1" value="单元格1内容"></fe-cell>
  </fe-group>
  <span slot="right" >删除</span>
</fe-slidbtn>

只能右滑

<fe-slidbtn :left-width="65" @on-click-left='clickLeft' @on-click-right='clickRight' >
  <span slot="left" >选择</span>
  <fe-group>
    <fe-cell title="单元格1" value="单元格1内容"></fe-cell>
  </fe-group>
</fe-slidbtn>

API

参数	说明	类型	默认值	可选值
left-width	左侧按钮宽度	Number	-	-
right-width	右侧按钮宽度	Number	false	true,false
bg-color	按钮的背景颜色	Array,Object	['#4a90e2','#FF4444']	-
-	-	-	-	-

Slots

Slot名	说明	备注
right	右侧内容 slot	-
left	左侧内容 slot	-
-	-	-

Events

事件名	参数	说明	备注
on-click-left	-	点击左侧按钮时触发	-
on-click-right	-	点击右侧按钮时触发	-
-	-	-	-