更新记录
2.2.2(2024-06-21)
更新说明
2.2.1(2024-06-12)
更新文档
2.0.1(2024-06-12)
更新文档
查看更多
平台兼容性
HbuilderX/cli最低兼容版本 |
3.1.0 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
zf-leftOperation-box
如果该插件对您有帮助,麻烦收藏评价鼓励一下作者
props参数说明
名称 |
类型 |
示例 |
描述 |
styles |
Object |
styles = {borderRadius: '0rpx',boxShadow: '0 0 4rpx #ccc',marginTop: '2rpx',} |
zf-left-item的自定义样式 |
list |
Array |
[{id: 1,title: '学习java'}] |
列表数据 |
option |
Array |
[{text: '删除',bg: '#F56C6C',type: 'del'},{text: '修改',bg: '#409EFF',type: 'edit'}] |
按钮配置 |
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>