Honeycomb Design

# 范围选择 RangePicker

# 基本用法

基本用法

日期初始化,type指定日期显示格式。值改变事件

<title>基本用法</title>
<describe>日期初始化,type指定日期显示格式。值改变事件</describe>
<template>
  <hc-range-picker style="width: 400px" type="date" @change="handleChange" clearable v-model="date"></hc-range-picker>
</template>
<script>
  export default {
    data: function () {
      return {
        date: [],
      };
    },
    methods: {
      handleChange: function (e) {
        console.log(e);
      },
    },
  };
</script>

# 设置快捷选项

设置快捷选项

通过shortcuts属性，设置可选日期范围，placeholder执行输入框提示文本

<title>设置快捷选项</title>
<describe>通过shortcuts属性，设置可选日期范围，placeholder执行输入框提示文本</describe>
<template>
   <hc-range-picker
    v-model="date"
    :placeholder="placeholder"
    style="width: 400px;"
    :shortcuts="shortcuts"
    @change="handleChange"
    ></hc-date-picker>
</template>
<script>
export default {
  data: function () {
    return {
      date: [],
     placeholder:['请选择开始日期', '请选择结束日期'],
     shortcuts:[
         {
           label: '最近一周',
           value: function() {
             var end = new Date()
             var start = new Date()
             start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
             return [start, end]
           },
         },
         {
           label: '最近一个月',
           value: function() {
             var end = new Date()
             var start = new Date()
             start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
             return [start, end]
           },
         },
       ]
    }
  },
  methods: {
    handleChange: function(e) {
      console.log(e)
    },
    disabledDateFn: function(time){
      return time.getTime() < Date.now() - 8.64e7;
    }
  }
}
</script>

# 数值范围选择

数值范围选择

通过type属性，设置控件为数值

<title>数值范围选择</title>
<describe>通过type属性，设置控件为数值</describe>
<template>
   <hc-range-picker
    v-model="numbers"
    style="width: 300px;"
    clearable
    type="number"
    @change="handleChange"
    ></hc-date-picker>
</template>
<script>
export default {
  data: function () {
    return {
      numbers: [],
    }
  },
  methods: {
    handleChange: function(e) {
      console.log(e)
    }
  }
}
</script>

# 数值范围选择 一键清空功能

数值范围选择

通过clearable属性，设置控件一键清空

<title>数值范围选择</title>
<describe>通过clearable属性，设置控件一键清空</describe>
<template>
  <hc-range-picker
    v-model="numbers"
    style="width: 300px;"
    type="number"
    clearable
    @change="handleChange"
    ></hc-date-picker>
</template>
<script>
export default {
  data: function () {
    return {
      numbers: [],
    }
  },
  methods: {
    handleChange: function(e) {
      console.log(e)
    }
  }
}
</script>

# 数值范围选择 后缀

数值范围选择

通过suffix属性或者slot插槽来设置后缀

<title>数值范围选择</title>
<describe>通过suffix属性或者slot插槽来设置后缀</describe>
<template>
  <div>
   <hc-range-picker
    v-model="numbers"
    style="width: 300px;"
    type="number"
    @change="handleChange"
    suffix="万元"
    clearable
    ></hc-date-picker>
  </div>
  <div>
   <hc-range-picker
    v-model="numbers"
    style="width: 300px;"
    type="number"
    @change="handleChange"
    >
    <template v-slot:suffix>
      <hc-icon type="back-section-moon"></hc-icon>
    </template>
    </hc-date-picker>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      numbers: [],
    }
  },
  methods: {
    handleChange: function(e) {
      console.log(e)
    }
  }
}
</script>

# 数值范围选择 附加属性

数值范围选择 附加属性props

通过props属性，设置控件的附加属性

<title>数值范围选择 附加属性props</title>
<describe>通过props属性，设置控件的附加属性</describe>
<template>
  <div>
   <hc-range-picker
    v-model="numbers"
    style="width: 300px;"
    type="number"
    :props="props"
    @change="handleChange"
    ></hc-range-picker>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      numbers: [],
      props: {
        allowEmpty: true
      }
    }
  },
  methods: {
    handleChange: function(e) {
      console.log(e)
    }
  }
}
</script>

# 属性及事件

# HcRangePicker 属性

属性 说明 类型 可选值 默认值
v-model 当前输入的范围值 array date , string , number --
placeholder 前后输入框的为空提示 array -- --
type 显示类型 string date, datetime, month, year, number date
disabled-date 设置禁用状态，参数为当前日期，要求返回 Boolean Function -- --
shortcuts 快捷选项 array -- --
clearable 允许清空，开启后可以一键清空选择值 boolean -- false
viewable 是否查看状态 boolean -- false
disabled 是否禁用 boolean -- false
format 格式化显示（目前只支持数值类型） NumberFormat -- --
props 附加属性（目前只支持数值类型） SpinnerProps -- --

# NumberFormat

interface NumberFormat {
  showThousandths?: boolean // 显示千分位，默认：true
  decimalPlaces?: number // 补充小数位数，默认：2
  rounding?: number // 数值保留位（四舍五入），默认：2
}

# SpinnerProps

// 详细属性见spinner组件
interface SpinnerProps {
  allowEmpty?: number // 允许为空，默认：false
}

# HcRangePicker 事件

事件名 说明 参数
change 值改变事件 e：当前输入值
select 选中日期发生改变但组件值未改变 e:当前输入值
focus 获取焦点事件 --
blur 失去焦点事件 --

← 自动完成 AutoComplete →