@jdplus/pui NPM

name: PUI介绍 route: /

weight: 1

介绍

PUI是由京东plus前端团队开发的一款移动端UI组件库，其中包含了众多的组件

快速上手

在命令行中下载pui组件库，输入如下命令

npm install --save @jdplus/pui 然后等待下载完成就可以在项目中愉快的使用组件啦～

更细日志

Bug Fixes

no: 修复了slider张红提出的几个小bug并且发布了新版 (e04d4e4)
配置提交类型 (3105b00)

Features

no: slider组件新增三个touch回调函数 (e0af184)
增加提交表情包 (7349469)
增加提交配置 (78902b2)

PUI拖拽工具json配置

组件属性 API 介绍

属性	说明
name	组件名称
container	组件是否为容器可以进行拖拽
children	组件是否有子元素
category	组件分类
img	组件缩略图
style	拖拽后的组件样式
sort_style	容器组件拖拽后的容器样式
***	组件自身属性props

组件自身属性可根据组件的props加入到配置中

组件属性配置项API，用于拖拽工具中属性面板的显示

属性	说明	类型	默认值	是否必选
type	属性类型	Input \| Select \| Boolean \| InputNumber	-	否
value	属性值	String \| Boolean \| Number \| String[]	-	是
pname	属性名称	String	-	否

Demo

    [
        {
            "name": {
                "type": "Input",
                "value": "PuiRow",
                "pname": "PuiRow"
            },
            "align": {
                "type": "Select",
                "value": ["space-between", "space-around", "top", "middle", "bottom"],
                "pname": "align"
            },
            "justify": {
                "type": "Select",
                "value": ["start", "center", "end"],
                "pname": "justify"
            },
            "container": {
                "type": "Boolean",
                "value": true,
                "pname": "是否为容器"
            },
            "children": {
                "value": []
            },
            "img": {
                "value": "https://img11.360buyimg.com/imagetools/jfs/t1/161531/1/7100/5074/602f6748E119cb3aa/6f3dff9782455915.png"
            },
            "category": {
                "value": "basic"
            },
            "style": {
                "value": {
                    "width": "100%",
                    "minHeight": "60px",
                    "border": "2px solid #f0f0f0",
                    "background": "#ffffff",
                    "marginBottom": "10px"
                }
            },
            "sort_style": {
                "value": {
                    "width": "100%",
                    "minHeight": "60px"
                }
            }
        }
        //...其它组件配置项
    ]