time-slot-controller

安装依赖

npm i time-slot-controller-vue3

使用

#mainjs


import timeSlotController  from 'time-slot-controller-vue3'
import 'time-slot-controller-vue3/time-slot-controller-vue3.css'
app.use(timeSlotController);

页面引入

<time-slot-controller :workday-time-list="workdayTimeList"
        @save="handleSave"></time-slot-controller>


// 定义工作日时间段数据
const workdayTimeList = ref([
    {
        end_time: "07:00",
        start_time: "00:00",
        enabled: true,
    },
    {
        end_time: "09:00",
        start_time: "07:00",
        enabled: false, // 不允许编辑
        msg: "分区一"//不允许编辑显示的文字提示
    },
    {
        end_time: "24:00",
        start_time: "09:00",
        enabled: true,
    },
]);

// 处理保存事件
function handleSave(timeperiodRef) {
    console.log('保存事件触发', timeperiodRef);
    // 在这里可以处理保存逻辑，例如提交数据到后端
}

效果