LeftSlip 左滑删除

列表元素向左滑出现删除等按钮

基本用法

  1. <div>
  2. <nut-leftslip ref='demo1'>
  3. <div slot="slip-main" class="slip-main">向左滑动我</div>
  4. <div slot="slipbtns" class="slipbtns"><a href="javascript:;" @click="delSlipItem">删除</a><a href="javascript:;" class="favorite">收藏</a></div>
  5. </nut-leftslip>
  6. <nut-button @click="changeState">{ { state ? '异步关闭' : '异步打开' }}</nut-button>
  7. </div>
  1. export default {
  2. data(){
  3. return {
  4. state:false
  5. };
  6. },
  7. methods: {
  8. delSlipItem(e) {
  9. this.$refs.demo1.sliderEle.remove();
  10. },
  11. changeState() {
  12. if (this.state) {
  13. this.$refs.demo1.restSlide();
  14. } else {
  15. this.$refs.demo1.openSlide();
  16. }
  17. this.state = !this.state;
  18. }
  19. }
  20. };

单个按钮

  1. <div>
  2. <nut-leftslip>
  3. <div slot="slip-main" class="slip-main">自定义单一按钮</div>
  4. <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
  5. </nut-leftslip>
  6. </div>

多个按钮

如果超出一行宽度,默认右侧按钮区域占一行的80%,此处设置了60%

  1. <div>
  2. <nut-leftslip :rightWidth="0.6">
  3. <div slot="slip-main" class="slip-main">向左滑动,多个按钮有超出限制哦~</div>
  4. <div slot="slipbtns" class="slipbtns"
  5. ><a href="javascript:;">删除</a>
  6. <a href="javascript:;" class="favorite">收藏</a>
  7. <a href="javascript:;" class="favorite org1"><nut-icon type="trolley" size="20px" color="#fff"></nut-icon></a>
  8. <a href="javascript:;" class="favorite org2"><nut-icon type="cross" size="15px" color="#fff"></nut-icon></a>
  9. <a href="javascript:;" class="favorite org3">确认</a>
  10. <a href="javascript:;" class="favorite org1">加购物车</a>
  11. <a href="javascript:;" class="favorite">收藏2</a>
  12. <a href="javascript:;" class="favorite">收藏3</a>
  13. </div>
  14. </nut-leftslip>
  15. </div>

列表

  1. <div>
  2. <nut-leftslip v-for="(item, index) in list" :key="item.id" ref="leftslip">
  3. <div slot="slip-main" class="slip-main">
  4. <div class="addr">
  5. <p class="name-mobile">159****8888</p>
  6. <p class="full-addr">北京市大兴区亦庄经济开发中心京东大厦B座1</p>
  7. </div>
  8. <a class="addr-edit" href="javascript:void(0)"></a>
  9. </div>
  10. <div slot="slipbtns" class="slipbtns"
  11. ><a href="javascript:;" @click="delItem(index)">删除</a><a href="javascript:;" class="favorite">收藏</a></div
  12. >
  13. </nut-leftslip>
  14. </div>
  1. export default {
  2. components: {},
  3. data() {
  4. return {
  5. list: [
  6. {id: 'add1', addr: '北京市大兴区亦庄经济开发中心京东大厦B座1', tel: '159****8888'},
  7. {id: 'add2', addr: '北京市大兴区亦庄经济开发中心京东大厦B座2', tel: '159****8888'},
  8. {id: 'add3', addr: '北京市大兴区亦庄经济开发中心京东大厦B座3', tel: '159****8888'},
  9. {id: 'add4', addr: '北京市大兴区亦庄经济开发中心京东大厦B座4', tel: '159****8888'},
  10. {id: 'add5', addr: '北京市大兴区亦庄经济开发中心京东大厦B座5', tel: '159****8888'},
  11. {id: 'add6', addr: '北京市大兴区亦庄经济开发中心京东大厦B座6', tel: '159****8888'},
  12. {id: 'add7', addr: '北京市大兴区亦庄经济开发中心京东大厦B座7', tel: '159****8888'},
  13. {id: 'add8', addr: '北京市大兴区亦庄经济开发中心京东大厦B座8', tel: '159****8888'}
  14. ]
  15. };
  16. },
  17. methods: {
  18. delItem(index) {
  19. this.list.splice(index, 1);
  20. }
  21. }
  22. };

禁止滑动

  1. <div>
  2. <button class="btn" @click="disabledHandle">禁止滑动</button>
  3. <nut-leftslip :disabled="isDisable">
  4. <div slot="slip-main" class="slip-main">左滑触发删除</div>
  5. <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
  6. </nut-leftslip>
  7. </div>
  1. disabledHandle(){
  2. this.isDisable = !this.isDisable
  3. }

slot

字段说明类型默认值
slip-main列表主内容自定义区域html-
slipbtns左滑按钮自定义区域html-

Prop

字段说明类型默认值
right-width右侧按钮区域超出一行时的默认宽度,默认占整个宽度的80%Number0.8
disabled禁止滑动操作Booleanfalse

Methods

通过 ref 可以获取到 LeftSlip 组件实例并调用实例方法

方法名说明参数返回值
restSlide关闭单元格侧边栏--
openSlide打开单元格侧边栏--

LeftSlip 左滑删除 - 图1