更新记录

1.0.0（2026-01-14） 下载此版本

可拖拽弹窗、图片裁剪、表格

平台兼容性

uni-app(4.87)

uni-app x(4.87)

shuai-ui-vue3

可拖拽弹窗、图片裁剪、通过数据渲染的表格

shuai-table

通过数据渲染的表格

props

• columns 说明

  1. fieldName 对应data中的键名
  2. headerName data中对应数据的表头
  3. align 文字对齐方式 可选值： center left right
  4. width 单元格的宽度
  5. fixed 单元格固定在左边还是右边 可选值 left right
  6. headerStyle 表头样式
  7. style 单元格样式

• formatterInfo 说明

  • formatterInfo 对象的键名对照columns中的 fieldName

    const formatterInfo = ref({
    info: (row, rowIndex) ={
    return `${row.sex}_${row.name}_${row.age}`
    }
    })

• cellStyle cellClass rowStyle rowClass 说明

  • 给行设置背景颜色 和字体颜色不会生效，应为单元格有自己的样式不会继承行的样式

 function cellStyleCall(rowIndex, cellIndex) {
    if (rowIndex == 1 && cellIndex == 1) {
        return {
            color: "red"
        }
    } else if (rowIndex == 0 && cellIndex == 1) {
        return {
            color: "blue"
        }
    }
}
function cellCalssCall(rowIndex, cellIndex){
    if (rowIndex == 1 && cellIndex == 1) {
        return 'warning'
    } else if (rowIndex == 0 && cellIndex == 1) {
        return "succeed"
    }
}
function rowClassCall(rowIndex) {
    if (rowIndex == 1) {
        return "error"
    }
}
function rowStyleCall(rowIndex) {
    if (rowIndex == 1) {
        return {}
    }
}

事件

• selectChange

  • funtion ({selection:[],row:{}}) =void
  • 当用户手动勾选数据行时触发的事件 ，
  • 全选单选多选都会触发 ，
  • selection 选中的数据，单选时返一个只有一个行数据的数组，
  • row 点击操作的行 row为undefined

• rowClick

  • funtion ({row:{},rowIndx:0}) =void
  • 点击行时触发的事件

• cellClick

  • funtion ({}:option) =void
  • 点击单元格时触发的事件
  • option.row 单元格所在行的行数据
  • option.rowIndex 单元格所在行的行索引
  • option.cellIndex 单元格所在单元格索引
  • option.fieldName 单元格所在对应data中的键名
  • option.value 单元格的值 通过插槽处理的 为undefined

暴露的方法

• checkSingle(rowIndex)
  • 指定行的选中与取消选中 状态的切换
• getCheckList()
  • 获取勾选的数据项

插槽

对应columns中的 fieldName

 <shuai-table radio :data="dataList" :columns="columns" @selectChange='tableSelect' @rowClick='rowClickFn'
    @cellClick='cellClickFn' :formatterInfo='formatterInfo'>
    <template #info2={row,rowIndex}>
        {{`${row.age}_${row.name}_${row.sex}`}}
    </template>
    <template #operation={row,rowIndex}>
        <button size="mini" @tap='edit(row,rowIndex)'>修改</button>
    </template>
</shuai-table>

 const columns = ref([
      {
        fieldName: 'info2',
        headerName: '详情2',
        width: "200",
    }, {
        fieldName: 'operation',
        headerName: '操作',
        align: "center",
        width: "200",
        fixed: "right",
        headerStyle:{}
    }
 ])

完整代码示例

<template>
    <view class="content">
        <shuai-table ref="tableRef"  selection :data="dataList" 
        :columns="columns" @selectChange='tableSelect' @rowClick='rowClickFn' 
        :cell-calss="cellCalssCall" :cell-style="cellStyleCall" 
        :row-style="rowStyleCall" :row-class="rowClassCall"
        @cellClick='cellClickFn' :formatterInfo='formatterInfo'>
            <template #info2={row,rowIndex}>
                {{`${row.age}_${row.name}_${row.sex}`}}
            </template>
            <template #operation={row,rowIndex}>
                <button size="mini">修改</button>
            </template>
        </shuai-table>

        <button size="mini" @tap="toggleSelection">选中第1条数据</button>
    </view>
</template>

<script setup>
    import {
        ref
    } from "vue"
    const tableRef= ref()
    const dataList = ref([{
        name: "张三",
        age: '18',
        sex: "男"
    }, {
        name: "李四",
        age: '18',
        sex: "男",
        disabled: true
    }])

    const columns = ref([{
        fieldName: 'name',
        headerName: '姓名',
        align: "center",
        width: "100",
        fixed: "left"
    }, {
        fieldName: 'age',
        headerName: '年龄',
        width: "100",
        align: "left",
        fixed: "right",
    }, {
        fieldName: 'sex',
        headerName: '性别',
        width: "100",
        align: "right",
        fixed: "left"
    }, {
        fieldName: 'info',
        headerName: '详情',
        width: "200",
    }, {
        fieldName: 'info2',
        headerName: '详情2',
        width: "200",
    }, {
        fieldName: 'operation',
        headerName: '操作',
        align: "center",
        width: "200",
        fixed: "right",
        headerStyle:{}
    }])
    const formatterInfo = ref({
        info: (row, rowIndex) ={
            return `${row.sex}_${row.name}_${row.age}`
        }
    })
    function cellStyleCall(rowIndex, cellIndex) {
        if (rowIndex == 1 && cellIndex == 1) {
            return {
                color: "red"
            }
        } else if (rowIndex == 0 && cellIndex == 1) {
            return {
                color: "blue"
            }
        }
    }
    function cellCalssCall(rowIndex, cellIndex){
        if (rowIndex == 1 && cellIndex == 1) {
            return 'warning'
        } else if (rowIndex == 0 && cellIndex == 1) {
            return "succeed"
        }
    }
    function rowClassCall(rowIndex) {
        if (rowIndex == 1) {
            return "error"
        }
    }
    function rowStyleCall(rowIndex) {
        if (rowIndex == 1) {
            return {

            }
        }
    }
    function tableSelect(rows) {
        console.log(rows)
    }

    function rowClickFn(e) {
        console.log(e)
    }

    function cellClickFn(e) {
        console.log(e)
    }

    function toggleSelection(){
        tableRef.value.checkSingle(0)
    }
</script>

shuai-image-cropping

通过cnvas实现的图片裁剪组件，支持移动图片位置，放大缩小图片

props

暴露的方法

• getImagePath({base64:"",tempFilePath:''})
  • base64:图片的base64资源
  • tempFilePath:图片的临时路径，h5环境下tempFilePath是base64

完整代码示例

<shuai-image-cropping style="border: #000000 1rpx solid;" :width="200" ref="imageCroppingRef"
    src="https://cdn.stocksnap.io/img-thumbs/960w/holiday-family_QOTBP88MTK.jpg"></shuai-image-cropping>
<button @tap="getImagePath">裁剪</button>

async function getImagePath() {
    let result = await imageCroppingRef.value.getImagePath()
    console.log(result)
    uni.previewImage({
        urls:[result.base64]
    })
}

shuai-drag-popup

可拖拽的弹出层

props

事件

• close()
  • 弹出层关闭时触发

暴露的方法

• open({x:0,y:0})
  • 打开弹出层 入参为弹出层中心点的坐标 不传参默认出现在屏幕中间
• close()
  • 关闭弹出层

完整代码

<button size="mini" @tap="openPopup">打开可拖拽弹出层</button>
<shuai-drag-popup ref="popupRef" width="300rpx">
    这是一个可拖拽的弹出层
</shuai-drag-popup>

const popupRef = ref()
function openPopup() {
    popupRef.value.open()
}