更新记录

2.2.2（2024-06-21）

更新说明

2.2.1（2024-06-12）

更新文档

2.0.1（2024-06-12）

更新文档

平台兼容性

zf-leftOperation-box

如果该插件对您有帮助，麻烦收藏评价鼓励一下作者

props参数说明

list列表中参数说明option、isOption分别用来定义该行的操作按钮和是否可以操作该行

list = [
    {
        id: 1,
        isOption:true,
        title: '学习java阿古朵华府国际申达股份几哈搜嘎放大机挥洒的刚发学习java阿古朵华府国际申达股份几哈搜嘎放大机挥洒的刚发学习java阿古朵华府国际申达股份几哈搜嘎放大机挥洒的刚发'
    },
    {id: 2,title: '学习html',isOption:true,},
    {id: 3,title: '学习php',isOption:false,},
    //option:自定义这行的操作按钮，没有按钮值就是默认props中的option
    //isOption是否可以操作，true可以操作，false 不可以操作，不填默认可以操作
    {id: 4,title: '学习js',option:[
        {text: '删除',bg: '#F56C6C',type: 'del'}
    ],isOption:false},
]

使用示例

<template>
    <view>
        <zf-leftOperation-box :styles='styles' ref='moveRef' :option='option' :list="list" @callBack="callBack">
            <template #left="{item}">
                <view style="width: 100%;display: flex;align-items: center;padding:20rpx 0;">
                    {{item.title}}
                </view>
            </template>
        </zf-leftOperation-box>
        <button @click="clears">清除全部</button>
    </view>
</template>

<script setup>
    import {ref} from'vue'
    // 列表
    const list = ref([{
            id: 1,
            isOption:true,
            title: '学习java阿古朵华府国际申达股份几哈搜嘎放大机挥洒的刚发学习java阿古朵华府国际申达股份几哈搜嘎放大机挥洒的刚发学习java阿古朵华府国际申达股份几哈搜嘎放大机挥洒的刚发'
        },
        {id: 2,title: '学习html',isOption:true,},
        {id: 3,title: '学习php',isOption:false},
        //option:自定义这行的操作按钮，没有按钮值就是默认props中的option
        //isOption是否可以操作，true可以操作，false 不可以操作，不填默认可以操作
        {id: 4,title: '学习js',option:[
            {text: '删除',bg: '#F56C6C',type: 'del'}
        ]},
    ])
    // 自定义zf-leftOperation-box中zf-left-item盒子的样式
    const styles = {
        borderRadius: '0rpx',//圆角
        boxShadow: '0 0 4rpx #ccc',//阴影
        marginTop: '2rpx',//外边距
    }
    // 可以不用传递这个参数，默认就是这个值
    const option = [
        {text: '删除',bg: '#F56C6C',type: 'del'},
        {text:'修改',bg:'#409EFF',type:'edit'},
    ]
    const moveRef = ref(null)
    const callBack = (e)=>{
        // 获取渲染的list并做相应的操作
        if(e.type=="del"){
            uni.showToast({
                title:'删除成功',
                icon:'none'
            })
            moveRef.value.list = moveRef.value.list.filter(item=>item.id!=e.id)
        }else{
            uni.showToast({
                title:'修改成功',
                icon:'none'
            })
            moveRef.value.creatInit()
        }

    }
    const clears = ()=>{
        moveRef.value.clearArr()
    }
</script>