资源工坊

前端SDK使用说明 ​

DcComponentSDK使用步骤 ​

第一步：引入DcComponentSDK ​

WPS提供一套DcComponentSDK组件给到业务方对接，其中提供了非模块化以及CommonJS和ES6两种模块化规范的包。业务方可根据自身需求选择其中之一引入到项目中。以下以非模块化的包为例。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>DcComponentSDK</title>
</head>
<body>
  <script src="访问域名/kdrive/public/dc-component-sdk-v1.0.0.umd.js"></script>
  <script>
    console.log('引入后可以开始使用 DcComponentSDK 了~');
    console.log(DcComponentSDK);
  </script>
</body>
</html>

第二步：初始化 ​

引用 DcComponentSDK 之后，就可以通过DcComponentSDK.config方法指定文件选择器的挂载节点 （可选参数，若不传则默认挂载在body下）

let dcComponentSDK
window.onload = function () {
  // 页面加载完成后初始化DcComponentSDK
  dcComponentSDK = DcComponentSDK.config({
     mount:  // 传入要挂载的节点，可选参数，若不传则默认挂载在body下
  })
}

第三步：调起文件选择器 ​

dcComponentSDK.mountComponent({
  key: 'DirectoryChooser', // 要加载的组件名，目前sdk只支持文件选择器组件
  options: {
    type: 'CHOOSE_FILE', // 文件选择器模式
    title: '选择文件', // 文件选择器标题
    mode: 'web', // web端文件选择器或H5端文件选择器
    beforeClose: () => {}, // 文件选择器卸载前回调
    onOk: (data) => {} // 文件选择器点击确定按钮回调
    // 更多配置参数...
  }
})

使用示例 ​

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>DcComponentSDK</title>
</head>
<body>
  <div>
    <button onclick="openDirectoryChooser()">
       使用文件选择器
    </button>
  </div>
  <script src="访问域名/kdrive/public/dc-component-sdk-v1.0.0.umd.js"></script>
  <script>
    console.log('引入后可以开始使用 DcComponentSDK 了~');
    console.log(DcComponentSDK);
  </script>
  <script>
     let dcComponentSDK
     window.onload = function () {
       // 页面加载完成后初始化DcComponentSDK
       dcComponentSDK = DcComponentSDK.config({
          mount:  // 传入要挂载的节点，可选参数，若不传则默认挂载在body下
       })
     }

     function openDirectoryChooser() {
       dcComponentSDK.mountComponent({
         key: 'DirectoryChooser', // 要加载的组件名，目前sdk只支持文件选择器组件
         options: {
           type: 'CHOOSE_FILE', // 文件选择器模式
           title: '选择文件', // 文件选择器标题
           mode: 'web', // web端文件选择器或H5端文件选择器
           beforeClose: () => {}, // 文件选择器卸载前回调
           onOk: (data) => {} // 文件选择器点击确定按钮回调
           // 更多配置参数...
         }
       })
     }
  </script>
</body>
</html>

mountComponent方法参数详解 ​

mountComponent方法参数 ​

参数说明类型是否必传
key加载组件key值COMPONENT_KEY是
options加载组件配置项IDirectoryChooserOptions是

COMPONENT_KEY ​

枚举名枚举值说明
DIRECTORY_CHOOSERDirectoryChooser文件选择器组件key值

IDirectoryChooserOptions ​

参数说明参数类型是否必传
type文件选择器类型DIRECTORY_CHOOSER_TYPE是
title文件选择器标题string是
mode加载文件选择器组件模式DIRECTORY_CHOOSER_MODE是
defaultRootDir文件选择器左侧tab栏默认路径，默认为我的云文档（仅web端）ROOT_DIR_KEY否
containerAttr挂载文件选择器组件的iframe属性IContainerAttr否
isDev是否开发模式boolean否
onOk文件选择器点击确定按钮，选择文件时，driveId，fileId必传；选择文件目录时，driveId，parentId必传(data: { driveId: string; parentId?: string; fileId?: string }) => void | Promis< void >是
beforeClose文件选择器关闭前() => void | Promise< void >否
beforeIframeMountiframe加载前(iframeDom?: HTMLIFrameElement) => void | Promise< void >否
iframeMountediframe加载成功后( iframeDom?: HTMLIFrameElement,event?: Event) => void | Promise< void >否
getIframeDom获取iframe节点(iframeDom: HTMLIFrameElement) => void | Promise< void >否

DIRECTORY_CHOOSER_TYPE ​

枚举名枚举值说明
CHOOSE_FILECHOOSE_FILE选择文件模式
CHOOSE_FOLDERCHOOSE_FOLDER选择文件目录模式

DIRECTORY_CHOOSER_MODE ​

枚举名枚举值说明
WEBWEBweb端文件选择器
MOBILEMOBILEh5端文件选择器

ROOT_DIR_KEY ​

枚举名枚举值说明
LATESTLATEST最近列表
STARSTAR星标列表
SHARESHARE共享列表
MY_ENT_DOCMY_ENT_DOC我的云文档列表
GROUP_DOCGROUP_DOC团队列表

IContainerAttr ​

参数说明参数类型是否必传
widthiframe宽度，需带单位，例如：‘100px’string否
heightiframe高度，需带单位，例如：‘100px’string否
idiframe的idstring否