PeriodSelector 周期选择器

版本：1.14.0

开发：郑杰7

交互：苗任越

UI：江佳欢

规范：[已评审] http://10.33.43.73/BBG_UED/BUI_Design/bscs/v2.0/issues/14

# 安装

$ npm i @hui-pro/period-selector -D
# 或者
$ yarn add @hui-pro/period-selector --dev

# 引入

import PeriodSelector from '@hui-pro/period-selector';
import '@hui-pro/period-selector/theme/index.scss';
Vue.use(PeriodSelector);

# 基础用法 1

每日每周每月

添加 (1/20)

基础用法

<h-period-selector
  dayly-width="480px"
  weekly-width="370px"
  monthly-width="402px"
  v-model="periodValue"
></h-period-selector>

<script>
  export default {
    data() {
      return {
        periodValue: {
          type: 'dayly',
          value: [{ start: new Date(), end: new Date() }]
        }
      };
    }
  };
</script>

# 基础用法 2

每周每月

星期一星期二星期三星期四星期五星期六星期日

选择一项

<h-period-selector
  weekly-width="370px"
  monthly-width="402px"
  v-model="periodValue2"
  :period-list="periodList"
></h-period-selector>

<script>
  export default {
    data() {
      return {
        periodValue2: {
          type: 'weekly',
          value: ['星期三']
        },
        periodList: ['weekly', 'monthly']
      };
    }
  };
</script>

# 基础用法 3

星期一星期二星期三星期四星期五星期六星期日

选择一项

<h-period-selector
  weekly-width="370px"
  v-model="periodValue3"
  :period-list="periodList2"
  :period-label="false"
></h-period-selector>

<script>
  export default {
    data() {
      return {
        periodValue3: {
          type: 'weekly',
          value: ['星期一', '星期日']
        },
        periodList2: ['weekly']
      };
    }
  };
</script>

# 基础用法 4-自定义

日每日每周每月

添加 (1/20)

可自定义内容

<h-period-selector
  v-model="periodValue4"
  type="custom"
  :period-list="customList"
>
  <template slot-scope="scope">
    <div class="custom-period-container" v-show="scope.type=== 'day'">
      自定义内容
    </div>
  </template>
</h-period-selector>

<script>
  export default {
    data() {
      return {
        periodValue4: {
          type: 'dayly',
          value: []
        },
        customList: [
          {
            value: 'day',
            name: '日'
          },
          {
            value: 'dayly',
            name: '每日'
          },
          {
            value: 'weekly',
            name: '每周'
          },
          {
            value: 'monthly',
            name: '每月'
          }
        ]
      };
    }
  };
</script>

参数	说明	类型	可选值	默认值
period-list	选择要展示的类型	Array	-	['dayly', 'weekly', 'monthly']
period-label	是否展示标签	Boolean	-	true
day-limit-num	每日添加上限	Number	-	20
dayly-width	日类型容器的宽度	String	-	'100%'
weekly-width	周类型容器的宽度	String	-	'100%'
monthly-width	月类型容器的宽度	String	-	'100%'
type	类型	String	'normal':默认定义的 3 种，'custom':可在内容基础上自定义扩展	'100%'
picker-options	每日的时间配置项（详见 hui Time Picker 的 pickerOptions)	Object	-	{}

# PeriodSelector 周期选择器

# 安装

# 引入

# 基础用法 1

# 基础用法 2

# 基础用法 3

# 基础用法 4-自定义

# API

# Attributes

# slot-scope