新版业务组件

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

# CuteDeptTree 部门树

# 预览

# API属性

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

# 使用方式

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

1

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

1
2
3

# CuteFileUpload 文件上传

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

# 预览

# API属性

参数	说明	类型	默认值	是否必填
on-success	当文件上传成功时回调	Function
on-error	当文件上传失败时回调	Function

# 使用方式

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

1

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

1
2
3
4
5
6

# CuteFileDragUpload 文件拖放上传

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

# 预览

# API属性

参数	说明	类型	默认值	是否必填
on-success	当文件上传成功时回调	Function
on-error	当文件上传失败时回调	Function

# 使用方式

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

1

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

1
2
3
4
5
6

# CuteSingleUserSelect 用户单选框

# 预览

# API属性

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

# 使用方式

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

1

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

1
2
3

# CuteUserSelect 用户多选框

# 预览

# API属性

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

# 使用方式

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

1

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

1
2
3

# CuteProductLineSelect 产品线选择框

# 预览

# API属性

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

# 使用方式

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

1

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

1
2
3
4
5
6

# CuteProductLineSelectPro 部产品线级联选择框

# 预览

# API属性

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

# 使用方式

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

1

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

1
2
3
4
5
6

帮助我们改善此页面！

← 新版基础组件常规部署方式→