你的身份

链接

使用者

在 ThingJS UI-布局中使用

Spray介绍

在 html 中使用

  1. 进入 Gallery 下载相应的组件 （点击下方链接跳转到 使用教程 查看如何下载）

下载组件

  1. 将下载好的压缩包解压，取出解压后文件夹里的内容
    1. img：存放组件使用到的图片
    2. lib：存放组件使用到的 js 库
    3. comp.js: 组件的核心文件

image.png

  1. 新建 html 文件，将 comp.js 通过 script 引入 （注意： 信息图的使用前需要引入 vue 环境，可以在 window 下访问到 Vue 对象 ）

image.png

  1. 运行html，此时便可以 F12 下访问到 conch 对象，便可以看到 comp 下拥有的组件（是一个 对象形式）

image.png

  1. 创建组件步骤如下：
    1. 在 html 的 body 中创建组件展示的 dom 节点和 script 标签
    2. 在 script 标签中编写相应的 js 代码创建 comp 对象（组件的 ID 需要进入 Gallery 中复制，或者根据上图打印的对象的 key 值）
    3. 构建组件的参数
      1. prefix: 组件请求静态资源的前缀，默认是 通过 /js(img)/文件名称来请求

image.png

  1. 执行组件的 render 函数（此方法为 async 函数，为了解决组件加载静态资源产生的异步问题）

image.png

  1. 此时便可以在 html 中看到相应的组件了

    在 Vue 中使用

  2. 依照在 html 中的使用将文件下载下来和引入

  3. 通过 vue.use(window.conch) 注册 conch 组件
  4. 便可以依照，在 html 中使用的第五步去构建组件

开发者

此处仅简单介绍编辑器，点击深入了解

  1. 进入编辑器

image.png

  1. 编辑器页面结构
    1. 头部
      1. 教程
      2. Imagination （好用的功能都在这里）
    2. 左侧：组件列表（展示当前用户名下的所有组件和例子）
    3. 右侧：组件的编辑框（第一张图为没有打开组件，第二张为打开组件的样式）

image.png
image.png