• CuteDeptTree 部门树
• CuteFileUpload 文件上传
• CuteFileDragUpload 文件拖放上传
• CuteSingleUserSelect 用户单选框
• CuteUserSelect 用户多选框
• CuteProductLineSelect 产品线选择框
• CuteProductLineSelectPro 部产品线级联选择框

CuteDeptTree 部门树

预览

API属性

参数	说明	类型	默认值	是否必填
node-click	当树节点被点击时的回调	Function		否

使用方式

<cute-dept-tree @node-click="handleNodeClick"/>

function handleNodeClick(data) {
    console.log('节点数据', data);
}

CuteFileUpload 文件上传

上传文件到OSS, 必须结合Minio使用（上传完成后必须销毁组件）

预览

API属性

参数	说明	类型	默认值	是否必填
mode	上传方式。local 上传到服务器。oss 上传到对象存储。	String	oss	否
on-success	当文件上传成功时回调	Function		否
on-error	当文件上传失败时回调	Function		否

使用方式

<cute-file-upload @on-success="handleSuccess" @on-error="handleError"/>

function handleSuccess(fileUrl, file, fileList) {
    console.log('上传成功', fileUrl, file, fileList);
}

function handleSuccess(e, file, fileList) {
    console.log('上传失败', e, file, fileList);
}

CuteFileDragUpload 文件拖放上传

上传文件到OSS, 必须结合Minio使用（上传完成后必须销毁组件）

预览

API属性

参数	说明	类型	默认值	是否必填
mode	上传方式。local 上传到服务器。oss 上传到对象存储。	String	oss	否
on-success	当文件上传成功时回调	Function		否
on-error	当文件上传失败时回调	Function		否

使用方式

<cute-file-drag-upload @on-success="handleSuccess" @on-error="handleError"/>

function handleSuccess(fileUrl, file, fileList) {
    console.log('上传成功', fileUrl, file, fileList);
}

function handleSuccess(e, file, fileList) {
    console.log('上传失败', e, file, fileList);
}

CuteSingleUserSelect 用户单选框

预览

API属性

参数	说明	类型	默认值	是否必填
value	绑定值	String	''	是
change	当选中用户时	Function		否

使用方式

<cute-single-user-select v-modle="value" @change="handleChange"/>

function handleChange(val) {
    console.log(val);
}

CuteUserSelect 用户多选框

预览

API属性

参数	说明	类型	默认值	是否必填
value	绑定值	Arrays	[]	是
change	当选中用户时	Function		否

使用方式

<cute-user-select v-modle="value" @change="handleChange"/>

function handleChange(val) {
    console.log('handleChange', val);
}

CuteProductLineSelect 产品线选择框

预览

API属性

参数	说明	类型	默认值	是否必填
value	绑定值	String		是
disabled	是否禁用	Boolean	false	否
change	当选中产品线时	Function		否
detail	当选中产品线时	Function		否

使用方式

<cute-product-line-select @change="handleChange" @detail="handleDetailChange"/>

function handleChange(data) {
    console.log('handleChange', data)
}

function handleDetailChange(data) {
    console.log('handleDetailChange', data)
}

CuteProductLineSelectPro 部产品线级联选择框

预览

API属性

参数	说明	类型	默认值	是否必填
value	绑定值	String		是
disabled	是否禁用	Boolean	false	否
change	当选中产品线时	Function		否
detail	当选中产品线时	Function		否

使用方式

<cute-product-line-select-pro @change="handleChange" @detail="handleDetailChange"/>

function handleChange(data) {
    console.log('handleChange', data)
}

function handleDetailChange(data) {
    console.log('handleDetailChange', data)
}