seedsui-react
SeedsUI,专为移动设备设计的UI框架,组件全面可换肤,以后将会有react版和vue版、h5版
Last updated 7 days ago by colaboy49201650 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install seedsui-react 
SYNC missed versions from official npm registry.

简介

SeedsUI,专为移动设备设计的UI框架,组件全面可换肤,以后将会有react版和vue版、h5版

安装

npm install seedsui-react --save

导入组件

静态导入

工程化项目

import 'seedsui-react/build/seedsui.min.css';
import {Chat} from 'seedsui-react';

HTML项目

<link rel="stylesheet" href="https://unpkg.com/seedsui-react/build/seedsui.min.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://unpkg.com/seedsui-react/build/seedsui-react.min.js"></script>
<script type="text/babel">
  ReactDOM.render(
    <seedsui.Chat>聊天框</seedsui.Chat>,
    document.getElementById('root')
  );
</script>

动态导入

用于工程化项目,建议使用动态导入, 以节省打包文件体积, 动态导入需要Less环境支持:

npm install less less-loader --save-dev

修改 webpack.config.dev.js 和 webpack.config.prod.js 配置文件:
搜索“/.css”,修改规则为/.css|.less$/,use -> {loader: require.resolve('less-loader')}

// 导入seedsui基础库
import 'components/seedsui/index.less'; // 需要手动配置,见下节
import 'seedsui-react/lib/PrototypeArray.js';
import 'seedsui-react/lib/PrototypeMath.js';
import 'seedsui-react/lib/PrototypeObject.js';
import 'seedsui-react/lib/PrototypeString.js';
import 'seedsui-react/lib/PrototypeDate.js';
// 导入组件
import Chat from 'seedsui-react/lib/Chat';

index.less手动配置:

1.图标 src/components/seedsui/iconfont.less:

下载模板,放入src/components/seedsui/iconfont.less后修改

2.变量 src/components/seedsui/variables.less:

下载模板,放入src/components/seedsui/variables.less后修改

3.组件 src/components/seedsui/components.less:

下载模板,放入src/components/seedsui/components.less后修改
引入地址修改如:

@import "styles/top/appearance.less";

前缀改为../../../node_modules/seedsui-react/lib/

@import "../../../node_modules/seedsui-react/lib/styles/top/appearance.less";

三个less汇集 src/components/seedsui/index.less:

// 图标
// @import "../../../node_modules/seedsui-react/lib/seedsui-iconfont.less";
@import "iconfont.less";
// 变量,依赖图标(换肤文件)
// @import "../../../node_modules/seedsui-react/lib/seedsui-variables.less";
@import "variables.less";
// 组件,依赖变量库
// @import "../../../node_modules/seedsui-react/lib/seedsui-components.less";
@import "components.less";

Component

Actionsheet

卡片框

属性

<Actionsheet
  portal={传送dom object, 默认document.getElementById('root')}
  args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
  show={*显隐 bool, 默认false}
  duration={动画时长 number, 默认见seedsui-variables.less}

  list={*按钮项 array, 如: [{caption: string}]}
  onClick={点击项 func(item, index), 有此属性才显示确定按钮}

  maskStyle={遮罩style object, 默认无}
  maskClassName={遮罩className string, 默认无, 基础'mask actionsheet-mask'}
  onClickMask={点击遮罩 func, 默认无}

  style={容器style object, 默认无}
  className={容器className string, 默认无, 基础'actionsheet'}

  groupStyle={组style object, 默认无}
  groupClassName={组className string, 默认无, 基础'actionsheet-group'}

  optionStyle={项style object, 默认无}
  optionClassName={项className string, 默认'border-b', 基础'actionsheet-option'}

  cancelStyle={取消按钮style object, 默认无}
  cancelClassName={取消按钮className string, 默认无, 基础'actionsheet-cancel'}
  cancelCaption={取消按钮文字 node, 默认'取消'}
  onClickCancel={点击取消按钮 func(), 默认无, 有此属性才显示取消按钮}
/>

示例

import Actionsheet from 'seedsui-react/lib/Actionsheet';
onClickActionsheet = (item, index) => {
  console.log(item) // => {caption: '菜单1'}
}
<Actionsheet
  show={this.state.actionsheetShow}
  list={[{caption: '菜单1'}, {caption: '菜单2'}]}
  onClick={this.onClickActionsheet}
  onClickCancel={this.hideActionsheet}
  onClickMask={this.hideActionsheet}/>

返回目录

Alert

对话框

建议

Alert组件更适用于复杂的定制弹框,一般弹框建议直接使用Api直接调用:

  • alert框:Bridge.showAlert(msg)代替
  • confirm框:Bridge.showConfirm(msg, {onSuccess: fn, onError: fn})代替

详见Bridge 桥接库 桥接库

属性

<Alert
  portal={传送dom object, 默认document.getElementById('root')}
  args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
  show={*显隐 bool, 默认false}
  duration={动画时长 number, 默认见seedsui-variables.less}

  maskStyle={遮罩style object, 默认无}
  maskClassName={遮罩className string, 默认无}
  onClickMask={点击遮罩 func, 默认无}

  style={容器style object, 默认无}
  className={容器className string, 默认无}

  caption={标题文字 node, 默认无}
  captionStyle={标题style object, 默认无}
  captionClassName={标题className string, 默认无}

  icon={图标dom node, 默认无}
  iconSrc={图标地址 string, 默认无}
  iconStyle={图标style object, 默认无}
  iconClassName={图标className string, 默认无}

  contentStyle={内容style object, 默认无}
  contentClassName={内容className string, 默认无}
  children={内容 node, 默认无}

  submitStyle={确定按钮style object, 默认无}
  submitClassName={确定按钮className string, 默认无}
  submitCaption={确定按钮文字 node, 默认'确定'}
  disabled={确定按钮是否禁用 bool, 默认false}
  onClickSubmit={点击确定按钮 func(args), 有此属性才显示确定按钮}

  cancelStyle={取消按钮style object, 默认无}
  cancelClassName={取消按钮className string, 默认无}
  cancelCaption={取消按钮文字 node, 默认'取消'}
  onClickCancel={点击取消按钮 func(args), 默认无, 有此属性才显示取消按钮}
/>

示例

import Alert from 'seedsui-react/lib/Alert';
<Alert
  show={this.state.alertShow}
  iconClassName="icon-图标"
  submitCaption="确定按钮"
  onClickSubmit={this.onSubmitAlert}>
  提示内容
</Alert>

返回目录

Article

文章

属性

<Article
  caption={标题文字 node, 默认无}
  captionStyle={标题style object, 默认无}
  captionClassName={标题className string, 默认无}

  sndcaption={副标题文字 node, 默认无}
  sndcaptionStyle={副标题style object, 默认无}
  sndcaptionClassName={副标题className string, 默认无}

  paragraphs={段落 array, 如: ['段落1', '段落2']}
  paragraphStyle={段落style object, 默认无}
  paragraphClassName={段落className string, 默认无}
>
  提示内容
</Article>

示例

import Article from 'seedsui-react/lib/Article';
<Article
  caption="标题"
  sndcaption="副标题"
  paragraphs={['段落1', '段落2']}
/>

返回目录

Attribute

属性

属性

<Attribute
  name={标题文字 node, 默认无}
  value={内容文字 node, 默认无}
  required={是否显示'*'号 bool, 默认false}

  showValidValue={value合法时显示 bool, 默认false}
  showValidName={name合法时显示 bool, 默认false}

  className={容器className string[attribute-margin(margin: 10px 12px;) | attribute-padding(padding: 10px 12px;) | align(左右对齐布局) | start(左端对齐) | between(两端对齐)], 默认'attribute-margin', 基础'attribute'}
  style={容器style object, 默认无}

  cellClassName={列className string, 默认无}
  cellStyle={列style object, 默认无}

  nameClassName={name的className string, 默认无, 基础'attribute-left'}
  nameStyle={name的style object, 默认无}
  requiredClassName={'*'号的className string, 默认无, 基础'required required-left'}
  requiredStyle={'*'号的style object, 默认无}
  valueClassName={value的className string, 默认无, 基础'attribute-right'}
  valueStyle={value的style object, 默认无}

  rowAfter={行后DOM node, 默认无}
  onClick={点击项 func(args)}
>
  value下方的DOM node, 默认无
</Attribute>

示例

import Attribute from 'seedsui-react/lib/Attribute';
<Attribute name="收货人:" required="*" className="attribute-padding align border-b" requiredStyle={{left: '-18px'}} nameStyle={{color: '#333'}} style={{padding: '0 12px 0 30px'}}>
  <InputText placeholder="点击输入" valueBindProp value={receive_name} onChange={nameChange}/>
</Attribute>

返回目录

Attributes

属性组合

属性

<Attributes
  showValidValue={value合法时显示 bool, 默认false}
  showValidName={name合法时显示 bool, 默认false}

  list={内容列表 array, 默认[], 格式如下:}
  // [
  //   {
  //     name: string, // 标题文字
  //     value: string, // 内容文字
  //     copy: bool | string, // 复制value的按钮,string时指替换按钮默认的"复制"二字
  //     tel: bool | string, // 打value电话,string时替换默认拨打的电话
  //     price: bool | string, // 显示value金额格式,string时将替换默认显示的金额
  //     priceClassName: string, // 金额className
  //     priceStyle: object, // 金额style
  //     button: bool | string, // value显示成按钮样式,string时则替换按钮中文字
  //     buttonClassName: string, // 按钮className
  //     buttonStyle: object, // 按钮style
  //     buttonClick: func, // 点击按钮,buttonClick(item, index)
  //     show: bool, // 是否显示此行,默认无
  //     mark: string, // 标签
  //     markClassName: string, // 标签className
  //     markStyle: object // 标签style
  //     suffix: node // value后缀
  //     suffixClassName: string,
  //     suffixStyle: object,
  //   }
  // ]
  className={容器className string[attribute-margin(margin: 10px 12px;) | attribute-padding(padding: 10px 12px;) | align(左右对齐布局) | start(左端对齐) | between(两端对齐)], 默认'attribute-margin', 基础'attributes'}
  style={容器style object, 默认无}

  rowClassName={行容器className string[attribute-margin(margin: 10px 12px;) | attribute-padding(padding: 10px 12px;) | align(左右对齐布局) | start(左端对齐) | between(两端对齐)], 默认'attribute-margin', 基础'attribute'}
  rowStyle={行容器style object, 默认无}

  col={列数 string | number, 默认1}
  colClassName={当col为2时列className string, 默认无, 基础'attribute-half'}
  colStyle={当col为2时列style object, 默认无}

  cellClassName={列className string, 默认无}
  cellStyle={列style object, 默认无}

  nameClassName={name的className string, 默认无, 基础'attribute-left'}
  nameStyle={name的style object, 默认无}
  valueClassName={value的className string, 默认无, 基础'attribute-right'}
  valueStyle={value的style object, 默认无}

  rowAfter={行后DOM node, 默认无}
  rowAfterExclude={行后过滤 number, 默认无, 例如最后一行hr不渲染}
  onCopy={拷贝事件 func(text, msg)}
  onClick={点击行 func(item, index, item2?, index2?)}
>
attributes渲染后的DOM
</Attributes>

示例

import Attributes from 'seedsui-react/lib/Attribute';
<Attributes list={list} className="border-b" valueStyle={{marginLeft: '8px'}}>
  <span style={{position: 'absolute', top: '10px', right: '10px'}} className="color-sub">状态</span>
</Attributes>

返回目录

Badge

徽章

属性

<Badge
  className={容器className string, 默认无, 基础'badge',内容大于两位时会加上'badge-max-width'}
  style={容器style object, 默认无}
  limit={位数限制 number, 默认2, 如:1000,将显示99+}
  ellipsis={位数限制省略号 string, 默认'+'}
  {...others}
/>

示例

import Actionsheet from 'seedsui-react/lib/Actionsheet';

const BadgeStyle = {
  position: 'absolute',
  left: '13px',
  top: '-5px',
};

<Icon className="icon-cart">
  {cartCount > 0 && <Badge style={BadgeStyle}>{cartCount}</Badge>}
</Icon>

返回目录

BiClock

时钟

属性

<BiClock
  lineWidth={边框宽度px number, 默认2}
  size={宽高大小px number, 默认50}
  time={时间 string, 默认'00:00'} // 格式 hh:mm
  className={容器className string, 默认无, 基础'bi-clock'}
  style={容器style object, 默认无}

  duration={动画时长 number, 默认1000}
  delay={延时 number, 默认100}
/>

示例

import BiClock from 'seedsui-react/lib/BiClock';

<BiClock time="11:30"/>

返回目录

BiDoughnut

环形图

属性

<BiDoughnut
  lineWidth={边框宽度px number, 默认3}
  size={宽高大小px number, 默认50}
  duration={动画时长 number, 默认1000}
  rotate={旋转角度 number, 默认0, 最大360}
  delay={延时 number, 默认100}

  className={容器className string, 默认无, 基础'bi-doughtut'}
  captionClassName={标题className string, 默认无, 基础'bi-doughtut-caption'}
  captionStyle={标题style object, 默认无}
>
标题内容
<BiDoughnut>

示例

import BiDoughnut from 'seedsui-react/lib/BiDoughnut';

<BiDoughnut rotate={15} className="success">
  待审批
</BiDoughnut>
<BiDoughnut rotate={45} className="warn">
  准备中
</BiDoughnut>
<BiDoughnut rotate={315} className="submit">
  进行中
</BiDoughnut>
<BiDoughnut rotate={360} className="disabled">
  已结束
</BiDoughnut>
<BiDoughnut rotate={120} className="cancel">
  已取消
</BiDoughnut>

返回目录

BiGauge

仪表盘

属性

<BiGauge
  duration={动画时长 number, 默认1000}
  rotate={旋转角度 number, 默认0, 最大270}
  delay={延时 number, 默认100}

  className={容器className string, 默认无, 基础'bi-gauge-box'}
  style={容器style object, 默认无}
  captionClassName={标题className string, 默认无, 基础'bi-gauge-caption'}
  captionStyle={标题style object, 默认无}
>
标题内容
<BiGauge>

示例

import BiGauge from 'seedsui-react/lib/BiGauge';

<BiGauge rotate={15} className="success">
  15
</BiGauge>

返回目录

Bridge

桥接 , 现支持四个平台的桥接适配, 浏览器、订货、外勤、微信客户端

对象

Bridge:{
  platform: 'browser', // 根据不同的环境将返回不同的结果 'browser' | 'dinghuo' | 'waiqin' | 'weixin'
  debug: false, // 在浏览器中,为true时将会启动调试模式,会使用假数据
  config: fn, // Bridge.config(); 在应用初始化时需要执行此方法, 连接桥接
  getAppVersion: fn, // 获取版本信息
  chooseImage: fn({
    count: number,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: fn({sourceType: 'camera | album', errMsg: 'chooseImage:ok', localIds: array}),
    fail: fn({code: number, errMsg: 'chooseImage:fail'})
  }),
  uploadImage: fn({
    success: fn({mediaUrl: string, errMsg: 'uploadImage:ok', serverId: '1237378768e7q8e7r8qwesafdasdfasdfaxss111'}),
  }),
  previewImage: fn({
    urls:'需要预览的图片http链接列表',
    current:'当前显示图片的http链接'
  }),
  getContactMore: fn({ // 外勤客户端专用, 人员插件多选
    selectedIds: '5330457627710680963,5330457627710680963',
    aclType: '0', // 人员权限, 0只能看到下属, 不传或者其他的参数为全部人员, 默认为空串
    onSuccess: fn([{
      "id": "5330457627710680963",
      "name": "张三"
    }])
  }),
  getContact: fn({ // 外勤客户端专用, 人员插件单选
    id: '5330457627710680963',
    aclType: '0', // 人员权限, 0只能看到下属, 不传或者其他的参数为全部人员, 默认为空串
    onSuccess: fn({
      "id": "5330457627710680963",
      "name": "张三"
    })
  }),
  getCustomerMore: fn({ // 外勤客户端专用, 客户插件多选
    selectedIds: '5330457627710680963,5330457627710680963',
    tradeType: '1', // 1:客户 2:经销商 3:门店 空串:全部, 默认为空串
    hiddenAdd: true, // 是否隐藏添加按钮, 默认true
    onSuccess: fn([{
      "check": true,
      "distance": 31,
      "labelType": 0,
      "addr": "南京市建邺区康文路康缘智汇港附近",
      "approval_status": "3",
      "code": "20180403004",
      "cooperate_status": "1",
      "district_id": "",
      "id": "5330457627710680963",
      "lat": "",
      "location": "31.983362,118.73069",
      "lon": "",
      "manager_name": "",
      "name": "20180403003",
      "name_py": "20180403004 20180403004",
      "trade_type": "3",
      "type_id": "",
      "type_image": ""
    }])
  }),
  getCustomer: fn({ // 外勤客户端专用, 客户插件单选
    id: '5330457627710680963',
    tradeType: '1', // 1:客户 2:经销商 3:门店 空串:全部, 默认为空串
    hiddenAdd: true, // 是否隐藏添加按钮, 默认true
    onSuccess: fn({
      "check": true,
      "distance": 31,
      "labelType": 0,
      "addr": "南京市建邺区康文路康缘智汇港附近",
      "approval_status": "3",
      "code": "20180403004",
      "cooperate_status": "1",
      "district_id": "",
      "id": "5330457627710680963",
      "lat": "",
      "location": "31.983362,118.73069",
      "lon": "",
      "manager_name": "",
      "name": "20180403003",
      "name_py": "20180403004 20180403004",
      "trade_type": "3",
      "type_id": "",
      "type_image": ""
    })
  }),
  getCustomerType: fn({ // 外勤客户端专用, 客户插件, 客户类型选择
    id: '5330457627710680963',
    name: '类型1',
    tradeType: '1', // 1:客户 2:经销商 3:门店 其它为客户, 默认为空串
    onSuccess: fn([{
      "id": "5330457627710680963",
      "name": "类型1"
    }])
  }),
  getCustomerArea: fn({ // 外勤客户端专用, 客户插件, 客户区域选择
    id: '5330457627710680963',
    name: '区域1',
    onSuccess: fn([{
      "id": "5330457627710680963",
      "name": "区域1"
    }])
  }),
  getDepartmentMore: fn({ // 外勤客户端专用, 部门插件, 部门多选
    selectedIds: '5330457627710680963,5330457627710680963',
    onSuccess: fn([{
      "id": "5330457627710680963",
      "name": "市场部"
    }])
  }),
  getDepartment: fn({ // 外勤客户端专用, 部门插件, 部门单选
    id: '5330457627710680963',
    name: '市场部',
    onSuccess: fn([{
      "id": "5330457627710680963",
      "name": "市场部"
    }])
  }),
  openWindow: fn( // 打开新窗口
    {
      url: string, // 打开的地址
      title: '', // 外勤客户端专用, 标题, 默认为空串
    },
    fn() // 外勤客户端专用, 打开回调
  ),
  closeWindow: fn( // 关闭窗口, 客户端关闭窗口, 浏览器和微信go(-1)
    fn() // 订货客户端专用, 关闭回调
  ),
  goHome: fn(
    fn() // 外勤客户端专用, 回到首页回调
  )
  isHomePage: fn(
    fn(true | false), // 是否是首页回调
    rule: '地址栏包含的字符串' // 用于判断是不是首页
  ),
  back: fn(), // 返回, 地址栏参数isFromApp: home(调用goHome) | confirm(对话框后go(-1)) | confirm-close(对话框后调用closeWindow) | 1(go(-1))
  addBackPress: fn(), // 绑定返回按键监听back方法
  removeBackPress: fn(), // 移除返回按键监听
  getLocation: fn({ // 定位, 默认为gcj02坐标
    onSuccess: fn({longitude:'118.730515', latitude:'31.982473', speed:'0.0', accuracy:'3.0.0'}),
    onError: fn({code:'locationFail', msg: '定位功能仅可在微信或APP中使用'})
  }),
  getAddress: fn({ // 地址逆解析
    latitude: '',
    longitude: '',
    onSuccess: fn('地址'),
    onError: fn({code: 'addressFail', msg: '获取位置名称失败,请稍后重试'})
  }),
  getDistance: fn({ // 获取两点间的距离,返回km
    point1: {longitude: '', latitude: ''},
    point2: {longitude: '', latitude: ''},
    onError: fn({code: 'distanceFail', msg: '传入的坐标不正确'})
  }),
  getWeather: fn({ // 获得天气
    location: 'lng,lat|lng,lat|lng,lat', // 可以用坐标或者地名, 如:'北京市|上海市', 用|隔开返回结果集
    onSuccess: fn([{
      currentCity: "北京市",
      index: [
        {
          des: "建议着长袖T恤、衬衫加单裤等服装。年老体弱者宜着针织长袖衬衫、马甲和长裤。",
          tipt: "穿衣指数",
          title: "穿衣",
          zs: "舒适"
        }
        ...
      ],
      pm25: "48",
      weather_data: [
        {
          date: "周二 09月25日 (实时:20℃)",
          dayPictureUrl: "http://api.map.baidu.com/images/weather/day/duoyun.png",
          nightPictureUrl: "http://api.map.baidu.com/images/weather/night/duoyun.png",
          temperature: "22 ~ 12℃",
          weather: "多云",
          wind: "南风3-4级"
        },{
          date: "周三",
          dayPictureUrl: "http://api.map.baidu.com/images/weather/day/duoyun.png",
          nightPictureUrl: "http://api.map.baidu.com/images/weather/night/duoyun.png",
          temperature: "24 ~ 14℃",
          weather: "多云",
          wind: "南风微风"
        }
      ]
    }]),
    onFail: fn({code: 'weatherFail', msg: '获取天气失败,请稍后重试'})
  }),
  scanQRCode: fn({
    needResult: 1, // 微信专用, 默认为1,0扫描结果由微信处理,1则直接返回扫描结果
    scanType: ['qrCode', 'barCode'], // 微信专用, 扫码类型
    onSuccess: fn({resultStr: ''}),
    onError: fn({code: 'qrcodeFail', msg: '扫码失败,请退出重试' + res})
  }),
  logOut: fn(), // 外勤和订货客户端专用, 退出到登录页面
  Image: { // 照片选择上传
    onChooseSuccess: fn ({ // 选择完成, 出参为imgMap
      localId: {
        serverId: '',
        sourceType: 'camera | album',
        name: '', // 外勤客户端专用
        base64: '', // 外勤客户端专用
        src: '' //外勤客户端专用, 本地地址
      }
    }),
    onUploadSuccess:fn(imgMap,res) // 微信专用, 单张上传成功
    onUploadFail:fn(index, item) // 微信专用, 单张上传失败
    onUploadsSuccess:fn(imgMap) // 微信专用, 全部上传成功
  },
  logger: fn(el), // 打印日志, el监听触发的元素, 点击十次显示, 用DB.setSession('app_logger', '')设置日志
  tel: fn('13800000000'), // 打电话
  showToast: fn('消息内容', {
    mask: true, // true下层事件会被阻止,false则不阻止
    position: 'middle', // 弹框位置, top | middle | bottom
    icon: 'icon-xx', // 图标class名称
    delay: 2000, // 延时关闭
    onSuccess: fn() // 完成关闭时回调
  }),
  showLoading: fn({ // 弹出loading
    type: 'floating流光 | filling填料环 | custom自定义',
    css: '', // 设置mask的css
    icon: 'icon-xx', // 自定义loading时,图标class名称
    mask: true, // true下层事件会被阻止,false则不阻止
  }),
  hideLoading: fn() // 隐藏loading
  showAlert: fn('消息内容', {
    caption: '', // 标题, 默认为空串
    onSuccess: fn({hide: fn()}) // 点击确定时回调, 默认为隐藏弹出框
  }),
  showConfirm: fn('消息内容', {
    caption: '', // 标题, 默认为空串
    onSuccess: fn({hide: fn()}), // 点击确定时回调
    onError: fn() // 点击取消时回调, 默认为隐藏弹出框
  })
}

示例

import Bridge from 'seedsui-react/lib/Bridge';

Bridge.showToast('提交成功', {
  mask: true,
  onSuccess: () => {
    history.go(-1);
  }
});

返回目录

Button

按钮

属性

<Button
  args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
  style={按钮style object, 默认无}
  className={按钮className string, 默认无, 基础'button'} // 尺寸样式'sm | lg | xl'
  disabled={是否禁用 bool, 默认false}
  onClick={点击项 func(args)}
  {...others}
>
  按钮内容
</Button>

示例

import Button from 'seedsui-react/lib/Button';

<Button className="lg">提交</Button>

返回目录

Calendar

日历

属性

<Calendar
  type={日历类型 string, 默认'month'} // week|month
  titleFormat={是否显示周数 string, 默认'YYYY年MM月DD日'} // 标题日期格式化 YYYY年MM月DD日 周E 第W周
  disableBeforeDate={禁用此前日期 date, 默认无}
  disableAfterDate={禁用此后日期 date, 默认无}
  verticalDrag={是否允许垂直拖动 bool, 默认true}
  defaultDate={默认选中日期 date, 默认new Date()}
  prevHTML={左箭头html string, 默认'&lt'}
  nextHTML={右箭头html string, 默认'&gt'}
  onChange={选中日期发生变化 func(date)}
  onClick={点击 func(date)}
  onError={非法操作,如选择禁用日期 func(date)}
/>

示例

import Calendar from 'seedsui-react/lib/Calendar';

onChangeCalendar = (s) => {
  // 记录滑动后切换的日期
  console.log('滑动选中:' + s.activeDate.format('YYYY-MM-DD'))
}
onClickCalendar = (s) => {
  // 记录点击的选中日期, 用于滑动不切换日期用
  console.log('点击选中:' + s.selectedDate.format('YYYY-MM-DD'))
}
showMonth = () => {
  this.$calendar.instance.showMonth();
}
showWeek = () => {
  this.$calendar.instance.showWeek();
}
showToday = () => {
  this.$calendar.instance.setToday();
}
showReset = () => {
  this.$calendar.instance.setDefaultDate();
}

const defaultDate = new Date()
defaultDate.nextMonth();

<Calendar
  ref={el => {this.$calendar = el;}}
  type="week"
  titleFormat="YYYY年MM月DD日 周EE 第W周"
  disableBeforeDate={new Date()}
  onChange={this.onChangeCalendar}
  onClick={this.onClickCalendar}
  defaultDate={defaultDate}
/>
<a style={{margin: '8px'}} className="button lg bg-1" onClick={this.showMonth}>月</a>
<a style={{margin: '8px'}} className="button lg bg-2" onClick={this.showWeek}>周</a>
<a style={{margin: '8px'}} className="button lg bg-3" onClick={this.showToday}>今天</a>
<a style={{margin: '8px'}} className="button lg bg-4" onClick={this.showReset}>重置</a>

返回目录

Card

卡片

属性

<Card
  style={卡片style object, 默认无}
  className={卡片className string, 默认无, 基础'card'}
  onClick={点击项 func(args)}
  {...others}
>
卡片内容
</Card>

示例

import Card from 'seedsui-react/lib/Card';

<Card>
卡片内容
</Card>

返回目录

Carrousel

轮播

属性

<Carrousel
  style={容器style object, 默认无}
  className={容器className string, 默认无, 基础:list模式下为'carrousel-container'|page模式下为'carrousel-page'}
  
  slideParams={div左线条属性 object, 默认无, 基础{className: 'carrousel-slide'}}

  pagination={是否显示小点点 bool | node, 默认false} // 传node为自定义分页
  paginationParams={div小点点容器属性 object, 默认无, 基础{className: 'carrousel-pagination'}}

  stopPropagation={是否阻止点击事件的传播 bool, 默认false} // 当touch事件与FastClick插件冲突时可设为false
  loop={是否循环显示 bool, 默认false}
  activeIndex={默认选中第几块 number, 默认0}
  
  autoplay={自动播放毫秒数 number, 默认0} // 设置大于0的数值才会触发自动播放
  slidesPerView={一屏显示几块 number, 默认1}
  defaultSrc={默认图片 string, 默认'//res.waiqin365.com/d/seedsui/carrousel/default.png'}
  list={轮播图 array, 默认无} // 格式: [{bg: 'xx', img: 'xx', iconParams: {}, caption: 'xx'}]
  speed={动画过渡的速度 number, 默认300}
  enableOnChange={手动调用slideTo方法是否触发onChange事件回调 bool, 默认true}
  onChange={轮播时事件回调 func()}
  onClick={点击块 func(item, index, s, e)}
  
  children={wrapper容器内子元素 node, 默认无}

  {...others}
>
<div>轮播页时, 用此div, 轮播图则使用list属性</div>
</Carrousel>

示例

import Calendar from 'seedsui-react/lib/Calendar';
// 轮播页
onCarrouselChange = (e) => {
  this.props.changeActiveTab(e.activeIndex);
  if (e.activeIndex === 1) { // 加载第二页内容
    if (!this.sndLoaded) {
      this.loadSnd(false);
      this.sndLoaded = true;
    }
  }
}
<Carrousel style={{top: '84px'}} onChange={this.onCarrouselChange} activeIndex={this.props.tabActiveIndex}>
  <Page>第一页</Page>
  <Page>第二页</Page>
</Carrousel>
// 轮播图
<Carrousel list={imgsList} style={{height: document.getElementById('root').clientWidth + 'px'}} pagination loop/>

返回目录

Chat

聊天框

属性

<Chat
  args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
  style={容器style object, 默认无}
  className={容器className string, 默认无, 基础'chat'}
  onClick={点击聊天框 func()}

  showAvatar={是否显示照片 bool, 默认false}
  avatarClassName={照片className string, 默认'chat-avatar'}
  avatarStyle={照片style object, 默认无}
  avatarSrc={照片src string, 默认无}
  avatarAfter={照片后元素 node, 默认无}
  onClickAvatar={点击照片 func()}

  author={用户名称 string, 默认无}
  authorClassName={用户名称className string, 默认无, 基础'chat-author'}
  authorStyle={用户名称style object, 默认无}

  contentClassName={内容className string, 默认无, 基础'chat-content'}
  contentStyle={内容style object, 默认无}
  onClickContent={点击内容 func()}
>
内容
</Chat>

示例

import Chat from 'seedsui-react/lib/Chat';

<Chat>
内容
</Chat>

返回目录

Checkbox

复选框

属性

<Checkbox
  args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
  style={容器style object, 默认无}
  className={容器className string, 默认无, 基础'checkbox-box'}
  onClick={点击复选框 func(checked, args)}

  name={复选框name string, 默认无}
  value={复选框value string, 默认无}
  checked={是否选中 bool, 默认false}
  disabled={是否禁用 bool, 默认false}

  caption={复选框标题 string, 默认无}
  captionClassName={复选框标题className string, 默认无, 基础'checkbox-caption'}
  captionStyle={复选框标题style object, 默认无}
/>

示例

import Checkbox from 'seedsui-react/lib/Checkbox';

onClick = (checked) => {
  this.props.checkChange(!checked)
}

const {checked} = this.props;
<Checkbox caption="全选" checked={checked} onClick={this.onClick}/>

返回目录

Close

关闭删除图标

属性

<Close
  style={图标style object, 默认无}
  className={图标className string, 默认'close-icon close-icon-clear size18', 基础'icon'}
  {...others}
/>

示例

import Close from 'seedsui-react/lib/Close';

<Close onClick={this.onClear} className="cancel"/>

返回目录

Container

主体内容 , 通常与Page、Header一起使用, 位于Header下面的位置

属性

<Container
  style={容器style object, 默认无}
  className={容器className string, 默认无, 基础'container'}
  lazyLoad={是否启用懒人加载 bool, 默认false} // 只会在didMount时执行lazyLoadInstance.load();
  // 异步加载时需要使用:
  // ref="$container" 和 ref={(el) => {this.$container = el;}}, this.refs.$container === this.$container
  // this.refs.$container.state.lazyLoadInstance.load();或this.$container.state.lazyLoadInstance.load();
  
  {...others}
>
主体内容
</Container>

示例

import Page from 'seedsui-react/lib/Page';
import Header from 'seedsui-react/lib/Header';
import Container from 'seedsui-react/lib/Container';

<Page>
  <Header>
    头部
  </Header>
  <Container>
    中部
  </Container>
</Page>

返回目录

Counter

计数器

属性

<Counter
  style={容器style object, 默认无}
  className={容器className string, 默认无, 基础'container'}
  duration={动画时长 number, 默认5000}
  from={开始数字 number, 默认0}
  to={结束数字 number, 默认10}
  suffix={数字不变的后缀 string, 默认无} // 如设置为/10, 则显示为0/10
  autoplay={是否自动播放 bool, 默认true}
  {...others}
/>

ref方法

play() // 播放

示例

import Counter from 'seedsui-react/lib/Counter';

onClick = () => {
  this.refs.$counter.play();
}

<Counter to={500} autoplay={false} ref="$counter"/>

返回目录

Dialog

弹出框

属性

<Dialog
  portal={传送dom object, 默认document.getElementById('root')}
  args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
  show={*显隐 bool, 默认false}

  animation={动画 string, 默认'fade'}  // slideLeft | slideRight | slideUp | slideDown | zoom | fade
  duration={动画时长 number, 默认见seedsui-variable.less}
  isClickMaskHide={是否点击遮罩隐藏 bool, 默认true}
  onClickMask={点击遮罩 func(s)}
  onShowed={显示完成 func(s)}
  onHid={隐藏完成 func(s)}

  maskClassName={遮罩className string, 默认无, 基础'mask dialog-mask'}
  maskStyle={遮罩style object, 默认无}

  className={容器className string, 默认无, 基础'container'}
  style={容器style object, 默认无}
>
</Dialog>

示例

import Dialog from 'seedsui-react/lib/Dialog';

<Dialog show={this.state.showDialog} animation="zoom" duration={200} style={{width: '80%', height: '80%', backgroundColor: 'white', borderRadius: '10px'}}>
弹出框内容
</Dialog>

返回目录

Dot

小圆点

属性

<Dot
  style={图标style object, 默认无}
  className={图标className string, 默认无, 基础'dot'}
  size={宽高大小px number, 默认无}
  {...others}
/>

示例

import Dot from 'seedsui-react/lib/Dot';

<Dot size={8}/>

返回目录

Dragrefresh

下拉刷新

属性

<Dragrefresh
  style={容器style object, 默认无}
  className={容器className string, 默认无, 基础'dot'}

  threshold={头部下拉的触发位置 number, 默认50}
  end={头部下拉的结束位置 number, 默认200}
  endRefresh={滑动到底后刷新 bool, 默认false}
  moveTimeout={滑动超时,解决ios手指滑动到原生tabbar上,不触发onTouchEnd number, 默认0}
  onTopRefresh={头部刷新 func(s)}
  onTopComplete={头部刷新完成 func(s)}
  onBottomRefresh={底部刷新 func(s)}
  onBottomComplete={底部刷新完成 func(s)}

  hasMore={状态标识 string, 默认-2} // 1刷新完成 | 0没有更多数据 | -1网络错误 | 404找不到数据 | -2空闲但展现底部转圈

  showNoData={是否允许暂无数据 bool, 默认false}
  noDataParams={无数据时的Notive组件属性 object, 默认无}

  lazyLoad={是否启用懒人加载 bool, 默认false} // 每当didUpdate时会执行lazyLoadInstance.load();

  onScroll={滚动事件 func(e)}
>
内容
</Dragrefresh>

示例

import Dragrefresh from 'seedsui-react/lib/Dragrefresh';

this.state = {
  hasMore: -2, // hasMore: 0.无更多数据, 1.头部刷新完成, 2.底部刷新完成, 404.一条数据都没有, -1. 加载错误, -2. 重置状态,为了后面可以更新DOM
  list: []
}
componentDidMount () {
  this.loadData();
}

// 下拉刷新配置
onTopRefresh = () => {
  console.log('头部刷新');
  this.loadData(false);
}
onBottomRefresh = () => {
  console.log('底部刷新');
  this.loadData(true);
}
loadData = (isNext) => {
  let list = this.state.list;
  let hasMore = -2; // hasMore: 0.无更多数据, 1.头部刷新完成, 2.底部刷新完成, 404.一条数据都没有, -2. 重置状态,为了后面可以更新DOM
  this.setState({
    hasMore: -2 // 先重置状态, 后面再会触发react更新
  });
  setTimeout(() => {
    let serList = [];
    for (let i = 1; i <= 20; i++) {
      serList.push(i);
    }
    if (isNext) { // 下一页
      list = list.concat(serList);
      hasMore = 2;
    } else { // 第一页
      list = serList;
      hasMore = 1;
    }
    if (list.length >= 100) {
      hasMore = 0;
    }
    // 更新DOM
    this.setState({
      list,
      hasMore
    });
  }, 1000);
}

<Dragrefresh
  moveTimeout={1000}
  endRefresh
  ref={(el) => {this.$elDrag = el;}}
  hasMore={this.state.hasMore}
  onTopRefresh={this.onTopRefresh}
  onBottomRefresh={this.onBottomRefresh}
>
  {this.state.list.map((item, index) => {
    return <div className="flex flex-middle" style={{height: '44px'}} key={index}>{item}</div>
  })}
</Dragrefresh>

返回目录

Dropdown

下拉菜单

属性

<Dropdown
  portal={弹出框传送至dom object, 默认document.getElementById('root')}
  top={头部距离 number, 默认0}
  disabled={是否禁用 bool, 默认false}
  onChange={选中菜单发生变化 func([{id: '', caption: ''}])}
  list={菜单 array, 默认无} // 格式:[{id: '', name: '分类', data: [{id: '1',name: '测试数据1',children:[]}]}]
/>

示例

import Dropdown from 'seedsui-react/lib/Dropdown';

this.state = {
  items: [{"id":"","name":"分类","data":[{"id":"","name":"全部","children":[]},{"id":"7938034417512813758","name":"饮料","children":[{"id":"4622400720177680517","name":"碳酸饮料"},{"id":"5800049423243362222","name":"茶饮料"},{"id":"5789432343240798823","name":"功能饮料"},{"id":"6413548566139705252","name":"饮用水"},{"id":"6936207795217715766","name":"中草药饮料"},{"id":"8746408135758103957","name":"蛋白质饮料"},{"id":"7268945622944992066","name":"果味饮料"},{"id":"9138462844675316911","name":"咖啡"}]},{"id":"7746459719734369628","name":"零食","children":[{"id":"9134066222295231258","name":"蜜饯果干"},{"id":"5394487194098598325","name":"坚果炒货"},{"id":"9070533848545878912","name":"早餐面包"},{"id":"5240328190253910837","name":"糖巧果冻"}]}]},{"id":"","name":"品牌","data":[{"id":"","name":"全部"},{"id":"其他","name":"其他"},{"id":"美汁源","name":"美汁源"},{"id":"可口","name":"可口"},{"id":"宏宝莱","name":"宏宝莱"},{"id":"康师傅","name":"康师傅"},{"id":"百事","name":"百事"},{"id":"卫岗","name":"卫岗"},{"id":"蒙牛","name":"蒙牛"},{"id":"伊利","name":"伊利"},{"id":"三只松鼠","name":"三只松鼠"}]},{"id":"","name":"筛选","data":[{"id":"","name":"全部"},{"id":"new","name":"新品"},{"id":"importance","name":"重点"}]}]
};

onChangeDropdown = (tabs) => {
  var items = Object.clone(this.state.items);
  tabs.forEach((item, index) => {
    items[index].id = item.id;
    items[index].name = item.name;
  });
  this.setState({
    items: items
  })
}

<Header>
  <Dropdown list={this.state.items} onChange={this.onChangeDropdown}/>
</Header>

返回目录

Emoji

表情弹出输入框

属性

<Emoji
  portal={弹出框传送至dom object, 默认document.getElementById('root')}
  args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
  autoFocus={自动获取焦点 bool, 默认false}

  value={值 string, 默认''}
  placeholder={占位文字 string, 默认''}

  isClickMaskHide={是否点击遮罩隐藏 bool, 默认true}
  onClickMask={点击遮罩 func(s)}

  maskStyle={遮罩style object, 默认无}
  maskClassName={遮罩className string, 默认无, 基础'mask emoji-mask'}

  style={容器style object, 默认无}
  className={容器className string, 默认无, 基础'emoji'}

  icon={图标dom node, 默认无}
  iconParams={Icon组件属性 object, 默认{className: 'notice-icon-nodata'}}
  
  onChange={值变化 func(value, args)}
  onSubmit={提交 func(value, args)}
/>

示例

import Emoji from 'seedsui-react/lib/Emoji';

this.state = {
  showEmoji: false,
  value: ''
}

onChange = (value) => {
  this.setState({
    value: value
  })
}

toggleEmoji = () => {
  this.setState((prevState) => {
    return {
      showEmoji: !prevState.showEmoji
    }
  })
}

<Emoji
  autoFocus
  show={this.state.showEmoji}
  onChange={this.onChange}
  value={this.state.value}
  onClickMask={this.toggleEmoji}
/>
<input type="button" value="显隐" onClick={this.toggleEmoji}/>

返回目录

Footer

底部内容 , 通常与Page、Header、Container一起使用

属性

<Footer
  style={容器style object, 默认无}
  className={容器className string, 默认无, 基础'container'}
  {...others}
>
底部内容
</Footer>

示例

import Page from 'seedsui-react/lib/Page';
import Header from 'seedsui-react/lib/Header';
import Footer from 'seedsui-react/lib/Footer';
import Container from 'seedsui-react/lib/Container';

<Page>
  <Header>
    头部
  </Header>
  <Container>
    中部
  </Container>
  <Footer>
    底部
  </Footer>
</Page>

返回目录

Grid

栅格

属性

<Grid
  args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
  type={类型 string, 默认无} // video和空
  preview={是否预览 bool, 默认true}
  lazyLoad={是否启用懒人加载 bool, 默认false}
  className={容器className string, 默认无, 基础'grid'}
  style={容器style object, 默认无}
  space={上下间距 number, 默认12}
  wing={左右间距 number, 默认12}
  col={一行列数 string | number, 默认3}
  showUpload={是否显示上传按钮 bool, 默认false}
  list={单元格 array, 默认[], 格式见下方示例}
  /* list: [{
    type: '',
    iconClassName: '',
    iconStyle: {},
    iconSrc: '',
    type: 'video | image(默认)',
    preview: true | false, // 是否支持预览,默认true
    thumb: '', // 缩略图
    src: '', // 预览地址
    caption: '',
    onClick: function() {},
    iconBadgeCaption: ''
  }] */
  cellClassName={单元格className string, 默认无, 基础'grid-cell'}
  cellStyle={单元格style object, 默认无}

  caption={标题文字 node, 默认无}
  captionStyle={标题style object, 默认无}
  captionClassName={标题className string, 默认无}

  sndcaption={副标题文字 node, 默认无}
  sndcaptionStyle={副标题style object, 默认无}
  sndcaptionClassName={副标题className string, 默认无}

  iconBoxStyle={图标容器style object, 默认无}
  iconBoxClassName={图标容器className string, 默认无, 基础'grid-iconbox'}

  iconClassName={图标className string, 默认无}
  iconStyle={图标style object, 默认无}
  iconDefaultImgClassName={懒人加载默认图标className string, 默认无}
  iconDefaultImgStyle={懒人加载默认图标style object, 默认无}

  iconBadgeClassName={徽章className string, 默认无}

  onClickCell={点击单元格 func(item, index, args)}
  onClickContent={点击图标容器 func(item, index, args)}
  onClickIcon={点击图标 func(item, index, args)}

  closeClassName={删除图标className string, 默认无}
  onClickDelete={点击删除 func(item, index, args)}

  onClickAdd={点击添加 func()}
>
<!-- 直接放子元素,grid将自动排列 -->
<div>菜单按钮1</div>
<div>菜单按钮2</div>
</Grid>

示例

import Grid from 'seedsui-react/lib/Grid';
const products = [
  {
    id: '1',
    iconSrc: 'http://image-test.waiqin365.com/8100630123350000887/bas_pd/201801/5066464767803150144.jpg?x-oss-process=style/zk320',
    caption: '冰红茶',
    sndcaption: '¥100.00'
  }
];
<Grid
  list={products}
  args={combine.ptype}
  onClickIcon={onClick}
  lazyLoad
  col="3"
  className="grid-bordered"
  space={15}
  iconBoxClassName="size100"
  iconClassName="size100"
  captionClassName="text-left nowrap2"
  captionStyle={{height: '38px', lineHeight: '20px', width: '100px'}}
  sndcaptionClassName="text-left nowrap"
  sndcaptionStyle={{height: '18px', width: '100px'}}
/>

返回目录

Group

分组

属性

<Group
  style={卡片style object, 默认无}
  className={卡片className string, 默认'border-tb', 基础'group'}
  onClick={点击 func(args)}
  {...others}
>
分组
</Group>

示例

import Group from 'seedsui-react/lib/Group';

<Group>
分组
</Group>

Handsign

签名

属性

<Handsign
  strokeStyle={签名颜色 string, 默认'#000'}
  lineWidth={签名线粗px number, 默认3}
  quality={存储时的图片质量 number, 默认0.92}
  suffix={图片保存类型 string, 默认'image/png'}
  width={宽度px number, 默认300} // 不能通过style设置宽度,否则canvas会错位
  height={高度px number, 默认300} // 不能通过style设置高度,否则canvas会错位
  style={签名面板style object, 默认无}
  className={签名面板className string, 默认无}
/>

示例

import Handsign from 'seedsui-react/lib/Handsign';

save = () => {
  if (this.$handsign.instance.blank()) {
    console.log('空白');
    return;
  }
  if (!this.$handsign.instance.isDrew) {
    console.log('没有画过');
    return;
  }
  const sign_pic = this.$handsign.instance.save();
  console.log(sign_pic);
}
clear = () => {
  this.$handsign.instance.clear()
}
drawBg = () => {
  this.$handsign.instance.drawBackgroundColor('#ff8800')
}

<Handsign ref={(el) => {this.$handsign = el;}} width={300} strokeStyle="#c72a1d" height={300}/>
<input type="button" value="绘制背景" onClick={this.drawBg}/>
<input type="button" value="保存" onClick={this.save}/>
<input type="button" value="清除" onClick={this.clear}/>

返回目录

Header

头部内容 , 通常与Page、Container一起使用

属性

<Header
  style={容器style object, 默认无}
  className={容器className string, 默认无, 基础'container'}
  {...others}
>
头部内容
</Header>

示例

import Page from 'seedsui-react/lib/Page';
import Header from 'seedsui-react/lib/Header';
import Footer from 'seedsui-react/lib/Footer';
import Container from 'seedsui-react/lib/Container';

<Page>
  <Header>
    头部
  </Header>
  <Container>
    中部
  </Container>
  <Footer>
    底部
  </Footer>
</Page>

返回目录

Icon

图标

属性

<Icon
  base={基础标签 string, 默认'icon'}
  // img: 返回<span><img class="icon-img"/></span>
  // pureImg: 返回<img class="icon-img"/>
  // icon: 返回<span><i class="icon-full"/></span>
  // pureIcon: 返回<i class="icon-full"/>
  baseClassName={基础className string, 默认无, 基础'icon'}
  className={图标className string, 默认无}
  style={图标style object, 默认无}
  lazyLoad={是否启用懒人加载 bool, 默认false}

  defaultImgClassName={懒人加载默认图标className string, 默认无, 基础icon时'icon-full', img时'icon-img'}
  defaultImgStyle={懒人加载默认图标style object, 默认无}
  src={图标地址 string, 默认无}

  badgeCaption={角标标题 number | string, 默认无}
  badgeClassName={角标className string, 默认无}
  badgeStyle={角标style object, 默认无}
  badgeLimit={角标位数限制 number, 默认2, 如:1000,将显示99+}
  badgeEllipsis={角标位数限制省略号 string, 默认'+'}
  
  onClickClose={点击删除 func(e)}
  closeClassName={关闭className string, 默认无}
  closeStyle={关闭style object, 默认无}
>
图标内容
</Icon>

示例

import Icon from 'seedsui-react/lib/Icon';

<Icon className="icon-edit size20"/>

返回目录

ImgMark

签名

属性

<ImgMark
  // 数据源
  src={图片地址或者base64 string, 默认无}
  data={标注数据 array, 默认无}
  // [
  //   {
  //     x1: 442,
  //     x2: 492,
  //     y1: 79,
  //     y2: 265,
  //     strokeStyle: 'red' // 可选
  //   }
  // ]
  // canvas样式
  isDrawSrc={是否连同背景一起绘制到canvas上 bool, 默认true}
  watermark={预览水印 string, 默认无}
  strokeStyle={标注颜色 string, 默认'#00ff00'}
  lineWidth={标注线粗px number, 默认3}
  quality={存储时的图片质量 number, 默认0.92}
  width={宽度px number, 默认无} // 宽度会根据调度等比例缩放,它只会影响canvas外层容器,并不会影响canvas
  height={高度px number, 默认300} // 不能通过style设置高度,否则canvas会错位
  style={标注面板style object, 默认无}
  className={标注面板className string, 默认无}

  preview={是否预览 bool, 默认true}
/>

示例

import ImgMark from 'seedsui-react/lib/ImgMark';

const result = {
	"skuList": [{
		"x1": 442,
		"x2": 492,
		"y1": 79,
		"y2": 265
	}, {
		"x1": 51,
		"x2": 103,
		"y1": 94,
		"y2": 263
	}, {
		"x1": 221,
		"x2": 269,
		"y1": 774,
		"y2": 948
	}, {
		"x1": 64,
		"x2": 110,
		"y1": 293,
		"y2": 473
	}, {
		"x1": 598,
		"x2": 643,
		"y1": 283,
		"y2": 468
	}, {
		"x1": 251,
		"x2": 297,
		"y1": 296,
		"y2": 472
	}, {
		"x1": 266,
		"x2": 312,
		"y1": 89,
		"y2": 265
	}, {
		"x1": 198,
		"x2": 242,
		"y1": 294,
		"y2": 474
	}, {
		"x1": 311,
		"x2": 355,
		"y1": 84,
		"y2": 265
	}, {
		"x1": 646,
		"x2": 688,
		"y1": 287,
		"y2": 466
	}, {
		"x1": 155,
		"x2": 196,
		"y1": 295,
		"y2": 473
	}, {
		"x1": 84,
		"x2": 129,
		"y1": 572,
		"y2": 720
	}, {
		"x1": 431,
		"x2": 475,
		"y1": 575,
		"y2": 721
	}, {
		"x1": 219,
		"x2": 262,
		"y1": 569,
		"y2": 720
	}, {
		"x1": 131,
		"x2": 174,
		"y1": 573,
		"y2": 721
	}, {
		"x1": 176,
		"x2": 218,
		"y1": 572,
		"y2": 720
	}, {
		"x1": 137,
		"x2": 180,
		"y1": 810,
		"y2": 947
	}, {
		"x1": 388,
		"x2": 430,
		"y1": 578,
		"y2": 719
	}, {
		"x1": 587,
		"x2": 627,
		"y1": 808,
		"y2": 948
	}, {
		"x1": 263,
		"x2": 303,
		"y1": 578,
		"y2": 717
	}, {
		"x1": 355,
		"x2": 401,
		"y1": 144,
		"y2": 261
	}, {
		"x1": 423,
		"x2": 466,
		"y1": 356,
		"y2": 473
	}, {
		"x1": 382,
		"x2": 422,
		"y1": 355,
		"y2": 471
	}, {
		"x1": 672,
		"x2": 712,
		"y1": 148,
		"y2": 254
	}, {
		"x1": 552,
		"x2": 596,
		"y1": 389,
		"y2": 466
	}, {
		"x1": 512,
		"x2": 550,
		"y1": 633,
		"y2": 721
	}, {
		"x1": 589,
		"x2": 627,
		"y1": 633,
		"y2": 719
	}, {
		"x1": 472,
		"x2": 507,
		"y1": 865,
		"y2": 956
	}, {
		"x1": 468,
		"x2": 510,
		"y1": 389,
		"y2": 467
	}, {
		"x1": 553,
		"x2": 587,
		"y1": 632,
		"y2": 720
	}, {
		"x1": 544,
		"x2": 585,
		"y1": 810,
		"y2": 949
	}, {
		"x1": 217,
		"x2": 266,
		"y1": 86,
		"y2": 271
	}, {
		"x1": 580,
		"x2": 625,
		"y1": 172,
		"y2": 255
	}, {
		"x1": 403,
		"x2": 440,
		"y1": 175,
		"y2": 259
	}, {
		"x1": 510,
		"x2": 551,
		"y1": 391,
		"y2": 465
	}, {
		"x1": 324,
		"x2": 380,
		"y1": 289,
		"y2": 471
	}, {
		"x1": 348,
		"x2": 388,
		"y1": 576,
		"y2": 721
	}, {
		"x1": 507,
		"x2": 543,
		"y1": 860,
		"y2": 950
	}, {
		"x1": 628,
		"x2": 666,
		"y1": 630,
		"y2": 720
	}, {
		"x1": 305,
		"x2": 346,
		"y1": 581,
		"y2": 720
	}, {
		"x1": 127,
		"x2": 195,
		"y1": 76,
		"y2": 263
	}, {
		"x1": 628,
		"x2": 669,
		"y1": 171,
		"y2": 255
	}, {
		"x1": 98,
		"x2": 135,
		"y1": 847,
		"y2": 946
	}, {
		"x1": 182,
		"x2": 217,
		"y1": 837,
		"y2": 943
	}, {
		"x1": 538,
		"x2": 578,
		"y1": 177,
		"y2": 258
	}, {
		"x1": 493,
		"x2": 536,
		"y1": 173,
		"y2": 259
	}, {
		"x1": 212,
		"x2": 255,
		"y1": 1112,
		"y2": 1205
	}, {
		"x1": 294,
		"x2": 351,
		"y1": 764,
		"y2": 939
	}]
};

const result1 = {
	"skuList": [{
		"x1": 442,
		"x2": 492,
		"y1": 79,
		"y2": 265
	}, {
		"x1": 51,
		"x2": 103,
		"y1": 94,
		"y2": 263
  }]
};

const result2 = {
	"skuList": [{
		"x1": 493,
		"x2": 536,
		"y1": 173,
		"y2": 259
	}, {
		"x1": 212,
		"x2": 255,
		"y1": 1112,
		"y2": 1205
	}, {
		"x1": 294,
		"x2": 351,
		"y1": 764,
		"y2": 939
	}]
};

this.state = {
  data: []
};

onChangeData = () => {
  this.setState({
    data: result.skuList
  })
}
onChangeData1 = () => {
  this.setState({
    data: result1.skuList
  })
}
onChangeData2 = () => {
  this.setState({
    data: result2.skuList
  })
}
  
<ImgMark
  watermark="//res.waiqin365.com/d/common_mobile/images/placeholder/watermark.png"
  height={300}
  src="http://image-test.waiqin365.com/6692513571099135446/sku/201809/20180911195747712_05105130_CAMERA_21001006280.jpg" // 示例中,图片跨域请用cross插件解决
  data={this.state.data}
/>
<input type="button" value="全部" onClick={this.onChangeData}/>
<input type="button" value="切换1" onClick={this.onChangeData1}/>
<input type="button" value="切换2" onClick={this.onChangeData2}/>

返回目录

ImgLazy

懒人加载 , 主要为了解决图片过多, 造成网络阻塞的问题, 一般采用的是滚动加载, 并在页面加载完成后, 执行滚动加载方法load()

对象实例

var imglazy = new ImgLazy({
  overflowContainer: el, // 滚动区域, 滚动加载时需要用到, 默认document.body
  load: 'scroll', // scroll 滚动加载 | queue 队列加载 | all 全部加载
  threshold: 300, // 滚动加载时, 上下扩展px加载
  loadAttr: 'data-load-src', // 加载地址
  errorAttr: 'data-error-src', // 错误地址
  completeAttr: 'data-complete' // 完成加载, data-complete=0代表加载错误, =1代码加载正确
});

对象方法

load(); // 加载图片, load为scroll时加载可见区域, queue时队列加载完所有图片, all时加载所有图片

示例

import ImgLazy from 'seedsui-react/lib/ImgLazy';

// 懒人加载
this.setState({
  lazy: new ImgLazy({
    overflowContainer: this.$elDrag.$el
  })
});

// 在页面加载完成的时候
this.state.lazy.load();

返回目录

ImgUploader

图片上传

属性

<ImgUploader
  className={容器className string, 默认无}
  style={容器style object, 默认无}

  caption={标题文字 node, 默认无}
  captionStyle={标题style object, 默认无}
  captionClassName={标题className string, 默认无}
  list={内容列表 array, 默认[], 格式如下:}
  // [{
  //   id: '',
  //   src: '',
  //   thumb: ''
  // }]
  enableSafe={是否启动安全模式 object, 默认无} // 安全模式, 指一次传一张
  max={最大选择数 string | number, 默认5}
  sourceType={上传类型 array, 默认['album', 'camera']}
  sizeType={压缩 array, 默认['compressed']} // ['original', 'compressed']

  showUpload={是否显示上传按钮 bool, 默认false}
  showDelete={是否显示删除按钮 bool, 默认false}
  readOnly={是否只读 bool, 默认false}

  showCount={标题是否显示上传个数 bool, 默认false}
  watermark={增加水印 object, 默认无, 格式如下:} // 订货和外勤客户端专用
  /* 订货: {
    orderNo: 'xx', // 编号
    submitName: 'xx', // 提交人
    customerName: 'xx', // 客户
    cmLocation: '118.730515, 31.982473', // 位置算偏差
    isWaterMark: '1', // 是否启用水印
  } */
  /* 外勤: {
    photoType: 'xx', // 水印名称
    customerName: 'xx', // 客户名
  } */
   
  onChange={照片发生变化 func(list, {op: 'chooseSuccess|uploadsSuccess|deleteSuccess'})}
  onChooseSuccess={照片选择完成 func(list)}
  onUploadsSuccess={照片上传完成 func(list)}
  onDeleteSuccess={照片删除完成 func(list)}
/>

示例

import ImgUploader from 'seedsui-react/lib/ImgUploader';

this.state = {
  list: [
    {
      id: '',
      src: '',
      thumb: ''
    }
  ]
}

onPhotoChange = (list) => {
  this.setState({
    list: list
  })
}
onChooseBefore = () => {
  return new Promise((relsove) => {
    console.log('1');
    relsove(false);
  });
}

<ImgUploader
  onChooseBefore={this.onChooseBefore}
  caption="上传照片"
  showUpload
  list={this.state.list}
  onChange={this.onPhotoChange}
/>

返回目录

IndexBar

索引栏 , IndexBar组件默认fixed定位, 并在父组件中寻找data-indexbar-name属性的元素, 与indexs对应, 滑动或点击切换时, 修改父组件的scrollTop, 以达到滚动的效果

属性

<IndexBar
  overflowContainer={滚动区域 any, 默认document.body}
  parent={DOM注入容器 any, 默认document.body}
  className={索引栏className string, 默认无, 基础'indexbar'}
  style={索引栏style object, 默认无}
  // indexs与父组件中所有data-indexbar-name元素对应即可
  indexs={索引集合 array, 默认['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']}
/>

示例

import Container from 'seedsui-react/lib/Container';
import IndexBar from 'seedsui-react/lib/IndexBar';
<Container>
  <ul>
    <li data-indexbar-name="A">A</li>
    <li>阿华</li>
    <li>阿敏</li>
    <li>阿全</li>
    <li>阿达</li>
    <li data-indexbar-name="B">B</li>
    <li>白起</li>
    <li>白旭</li>
    <li>冰冰</li>
    <li data-indexbar-name="C">C</li>
    <li>曹操</li>
    <li>曹鸣</li>
    <li>曹捷</li>
    <li>陈真</li>
    <li>陈进</li>
    <li>陈明</li>
    <li>陈伟</li>
    <li>陈文</li>
    <li>陈晓</li>
    <li>陈娟</li>
    <li>成勇</li>
    <li>成婷</li>
    <li>成龙</li>
    <li data-indexbar-name="D">D</li>
    <li>大成子</li>
    <li>大舅子</li>
    <li>戴笠</li>
    <li>戴坤</li>
    <li>戴成虎</li>
    <li>邓小平</li>
    <li>邓稼先</li>
    <li>邓文迪</li>
    <li>邓等</li>
    <li>狄仁杰</li>
    <li>狄弟</li>
    <li>董文华</li>
    <li>董事</li>
    <li data-indexbar-name="F">F</li>
    <li>樊哙</li>
    <li>樊心</li>
    <li>冯晨晨</li>
    <li>冯敬尧</li>
    <li>冯成虎</li>
    <li>冯小平</li>
    <li>冯稼先</li>
    <li>冯文迪</li>
    <li>冯晨</li>
    <li>福尔杰</li>
    <li>福尔康</li>
    <li>福文华</li>
    <li>方文山</li>
  </ul>
  <IndexBar style={{top: '44px'}}/>
</Container>

返回目录

IndexArea

多行文本框 , 默认高度见seedsui-variable.less中@input-area-height, 其它属性用法与InputText 文本框 组件一致

InputCity

城市选择框 , 其它属性用法与InputText 文本框 组件一致, 基于PickerCity 城市选择弹框组件

属性

<InputCity
  data={数据源 array, 默认内置数据源}
  dataKeyPropertyName={data数据key的属性名称 string, 默认'key'}
  dataValuePropertyName={data数据value的属性名称 string, 默认'value'}
  dataChildPropertyName={data数据child的属性名称 string, 默认'children'}
  // export default [
  //   {
  //     "value": "北京",
  //     "children": [
  //       {
  //         "value": "东城区",
  //         "key": "110101"
  //       }
  //     ]
  //   }
  // ]
  valueBindProp={值是否绑定props bool, 默认无} // 为true时只能通过props修改其value
  valueForKeys={选中key array, 默认无}
  split={分隔符 string, 默认'-'}
  type={城市类型 string, 默认'area'} // 'area' | 'city'
  onChange={值改变 func(value, option, args), 默认无}
  // Picker
  pickerMaskClassName={弹出框遮罩className string, 默认无}
  pickerMaskStyle={弹出框遮罩style object, 默认无}
  pickerClassName={弹出框className string, 默认无}
  pickerStyle={弹出框style object, 默认无}
  // 自定义Picker事件
  pickerShow={控制picker的显隐 bool, 默认无}
  onClickSubmit={点击picker确定按钮 func({target, activeOptions, activeText}), 默认无}
  onClickCancel={点击picker取消按钮 func({target}), 默认无}
  onClickMask={点击picker遮罩 func({target}), 默认无}
  {...others}
/>

示例

import InputCity from 'seedsui-react/lib/InputCity';

this.state = {
  value: ''
}

onChange = (value) => {
  this.setState({
    value: value
  });
}

<InputCity
  valueBindProp
  value={this.state.value}
  onChange={this.onChange}
  placeholder="请选择"
  className="border-b"
  pickerMaskStyle={{zIndex: '11'}}
  pickerMaskClassName="bg-white"
/>

返回目录

InputColor

颜色选择框 , 其它属性用法与InputText 文本框 组件一致

InputDate

日期选择框 , 其它属性用法与InputText 文本框 组件一致, 基于PickerDate 日期选择弹框组件

属性

<InputDate
  valueForKey={选中key string, 默认无}
  type={日期类型 string, 默认'date'} // 'date | month | time | datetime'
  split={分隔符 string, 默认'-'}
  onChange={值改变 func(value, option, args), 默认无}
  onError={错误 func({msg: ''}), 默认无}
  // Picker
  pickerMaskClassName={弹出框遮罩className string, 默认无}
  pickerMaskStyle={弹出框遮罩style object, 默认无}
  pickerClassName={弹出框className string, 默认无}
  pickerStyle={弹出框style object, 默认无}
  // 自定义Picker事件
  pickerShow={控制picker的显隐 bool, 默认无}
  onClickSubmit={点击picker确定按钮 func({target, activeOptions, activeText}), 默认无}
  onClickCancel={点击picker取消按钮 func({target}), 默认无}
  onClickMask={点击picker遮罩 func({target}), 默认无}
  {...others}
/>

示例

import InputDate from 'seedsui-react/lib/InputDate';

this.state = {
  date: ''
}

onChangeDate = (text) => {
  this.setState({
    date: text
  });
}

<InputDate
  valueBindProp
  min={new Date().format('yyyy-MM-dd')}
  value={this.state.date}
  onChange={this.onChangeDate}
  placeholder="请选择"
  className="border-b"
  pickerMaskStyle={{zIndex: '11'}}
/>

InputLocation

定位框 , 其它属性用法与InputText 文本框 组件一致

属性

<InputLocation
  locationingText={定位中显示文字 string, 默认'定位中...'}
  onClick={点击 func(value, args), 默认无}
  onChange={值改变 func(value, args), 默认无}
  {...others}
/>

InputNumber

数字输入框 , 其它属性用法与InputText 文本框 组件一致

InputPassword

密码输入框 , 其它属性用法与InputText 文本框 组件一致

InputPhone

手机输入框 , 其它属性用法与InputText 文本框 组件一致

InputPicker

选择框 , 其它属性用法与InputText 文本框 组件一致, 基于Picker 滚动选择弹框组件

属性

<InputPicker
  valueForKey={选中key number | string, 默认无}
  list={选择列表 array, 默认无}
  onChange={值改变 func(value, option, args), 默认无}
  // Picker
  pickerMaskClassName={弹出框遮罩className string, 默认无}
  pickerMaskStyle={弹出框遮罩style object, 默认无}
  pickerClassName={弹出框className string, 默认无}
  pickerStyle={弹出框style object, 默认无}
  // 自定义Picker事件
  pickerShow={控制picker的显隐 bool, 默认无}
  onClickSubmit={点击picker确定按钮 func({target, activeOptions, activeText}), 默认无}
  onClickCancel={点击picker取消按钮 func({target}), 默认无}
  onClickMask={点击picker遮罩 func({target}), 默认无}
  {...others}
/>

示例

import InputPicker from 'seedsui-react/lib/InputPicker';

this.state = {
  value: '',
  list: [
    {
      key: '1',
      value: '111'
    },
    {
      key: '2',
      value: '222'
    },
    {
      key: '3',
      value: '333'
    }
  ]
}

onChange = (value, option, args) => {
  console.log(value, option, args);
  this.setState({
    value: value
  });
}

<InputPicker
  list={this.state.list}
  valueBindProp
  value={this.state.value}
  onChange={this.onChange}
  placeholder="请选择"
  className="border-b"
  pickerMaskStyle={{zIndex: '11'}}
  pickerMaskClassName="bg-white"
/>

返回目录

InputPre

自增高输入框 , 其它属性用法与InputText 文本框 组件一致

InputRange

范围选择框

属性

<InputRange
  args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
  style={容器style object, 默认无}
  className={容器className string, 默认无}
  value={值 string | number, 默认'0'}
  min={最小值 string | number, 默认'0'}
  max={最小值 string | number, 默认'100'}
  step={步进值 string | number, 默认'1'}
  disabled={是否禁用 bool, 默认false}
  onChange={值改变 func(value, args), 默认无}
/>

示例

import InputRange from 'seedsui-react/lib/InputRange';

onChangeRange = (value, args) => {
  console.log(value, args);
}

<InputRange onChange={this.onChangeRange}/>

返回目录

InputSafe

安全强度检验框 , 展现三个状态: 弱、中、强

属性

<InputSafe
  style={容器style object, 默认无}
  className={容器className string, 默认无}
  value={值 string | number, 默认''}
/>

示例

import InputSafe from 'seedsui-react/lib/InputSafe';

<InputSafe value="Zk001"/>

InputSelect

选择框 , 其它属性用法与InputText 文本框 组件一致, 基于SelectPicker 选择弹框组件

属性

<InputSelect
  valueForKey={选中key number | string, 默认无}
  split={分隔符 string, 默认'-'}
  multiple={是否允许多选 bool, 默认false}
  list={选择列表 array, 默认无}
  onChange={值改变 func(value, options, args), 默认无}
  // Picker
  pickerMaskClassName={弹出框遮罩className string, 默认无}
  pickerMaskStyle={弹出框遮罩style object, 默认无}
  pickerClassName={弹出框className string, 默认无}
  pickerStyle={弹出框style object, 默认无}
  // 自定义Picker事件
  pickerShow={控制picker的显隐 bool, 默认无}
  onClickSubmit={点击picker确定按钮 func({target, activeOptions, activeText}), 默认无}
  onClickCancel={点击picker取消按钮 func({target}), 默认无}
  onClickMask={点击picker遮罩 func({target}), 默认无}
  {...others}
/>

示例

import InputSelect from 'seedsui-react/lib/InputSelect';

this.state = {
  value: '',
  list: [
    {
      key: '1',
      value: '111'
    },
    {
      key: '2',
      value: '222'
    },
    {
      key: '3',
      value: '333'
    }
  ]
}

onChange = (value, option, args) => {
  console.log(value, option, args);
  this.setState({
    value: value
  });
}

<InputSelect
  multiple
  list={this.state.list}
  valueBindProp
  value={this.state.value}
  onChange={this.onChange}
  placeholder="请选择"
  className="border-b"
  pickerMaskStyle={{zIndex: '11'}}
  pickerMaskClassName="bg-white"
/>

返回目录

InputStar

评分框

属性

<InputStar
  args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
  min={最小值 number, 默认0}
  max={最大值 number, 默认5}
  value={值 number, 默认0}
  onChange={值改变 func(value), 默认无}
  style={容器style object, 默认无}
  className={容器className string, 默认无, 基础'input-star'}
/>

示例

import InputStar from '../lib/InputStar';

this.state = {
  value: 0
}

onChange = (value) => {
  this.setState({
    value
  })
}

<InputStar
  min={2}
  value={this.state.value}
  onChange={this.onChange}
/>

返回目录

InputText

文本框 , 很多组件继承自此组件, 拥有此组件的属性, 如: InputPhone、InputPre、InputArea等

属性

<InputText
  args={事件参数 any, 如: [1,2, '$event'], '$event'代表点击元素的e}
  type={类型 string, 默认'text'} // text | password
  valueBindProp={值是否绑定props bool, 默认无} // 为true时只能通过props修改其value
  pre={是否启用自动扩充功能 bool, 默认无}
  // 容器
  style={容器style object, 默认无}
  className={容器className string, 默认无, 基础'attribute'}
  onClick={点击容器 func(value, args), 默认无}
    
  // 文本框
  name={文本框name string, 默认无}
  maxLength={文本框最大输入长度 string, 默认无}
  max={文本框最大值 string | number, 默认无} // 日期或者数字框专用
  min={文本框最小值 string | number, 默认无} // 日期或者数字框专用
  digits={文本框截取小数 string | number, 默认false} // 日期或者数字框专用
  readOnly={文本是否只读 bool, 默认无}
  disabled={文本是否禁用 bool, 默认无}

  inputStyle={文本框style object, 默认无}
  inputClassName={文本框className string, 默认无}
  value={值 string | number, 默认''}
  placeholder={占位符 string, 默认''}
  onChange={值改变 func(value, args), 默认无}
  onClickInput={点击文本框 func(value, args), 默认无}
  onBlur={失去焦点 func(value, args), 默认无}
  onFocus={获取焦点 func(value, args), 默认无}

  // 左右图标
  licon={左图标 node, 默认无}
  liconSrc={左图标地址 node, 默认无}
  liconClassName={左图标className string, 默认无, 基础'licon'}
  liconStyle={左图标style object, 默认无}
  onClickLicon={点击左图标 func(args), 默认无}
  liconLazyLoad={左图标懒人加载 bool, 默认无}

  ricon={右图标 node, 默认无}
  riconSrc={右图标地址 node, 默认无}
  riconClassName={右图标className string, 默认无, 基础'ricon'}
  riconStyle={右图标style object, 默认无}
  onClickRicon={点击右图标 func(args), 默认无}
  riconLazyLoad={右图标懒人加载 bool, 默认无}

  // 清除按钮
  clear={清除 bool | func('', args), 默认无}
  clearClassName={清除图标className string, 默认'ricon close-icon-clear size18'} // 见Close组件
  clearStyle={清除图标style object, 默认无}

  // 右侧内容
  rcaption={右侧内容 string, 默认无}
/>

示例

import InputText from 'seedsui-react/lib/InputText';

onChangeText = (value, args) => {
  console.log(value, args);
}

<InputText onChange={this.onChangeText}/>

InputWaiqin

外勤原生选择框 , 其它属性用法与InputText 文本框 组件一致, 外勤专用控件

属性

<InputWaiqin
  valueBindProp={值是否绑定props bool, 默认无} // 为true时只能通过props修改其value
  value={值 string | number, 默认无}
  valueForKey={选中key number | string, 默认无}
  chooseType={选择类型 string, 默认'getCustomer'} // getCustomer|getCustomerMore|getCustomerType|getCustomerArea|getCustomerAreaMore|getDepartment|getDepartmentMore|getContact|getContactMore|getGoods|getLocationMap
  chooseParams={选择参数 object, 默认会带上id-valueForKey和name-value, 配置如下:}
  // 【getCustomer与getCustomerMore 的 chooseParams】:
  // tradeType: PropTypes.string, // 1客户 2经销商 3门店,默认1
  // hiddenAdd: PropTypes.bool, // 是否显示添加按钮, 默认false
  // dms_type: PropTypes.string, // dms类型

  // 【getCustomerType】

  // 【getCustomerArea与getCustomerAreaMore】:

  // 【getDepartment与getDepartmentMore】:

  // 【getContact与getContactMore 的 chooseParams】:
  // aclType: PropTypes.string, // 0只能看到下属 不传或者其他的参数为全部人员,默认为空

  // 【getGoods】

  // 【getLocationMap 的 chooseParams】:
  // editable: PropTypes.string, // 是否可以标记位置, 1可标记
  // latlng: PropTypes.string // 经纬度, 只在editable为0时生效
  // title: PropTypes.string // 标题, 可不传
  onClick={点击 func(value, args), 默认无}
  onChange={值改变 func(value, option, args), 默认无}
  {...others}
/>

示例

import InputWaiqin from 'seedsui-react/lib/InputWaiqin';

this.state = {
  id: '',
  name: ''
}

onChange = (value, option) => {
  this.setState({
    id: option.id,
    name: value
  })
}

<InputWaiqin
  valueBindProp
  chooseType="getCustomer"
  chooseParams={{tradeType: '1'}}
  onChange={this.onChange}
  value={this.state.name}
  valueForKey={this.state.id}
  placeholder="客户单择"
  riconClassName="shape-arrow-right sm"
/>
<InputWaiqin
  valueBindProp
  chooseType="getContact"
  onChange={this.onChange}
  value={this.state.name}
  valueForKey={this.state.id}
  placeholder="全部员工"
  riconClassName="shape-arrow-right sm"
/>

返回目录

Legend

标题

属性

<Legend
  className={容器className string, 默认无, 基础'legend'}
>
标题
</Legend>

示例

import Legend from 'seedsui-react/lib/Legend';

<Legend>标题</Legend>

返回目录

Current Tags

  • 2.2.3                                ...           latest (7 days ago)

206 Versions

  • 2.2.3                                ...           7 days ago
  • 2.2.2                                ...           10 days ago
  • 2.2.1                                ...           10 days ago
  • 2.2.0                                ...           11 days ago
  • 2.1.9                                ...           11 days ago
  • 2.1.8                                ...           11 days ago
  • 2.1.7                                ...           11 days ago
  • 2.1.6                                ...           11 days ago
  • 2.1.5                                ...           13 days ago
  • 2.1.4                                ...           17 days ago
  • 2.1.3                                ...           19 days ago
  • 2.1.2                                ...           20 days ago
  • 2.1.1                                ...           a month ago
  • 2.1.0                                ...           a month ago
  • 2.0.9                                ...           a month ago
  • 2.0.8                                ...           a month ago
  • 2.0.7                                ...           a month ago
  • 2.0.6                                ...           2 months ago
  • 2.0.5                                ...           2 months ago
  • 2.0.4                                ...           2 months ago
  • 2.0.3                                ...           2 months ago
  • 2.0.2                                ...           2 months ago
  • 2.0.1                                ...           2 months ago
  • 2.0.0                                ...           2 months ago
  • 1.9.9                                ...           2 months ago
  • 1.9.8                                ...           2 months ago
  • 1.9.7                                ...           2 months ago
  • 1.9.6                                ...           2 months ago
  • 1.9.5                                ...           2 months ago
  • 1.9.4                                ...           2 months ago
  • 1.9.3                                ...           2 months ago
  • 1.9.2                                ...           3 months ago
  • 1.9.1                                ...           3 months ago
  • 1.9.0                                ...           3 months ago
  • 1.8.9                                ...           3 months ago
  • 1.8.8                                ...           3 months ago
  • 1.8.7                                ...           3 months ago
  • 1.8.6                                ...           3 months ago
  • 1.8.5                                ...           4 months ago
  • 1.8.4                                ...           4 months ago
  • 1.8.3                                ...           4 months ago
  • 1.8.2                                ...           4 months ago
  • 1.8.1                                ...           4 months ago
  • 1.8.0                                ...           4 months ago
  • 1.7.9                                ...           4 months ago
  • 1.7.8                                ...           4 months ago
  • 1.7.7                                ...           4 months ago
  • 1.7.6                                ...           5 months ago
  • 1.7.5                                ...           5 months ago
  • 1.7.4                                ...           5 months ago
  • 1.7.3                                ...           5 months ago
  • 1.7.2                                ...           5 months ago
  • 1.7.1                                ...           5 months ago
  • 1.7.0                                ...           5 months ago
  • 1.6.9                                ...           5 months ago
  • 1.6.8                                ...           5 months ago
  • 1.6.7                                ...           5 months ago
  • 1.6.6                                ...           5 months ago
  • 1.6.5                                ...           5 months ago
  • 1.6.4                                ...           5 months ago
  • 1.6.3                                ...           6 months ago
  • 1.6.2                                ...           6 months ago
  • 1.6.1                                ...           6 months ago
  • 1.6.0                                ...           6 months ago
  • 1.5.9                                ...           6 months ago
  • 1.5.8                                ...           6 months ago
  • 1.5.7                                ...           6 months ago
  • 1.5.6                                ...           6 months ago
  • 1.5.5                                ...           6 months ago
  • 1.5.4                                ...           6 months ago
  • 1.5.3                                ...           6 months ago
  • 1.5.2                                ...           6 months ago
  • 1.5.1                                ...           6 months ago
  • 1.5.0                                ...           6 months ago
  • 1.4.9                                ...           6 months ago
  • 1.4.8                                ...           6 months ago
  • 1.4.7                                ...           6 months ago
  • 1.4.6                                ...           6 months ago
  • 1.4.5                                ...           6 months ago
  • 1.4.4                                ...           6 months ago
  • 1.4.3                                ...           6 months ago
  • 1.4.2                                ...           6 months ago
  • 1.4.1                                ...           6 months ago
  • 1.4.0                                ...           6 months ago
  • 1.3.9                                ...           6 months ago
  • 1.3.8                                ...           6 months ago
  • 1.3.7                                ...           6 months ago
  • 1.3.6                                ...           6 months ago
  • 1.3.5                                ...           6 months ago
  • 1.3.4                                ...           6 months ago
  • 1.3.3                                ...           6 months ago
  • 1.3.2                                ...           6 months ago
  • 1.3.1                                ...           7 months ago
  • 1.3.0                                ...           7 months ago
  • 1.2.9                                ...           7 months ago
  • 1.2.8                                ...           7 months ago
  • 1.2.7                                ...           7 months ago
  • 1.2.6                                ...           7 months ago
  • 1.2.5                                ...           7 months ago
  • 1.2.4                                ...           7 months ago
  • 1.2.3                                ...           7 months ago
  • 1.2.2                                ...           7 months ago
  • 1.2.1                                ...           7 months ago
  • 1.2.0                                ...           7 months ago
  • 1.1.9                                ...           7 months ago
  • 1.1.8                                ...           7 months ago
  • 1.1.7                                ...           7 months ago
  • 1.1.6                                ...           7 months ago
  • 1.1.5                                ...           7 months ago
  • 1.1.4                                ...           7 months ago
  • 1.1.3                                ...           7 months ago
  • 1.1.2                                ...           7 months ago
  • 1.1.1                                ...           7 months ago
  • 1.1.0                                ...           7 months ago
  • 0.9.9                                ...           7 months ago
  • 0.9.8                                ...           7 months ago
  • 0.9.7                                ...           7 months ago
  • 0.9.6                                ...           7 months ago
  • 0.9.5                                ...           7 months ago
  • 0.9.4                                ...           7 months ago
  • 0.9.3                                ...           8 months ago
  • 0.9.2                                ...           8 months ago
  • 0.9.1                                ...           8 months ago
  • 0.9.0                                ...           8 months ago
  • 0.8.9                                ...           8 months ago
  • 0.8.8                                ...           8 months ago
  • 0.8.7                                ...           8 months ago
  • 0.8.6                                ...           8 months ago
  • 0.8.5                                ...           8 months ago
  • 0.8.4                                ...           8 months ago
  • 0.8.3                                ...           8 months ago
  • 0.8.2                                ...           8 months ago
  • 0.8.1                                ...           8 months ago
  • 0.8.0                                ...           8 months ago
  • 0.7.9                                ...           8 months ago
  • 0.7.8                                ...           8 months ago
  • 0.7.7                                ...           8 months ago
  • 0.7.6                                ...           8 months ago
  • 0.7.5                                ...           8 months ago
  • 0.7.4                                ...           8 months ago
  • 0.7.3                                ...           8 months ago
  • 0.7.2                                ...           8 months ago
  • 0.7.1                                ...           8 months ago
  • 0.7.0                                ...           8 months ago
  • 0.6.9                                ...           8 months ago
  • 0.6.8                                ...           8 months ago
  • 0.6.7                                ...           8 months ago
  • 0.6.6                                ...           8 months ago
  • 0.6.5                                ...           8 months ago
  • 0.6.4                                ...           8 months ago
  • 0.6.3                                ...           8 months ago
  • 0.6.2                                ...           8 months ago
  • 0.6.1                                ...           8 months ago
  • 0.6.0                                ...           8 months ago
  • 0.5.9                                ...           9 months ago
  • 0.5.8                                ...           9 months ago
  • 0.5.7                                ...           9 months ago
  • 0.5.6                                ...           9 months ago
  • 0.5.5                                ...           9 months ago
  • 0.5.4                                ...           9 months ago
  • 0.5.3                                ...           9 months ago
  • 0.5.2                                ...           9 months ago
  • 0.5.1                                ...           9 months ago
  • 0.5.0                                ...           9 months ago
  • 0.4.9                                ...           9 months ago
  • 0.4.8                                ...           9 months ago
  • 0.4.7                                ...           9 months ago
  • 0.4.6                                ...           9 months ago
  • 0.4.5                                ...           9 months ago
  • 0.4.4                                ...           9 months ago
  • 0.4.3                                ...           9 months ago
  • 0.4.2                                ...           9 months ago
  • 0.4.1                                ...           9 months ago
  • 0.4.0                                ...           9 months ago
  • 0.3.9                                ...           9 months ago
  • 0.3.8                                ...           9 months ago
  • 0.3.7                                ...           9 months ago
  • 0.3.6                                ...           9 months ago
  • 0.3.4                                ...           9 months ago
  • 0.3.3                                ...           9 months ago
  • 0.3.2                                ...           9 months ago
  • 0.3.1                                ...           9 months ago
  • 0.3.0                                ...           9 months ago
  • 0.2.9                                ...           9 months ago
  • 0.2.8                                ...           9 months ago
  • 0.2.7                                ...           9 months ago
  • 0.2.6                                ...           9 months ago
  • 0.2.5                                ...           9 months ago
  • 0.2.4                                ...           9 months ago
  • 0.2.3                                ...           9 months ago
  • 0.2.2                                ...           9 months ago
  • 0.2.1                                ...           9 months ago
  • 0.2.0                                ...           9 months ago
  • 0.1.9                                ...           9 months ago
  • 0.1.8                                ...           10 months ago
  • 0.1.7                                ...           10 months ago
  • 0.1.6                                ...           10 months ago
  • 0.1.5                                ...           10 months ago
  • 0.1.4                                ...           10 months ago
  • 0.1.3                                ...           10 months ago
  • 0.1.2                                ...           10 months ago
  • 0.1.1                                ...           10 months ago
  • 0.1.0                                ...           10 months ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 365
Last Day 0
Last Week 223
Last Month 142
Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |