nutui/src/packages/leftslip/doc.md

LeftSlip 左滑删除

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

基本用法

<div>
    <nut-leftslip ref="demo1">
        <div slot="slip-main" class="slip-main base-style">左滑触发删除<span class="main-right">这里是内容</span></div>
        <div slot="slipbtns" class="slipbtns"
          ><a href="javascript:;" @click="delSlipItem">删除</a></div
        >
    </nut-leftslip>
</div>

export default {
    methods: {
        delSlipItem(e) {
            alert('确定删除吗？')
            this.$refs.demo1.sliderEle.remove()
        }
    }
};

多个按钮

如果超出一行宽度，默认右侧按钮区域占一行的80%

<div>
    <nut-leftslip :rightWidth="0.8">
        <div slot="slip-main" class="slip-main">左滑触发删除<span class="main-right">这里是内容</span></div>
        <div slot="slipbtns" class="slipbtns"
            ><a href="javascript:;">删除</a>
            <a href="javascript:;" class="favorite org3">确认</a>
            <a href="javascript:;" class="favorite">收藏</a>
        </div>
    </nut-leftslip>
</div>

自定义ICON

<div>
    <nut-leftslip>
        <div slot="slip-main" class="slip-main">左滑触发删除<span class="main-right">这里是内容</span></div>
        <div slot="slipbtns" class="slipbtns">
            <a href="javascript:;"><nut-icon type="trolley" size="20px" color="#fff"></nut-icon></a>
        </div>
    </nut-leftslip>
</div>

消息列表

<div class="cell-box">
    <nut-leftslip v-for="(item, index) in list" :key="item.id" ref="leftslip">
        <div slot="slip-main" class="slip-main">
          <nut-cell class="cell-item" :title="item.title" :sub-title="item.subTitle">
            <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
            <div slot="desc">
              <p class="timer">{{item.time}}</p>
              <p class="badge"><nut-badge :is-dot="item.isDot" :value="item.value" :max="99" top="0px" right="15px"></nut-badge></p>
            </div>
          </nut-cell>
        </div>
        <div slot="slipbtns" class="slipbtns"
          ><a href="javascript:;" @click="delItem(index)">删除</a>
        </div>
    </nut-leftslip>
</div>

import Icon from '../icon/icon.vue';
import Avatar from '../avatar/avatar.vue';
import Badge from '../badge/badge.vue'

export default {
    components: {},
    data() {
        return {
            list: [
                { id: 'add1', title: '噜啦噜1',subTitle:'我又来送福利啦！关注之后你就会',time:'10:13',isDot:false,value:9},
                { id: 'add2', title: '噜啦噜2',subTitle:'我又来送福利啦！关注之后你就会',time:'10:12',isDot:true,value:1},
                { id: 'add5', title: '噜啦噜5',subTitle:'我又来送福利啦！关注之后你就会',time:'1小时前',isDot:false,value:99},
                { id: 'add8', title: '噜啦噜8',subTitle:'我又来送福利啦！关注之后你就会',time:'星期五' ,isDot:false,value:100}
            ],
        };
    },
    methods: {
        delItem(index) {
            this.list.splice(index, 1);
        }
    }
};

禁止滑动

<div>
    <button class="btn" @click="disabledHandle">{{isDisable ? '开启滑动' : '禁止滑动'}}</button>
    <nut-leftslip :disabled="isDisable">
        <div slot="slip-main" class="slip-main">左滑触发删除</div>
        <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>
    </nut-leftslip>
</div>

    disabledHandle(){
        this.isDisable = !this.isDisable 
    }

slot

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

Prop

字段	说明	类型	默认值
rightWidth	右侧按钮区域超出一行时的默认宽度，默认占整个宽度的80%	Number	0.8
disabled	禁止滑动操作	Boolean	false