Arrange

任务安排组件

示例

测试任务1

测试任务2

测试任务3

8:30

12:00

17:00

代码

<mao-arrange 
    :width="50" 
    arrangeBg="#d0f3f6"
    :arrangeList="arrangeList"
    :timeScale="timeScale"
    :itemStyle="{color: '#d0f3f6', fontSize: '1vw', background: 'rgba(3, 138, 214, 0.5)'}"
    :showTimeScale="true"
    @click="clickEvent" />

export default {
  data() {
    return {
      arrangeList: [
        {
          strTime: '8:30',
          endTime: '10:00',
          text: '测试任务1'
        },
        {
          strTime: '10:00',
          endTime: '11:00',
          text: '测试任务2'
        },
        {
          strTime: '12:00',
          endTime: '14:00',
          text: '测试任务3'
        }
      ],
      timeScale: ['8:30', '12:00', '17:00']
    }
  },
  methods: {
    clickEvent(e) {
      console.log('e', e);
    }
  }
}

Attributes

参数	说明	类型	是否必要	默认值
width	组件宽度	Number	false	60(vw)
arrangeHeight	组件高度	Number	false	4(vh)
arrangeBg	组件背景	String	false	——
arrangeList	工作安排时间	Array	true	——
timeScale	时间刻度	Array	false	——
showTimeScale	是否显示时间刻度	Boolean	false	true
itemStyle	自定义工作样式	Object	false	——

Events

事件名称	说明	回调参数
click	工作安排点击事件	{ strTime, endTime, text }