组件文档

Input

Input 用于接受用户的输入的组件，在 Duang 中用于:

• Schemes::inputs
• Schemes::filters

所有的 Input 控件都有两个公共参数：

Input::String

单行文本

参数：

示例：

{
  "component": "String",
  "args": {
    "width": "180px",
    "placeholder": "请输入名称",
    "maxLength": 32
  }
}

试一试

Input::Password

单行文本

参数：

示例：

{
  "component": "Password",
  "args": {
    "width": "180px",
    "placeholder": "请输入密码",
    "maxLength": 32
  }
}

试一试

Input::Text

参数描述

多行文本

参数：

示例：

{
  "component": "Text",
  "args": {
    "width": "180px",
    "height": "300px",
    "placeholder": "请输入名称",
    "maxLength": 1024
  }
}

试一试

Input::Number

数值输入

参数：

示例：

{
  "component": "Number",
  "args": {
    "width": "180px",
    "min": 20,
    "max": 100
  }
}

试一试

Input::Boolean

参数：

Input::Boolean::text

示例：

{
  "component": "Boolean",
  "args": {
    "text": {
      "true": "有效",
      "false": "无效"
    }
  }
}

试一试

Input::Checkbox

复选框

参数：

options 是一个对象，其键名对应复选框的 value，其值对应复选框显示的文本。

示例：

{
  "component": "Checkbox",
  "args": {
    "options": {
      "pen": "笔",
      "apple": "苹果",
      "pineapple": "凤梨"
    }
  }
}

• defaultValue 设置成 { "all": true } 可以默认全选

试一试

Input::Radio

单选框

参数：

options 是一个对象，其键名对应单选框的 value，其值对应单选框显示的文本。

示例配置

{
  "component": "Radio",
  "args": {
    "options": {
      "0": "受",
      "1": "攻"
    }
  }
}

试一试

Input::Select

参数：

示例：

{
  "component": "Select",
  "args": {
    "options": {
      "active": "启用",
      "inactive": "禁用"
    }
  }
}

试一试

Input::ImageSelector

从 0.0.117 开始支持

图片选择控件（类似 Radio，只不过选项是一张张图片而不是文字）

参数：

options 是一个对象数组，其中的对象结构为：

示例配置

{
  "component": "ImageSelector",
  "args": {
    "options": [
      { "src": "https://fuss10.elemecdn.com/1/89/56d597e004abf8d30365009c4492bjpeg.jpeg", "value": "麦当劳" },
      { "src": "https://fuss10.elemecdn.com/7/d3/48a777a6b444dc317cc24d101220cjpeg.jpeg", "value": "肯德基" },
      { "src": "https://fuss10.elemecdn.com/4/ff/bde8cd29387027b84824a95e0058bjpeg.jpeg", "value": "德克士" }
    ]
  }
}

试一试

Input::Date

一个日期选择器，基于 jinkela-datepicker，args 中的参数都会传到 jinkela-datepicker 的初始化配置中

值的标准格式为 ISO 8601 字符串，时间部分为 0，设置 offset 参数会影响时间部分。

支持以下特殊的取值：

today, nextDay, lastDay, nextWeek, lastWeek, nextMonth, lastMonth, nextYear, lastYear

参数：

示例：

{
  "component": "Date",
  "args": {
    "defaultValue": "today"
  }
}

试一试

Input::Time

一个时间选择器，基于 jinkela-timepicker，args 中的参数都会传到 jinkela-timepicker 的初始化配置中。

值的标准格式为 HH:MM:SS 字符串。

支持以下特殊的取值：

now

参数：

示例：

{
  "component": "Time",
  "args": {
    "defaultValue": "now"
  }
}

试一试

Input::DateTime

值的标准格式为 Date 类型的对象。

参数：

示例：

{
  "component": "DateTime",
  "args": {
    "defaultValue": "2017/6/26 23:59:59"
  }
}

试一试

Input::FileBase64

文件上传（Base64 方式）

参数：

示例配置

{
  "component": "FileBase64",
  "args": { "text": "上传文件" }
}

试一试

Input::FileToken

文件上传（Token 方式）

参数：

limit：

提供的 api 应该支持 POST api 上传文件（文件所在的字段名叫 file），以及 GET api/:token 下载某个 token（用于预览）。

配置：

{
  "component": "FileToken",
  "args": {
    "text": "上传文件",
    "api": "/avatar"
  }
}

试一试

Input::FileTokenWithInfo

功能同 (InputFileToken)[/duang/docs/components/#Input%3A%3AFileToken] 上传时额外多发送图片相关信息：width 和 height。

文件上传（Token 方式）

参数：

提供的 api 应该支持 POST api 上传文件（文件所在的字段名叫 file），以及 GET api/:token 下载某个 token（用于预览）。

试一试

Input::TextAround

数值输入

参数：

示例：

{
  "component": "TextAround",
  "args": {
    "before": "人民币",
    "after": "元",
    "component": "String"
  }
}

试一试

Input::Suggestion

参数：

当输入时会使用 GET 方法调用这个 api，并且在 QueryString 中带上一个名为 q 的参数（注意其是经过 json encode 的）。 这个接口应该返回一个对象数组，其中的每一个对象都有一个 value 字段。

下面是这个接口的请求实例：

GET /api?q="xxx" HTTP/1.1
Host: ...


HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: ...

[
  { "value": "搜索建议 1" },
  { "value": "搜索建议 2" }
]

示例：

{
  "component": "Suggestion",
  "args": {
    "api": "suggestion"
  }
}

试一试

Input::TagCollector

参数：

当输入时会使用 GET 方法调用这个 api，并且在 QueryString 中带上一个名为 q 的参数（注意其是经过 json encode 的）。 这个接口应该返回一个对象数组，其中的每一个对象都有一个 value 字段。

下面是这个接口的请求实例：

GET /api?q="xxx" HTTP/1.1
Host: ...


HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: ...

[
  { "value": "搜索建议 1" },
  { "value": "搜索建议 2" }
]

示例：

{
  "component": "TagCollector",
  "args": {
    "api": "suggestion"
  }
}

试一试

Input::Cascader

级联选择器

这个控件的数据类型是一个数组，每一项表示对应级联项的值。

参数：

Input::Cascader::Options:

示例：

{
  "component": "Cascader",
  "args": {
    "options": [
      {
        "value": 1, "text": "item 1",
        "options": [
          { "value": 2, "text": "item 1.1" }
        ]
      }
    ],
    "defaultText": [ 1, 2 ]
  }
}

试一试

Input::Forest

树林选择器

这个控件的数据类型是一个数组（递归表），所有根节点作为第一级选项。

参数：

Input::Cascader::Options:

示例：

{
  "component": "Forest",
  "args": {
    "options": [
      { "id": 1, "text": "item 1", },
      { "id": 2, "parentId": 1, "text": "item 1.1" }
    ],
    "defaultText": [ 1, 2 ]
  }
}

试一试

Input::Code

一个代码输入框，底层使用的是 CodeMirror，args 中的参数都会传到 CodeMirror 初始化配置中

参数：

示例：

{
  "component": "Code",
  "args": {
    "width": 100,
    "height": 100,
    "mode": "yaml",
    "lineNumbers": true
  }
}

试一试

Input::Markdown

Markdown 输入控件，提供预览功能

参数：

Input::Caption

不提供任何数据，仅作为输入控件分组使用

参数：

试一试

Input::Grouping

组合控件

参数：

mode 目前支持两种取值，"line" 和 "table"，分别表示单行显示和表格显示。

示例配置

{
  "component": "Grouping",
  "args": {
    "mode": "line",
    "style": { "color": "red" },
    "inputs": [
      { "component": "String", "key": "name", "title": "名称" },
      { "component": "String", "key": "title", "title": "标题" }
    ]
  }
}

试一试

Input::GroupingSelect

参数：

当选择某个选项时，通过选中的值在 subGroupMap 中找到对应的数组，作为 Grouping 的 inputs 渲染。

mode 目前支持两种取值，"line" 和 "normal"，分别表示单行显示和分行显示。

示例：

{
  "component": "GroupingSelect",
  "args": {
    "options": {
      "hongbao": "红包",
      "point": "积分"
    },
    "subGroupMap": {
      "hongbao": [
        { "key": "hongbao_amount", "component": "Number", "title": "红包金额" }
      ],
      "point": [
        { "key": "point", "component": "Number", "title": "积分" }
      ]
    }
  }
}

试一试

Input::GroupingCheckbox

参数：

当勾选时，subGroup 中的控件将生效。

示例：

{
  "component": "GroupingCheckbox",
  "args": {
    "subGroup": [
        { "key": "hongbao_amount", "component": "Number", "title": "红包金额" }
      ]
    }
  }
}

试一试

Input::List

列表控件

参数：

示例配置

{
  "component": "List",
  "args": {
    "component": "String",
    "args": {},
    "max": 10
  }
}

试一试

Output

Output 是用来输出展示数据的一类组件

所有的 Input 控件都有一个公共参数：

Output::HTML

参数描述

{
  "component": "HTML",
  "args": {
    "html": "<strong>hehe</strong>"
  }
}

Output::Number

参数描述

{
  "component": "Number",
  "args": {
    "fixed": 2
  }
}

Output::Boolean

参数描述

示例配置

{
  "component": "Boolean",
  "args": {
    "text": {
      "true": "有效",
      "false": "无效"
    }
  }
}

Output::DateTime

参数描述

示例配置

{
  "component": "DateTime",
  "args": {
    "format": "$Y-$M-$D",
    "offset": -864E5
  }
}

Output::Enum

参数描述

示例配置

{
  "component": "Enum",
  "args": {
    "map": {
      "PENDDING": "等待中",
      "ACTIVE": "生效中",
      "EXPIRED": "已过期"
    }
  }
}

Output::Image

值为图片的 URL，会渲染一张小图，并且点击可以查看大图。

Output::Link2

跳转到某个连接，配置方式类似 Action（原 Link 控件已废弃）

参数描述（参考 Scheme）

示例配置

{
  "component": "Link2",
  "args": {
    "module": "editor"
  }
}

试一试

Output::Clipboard

可复制内容

参数描述

示例配置

示例：

{
  "component": "Clipboard",
  "args": {
    "maxWidth": 500
  }
}

Output::QRCode

输出一个图标，点击后以对话框形式显示一个二维码，这个二维码由控件的值来生成。

Output::TextTip

自身是一段文字，鼠标悬停后会出现提示信息

值的类型是一个对象：

Output::IconTip

自身是一个图标，鼠标悬停后会出现提示信息

值的类型是一个对象：

Output::Table

参数描述

示例配置

{
  "component": "Table",
  "args": {
    "fields": [
      {
        "key": "id",
        "title": "id"
      },
      {
        "key": "name",
        "title": "名称"
      }
    ]
  }
}

Output::AutoRefresh

让页面自动刷新（一般在 Duang::schemes::headers 中使用）

参数描述

控件开发

控件是一个由 AMD 方式提供的 JavaScript 类。

需要实现 value 访问器属性和 to 方法，并且正确处理构造参数中包含的 readonly 和 defaultValue。

define(() => class {

  constructor(args) {
    if (args.readonly) {
      // 处理只读状态
    }
    if (args.defaultValue) {
      // 处理默认值（当 value 被赋为 undefined 时的值）
    }
    // 处理其它参数
  }

  // 处理值的读写
  get value() { /* TODO */ }
  set value(value) { /* TODO */ }

  // 渲染到 DOM 元素上
  to(element) { /* TODO */ }

});