@beisen/time-picker

time-picker 使用说明

项目运行

1. cnpm install 或 npm install cnpm使用教程

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

time-picker参数

const props = {

  title: '测试时测试按错撒',

  /**
   * 时间的值
   */
  value: '', //

  /**
   * 初始默认时间
   * 默认日期的格式需与format格式相同
   */
  defaultValue: '',

  /**
   * 没有值的时候显示的内容
   */
  placeholder: '大家好',

  /**
   * 展示的时间格式
   * HH:mm:ss
   * HH:mm
   * mm:ss
   */
  format: 'HH:mm',

  /**
   * 禁用全部操作
   */
  disabled: false,
  /**
   * 是否隐藏
   */

  hidden: false,

  /**
   * 是否只读
   */
  readonly: true,

  /**
   * 是否必填
   */
  required: true,

  open: false,

  /**
   * 不可选择的小时范围
   */
  disabledHours: {

    /**
     * [开始时间(小时)，结束时间(小时)]
     * 范围：0~24
     */
    value: [22, 3],

    /**
     * 是否启用该限制规则
     * open  启用限制
     * close 关闭限制
     */
    limit: 'close'
  },

  /**
   * 不可选择的分钟范围
   */
  disabledMinutes: {

    /**
     * [开始时间(分钟)，结束时间(分钟)]
     * 范围：0~60
     */
    value: [
      [13, 18],
      [40, 10]
    ],

    /**
     * 是否启用该限制规则
     * open  启用限制
     * close 关闭限制
     */
    limit: 'open'
  },

  /**
   * 不可选择的秒范围
   * 配置规范同分钟
   */
  disabledSeconds: {
    value: [0, 30],
    limit: 'close'
  },

  /**
   * 外部包围输入框的大小
   * 可选：large  small
   */
  size: '',

  /**
   * 隐藏禁止选择的选项
   */
  hideDisabledOptions: false,

  /**
   * 显示状态 
   * search或''
   */
  showStatus: '',

  /**
   * 是否报错
   */
  errorStatus: false,

  /**
   * 报错信息
   */
  errorMsg: '出错了~~~！',
  helpMsg: 'dqwdqwdqw',

  /**
   * 控制外层close按钮是否显示
   * 非必需参数
   */
  closeBtn: false,

  /**
   * label位置
   * true  左边
   * false 上边
   */
  lablePos: true,

  /**
   * label中文字对齐方式
   * true  左对齐
   * false 右对齐
   */
  lableTxt: false,

  /**
   * 点击时间后回调
   */
  onChange: function (time, booldata) {
    console.log(time, booldata)
  },

  /**
   * 弹层出现回调
   */
  onOpen: function (bool) {
    console.log(bool)
  },

  /**
   * 弹层关闭回调
   */
  onClose: function (bool) {
    console.log(bool)
  },
  translation: {
      localeName: 'zh_CN' //多语言参数
  }
}

TimePicker调用方法

1.安装npm组件包

npm install @beisen/time-picker --save-dev

2.引用组件

import TimePicker from "@beisen/time-picker"

3. 传入参数

该参数为上述参数，传入方式使用:

render () {
    return (
      <TimePicker {...this.state} />
    )
  }