time-manage v0.1.2

TimeManage

使用说明文档

安装

使用 npm 安装 time-manage 组件：

npm install time-manage --save

全局注册组件

在项目中需要使用 time-manage 组件的页面或组件中，添加以下代码进行注册：

import Vue from 'vue'
import TimeManage from 'time-manage'

Vue.use(TimeManage);

属性(props)

• v-model: 可选，用于双向绑定管理组件中的数据
• :min-time: 可选，设置最短时间间隔，默认为15分钟
• :on-delete: 可选，拖拽删除事项时，触发的回调函数，返回false 则不进行删除，支持同步和异步返回
• :menus: 可选，右键菜单列表，用于选择添加的事项

用法示例

<template>
  <div>
    <time-manage 
      v-model="list" 
      :min-time="15" 
      :on-delete="onDeleteItem" 
      :menus="menus" 
      style="height:40px"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      menus: [
        { name: '开会', key: 'meeting', bgColor: '#EAF6FF' },
        { name: '学习', key: 'study', bgColor: '#EAF6FF' },
        { name: '锻炼', key: 'exercise', bgColor: '#EAF6FF' },
        { name: '休息', key: 'relax', bgColor: '#EAF6FF' },
      ]
    }
  },
  methods: {
    onDeleteItem(item) {
      // 处理删除按钮回调逻辑
    }
  }
}
</script>

描述

time-manage 组件是一个时间管理工具，用于帮助用户记录一天中每个事项所需的时间。可以通过下拉菜单选择需要进行时间管理的事项，并且支持拖拽删除不需要的事项。

注意事项

• v-model 属性为必需属性，不得省略。
• :min-time 属性可选，如果未设置，则默认最短间隔为15分钟。
• :on-delete 属性可选，如果未设置，则删除按钮不可点击。
• :menus 属性可选，在使用组件前需要将下拉列表数据传入组件中。
• 请确保正确导入组件和必需属性。