LeftSlip 左滑删除

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

基本用法

<div>
    <nut-leftslip ref='demo1'>
        <div slot="slip-main" class="slip-main">向左滑动我</div>
        <div slot="slipbtns" class="slipbtns"><a href="javascript:;" @click="delSlipItem">删除</a><a href="javascript:;" class="favorite">收藏</a></div>
    </nut-leftslip>
    <nut-button @click="changeState">{ { state ? '异步关闭' : '异步打开' }}</nut-button>
</div>

export default {
    data(){
        return {
            state:false
        };
    },
    methods: {
        delSlipItem(e) {
            this.$refs.demo1.sliderEle.remove();
        },
        changeState() {
            if (this.state) {
                this.$refs.demo1.restSlide();
            } else {
                this.$refs.demo1.openSlide();
            }
            this.state = !this.state;
        }
    }
};

单个按钮

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

多个按钮

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

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

列表

<div>
    <nut-leftslip v-for="(item, index) in list" :key="item.id" ref="leftslip">
        <div slot="slip-main" class="slip-main">
            <div class="addr">
                <p class="name-mobile">159****8888</p>
                <p class="full-addr">北京市大兴区亦庄经济开发中心京东大厦B座1</p>
            </div>
            <a class="addr-edit" href="javascript:void(0)"></a>
        </div>
        <div slot="slipbtns" class="slipbtns"
            ><a href="javascript:;" @click="delItem(index)">删除</a><a href="javascript:;" class="favorite">收藏</a></div
        >
    </nut-leftslip>
</div>

export default {
    components: {},
    data() {
        return {
            list: [
                {id: 'add1', addr: '北京市大兴区亦庄经济开发中心京东大厦B座1', tel: '159****8888'},
                {id: 'add2', addr: '北京市大兴区亦庄经济开发中心京东大厦B座2', tel: '159****8888'},
                {id: 'add3', addr: '北京市大兴区亦庄经济开发中心京东大厦B座3', tel: '159****8888'},
                {id: 'add4', addr: '北京市大兴区亦庄经济开发中心京东大厦B座4', tel: '159****8888'},
                {id: 'add5', addr: '北京市大兴区亦庄经济开发中心京东大厦B座5', tel: '159****8888'},
                {id: 'add6', addr: '北京市大兴区亦庄经济开发中心京东大厦B座6', tel: '159****8888'},
                {id: 'add7', addr: '北京市大兴区亦庄经济开发中心京东大厦B座7', tel: '159****8888'},
                {id: 'add8', addr: '北京市大兴区亦庄经济开发中心京东大厦B座8', tel: '159****8888'}
            ]
        };
    },
    methods: {
        delItem(index) {
            this.list.splice(index, 1);
        }
    }
};

禁止滑动

<div>
    <button class="btn" @click="disabledHandle">禁止滑动</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

Prop

Methods

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