14.时钟圆环(midea-clock)

APP 内置组件，可直接在 template 中使用，不需要 import 导入和注册;

实例

基础用法

<template>
  <midea-clock
    class="midea-clock"
    :data="clockConfig"
    @mideaClockChange="mideaClockChange"
  ></midea-clock>
</template>
<script>
export default {
  data() {
    return {
      clockConfig: {
        step: 5,
        space: 1,
        title: "",
        times: [
          {
            startTime: "00:00",
            endTime: "08:00",
            color: "#36CACA",
            id: 1,
          },
          {
            startTime: "08:00",
            endTime: "16:00",
            color: "#4D88FE",
            id: 2,
          },
          {
            startTime: "16:00",
            endTime: "24:00",
            color: "#94CC79",
            id: 3,
          },
        ],
      },
    };
  },
  methods: {
    mideaClockChange(event) {
      const data = event.data;
    },
  },
};
</script>

Attributes:data

Prop	Type	Required	Default	Description
step	number	Y	-	滑动一次增减的分钟
space	number	Y	-	开始和结束最小间隔，写 1 就是一个滑块最小是 12:00-13:00
title	string	N	‘’	标题
times	Array	Y	-	需初始化的滑块配置

• 注 1 data.times

Prop	Type	Required	Default	Description
startTime	string	Y	-	滑块开始时间
endTime	string	Y	-	滑块结束时间
color	string	Y	-	滑块颜色
id	number	Y	-	唯一标识符

Events

事件名称	说明	回调参数
mideaClockChange	滑动完毕返回触发	data:[...times]