次日时间选择器

~~show me bug...~~

源码地址：gitee

组件地址：npm

版本更新 1.2.3

• bug 修复 单独使用时无法关闭列表的 bug

版本更新 1.2.1

• 新增 API：rangeFlag 是否验证范围选择器
• 新增 API：addStep 添加时较上一组新增多少分钟
• 新增 方法：formatPickerValue 格式化次日时间选择器的值
• 修改 多个方法逻辑
• 修改 示例
• 可单独引入 FanNextTimeSelectItem 组件

版本更新 1.1.3

• 删除 API：rangeList 时间选择器列表
• 删除 API：strict 严格模式
• 新增 API：range 是否显示范围选择器
• 新增 API：btnDisable 是否禁止显示+-按钮
• 新增 API：disable 是否禁用选择器
• 删除 $util 中需要用到的的方法：examineRange 校验次日时间选择器范围是否合法。
• 修改 $util 中需要用到的的方法：examine 校验次日时间选择器是否合法。
• 修改 示例

说明

• 本组件适用于使用了：vue2.x 和 element-ui 的家伙们。
• 本组件使用了 element-ui 部分组件：Message、Scrollbar、clickoutside 等
• 示例使用了 Dialog、Button 等

安装

// npm安装
npm i fan-next-time-select

如何使用

// main.js

import FanNextTimeSelectVue from "fan-next-time-select";
import util from "fan-next-time-select/util/index";
import "fan-next-time-select/css/index.css";

Vue.use(FanNextTimeSelectVue);
Vue.prototype.$util = util;

示例

<template>
	<div class="index-contaienr">
		<hr />
		<h3>时间段</h3>
		<fan-next-time-select
			id="fan"
			startText="上班时间"
			endText="下班时间"
			:list="list"
			:rangeFlag="true"
			:maxLength="3"
			@setFanNextTimeSelectList="getFanNextTimeSelectList" />

		<div
			v-for="(item, i) in list"
			:key="i">
			<div>
				时段{{ i + 1 }}： 上班时间范围：{{
					$util.fanDecode(item.startRange[0].startValue).text
				}}——{{
					$util.fanDecode(item.startRange[0].endValue).text
				}}，下班时间范围：{{
					$util.fanDecode(item.endRange[0].startValue).text
				}}——{{ $util.fanDecode(item.endRange[0].endValue).text }}
			</div>
		</div>

		<el-button
			type="info"
			@click="showDialog"
			>设置打卡时间范围</el-button
		>

		<el-button
			type="primary"
			@click="submit"
			>提交表单</el-button
		>

		<el-dialog
			title="设置打卡时间范围"
			v-if="dialogFormVisible"
			:visible.sync="dialogFormVisible">
			<fan-next-time-select
				startText="上班时间"
				endText="下班时间"
				:range="true"
				:list="listCopy"
				:btnDisable="true"
				:disable="true"
				:maxLength="3"
				@setFanNextTimeSelectList="getFanNextTimeSelectListCopy" />
			<div
				slot="footer"
				class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button
					type="primary"
					@click="dialogSubmit"
					>确 定</el-button
				>
			</div>
		</el-dialog>
		<hr />
		<h3>单个时间</h3>
		<FanNextTimeSelectItem
			:item="myItem"
			@setItem="getItem" />
		<hr />
	</div>
</template>

<script>
export default {
	data() {
		return {
			// 时间选择器内容数组
			list: [
				{
					// 开始时间与后端交互的值
					startValue: 9 * 60,
					// 结束时间与后端交互的值
					endValue: 18 * 60,
					// 开始时间最小值、最大值
					startRange: [{ startValue: 9 * 60 - 30, endValue: 9 * 60 + 30 - 1 }],
					// 结束时间最小值、最大值
					endRange: [{ startValue: 18 * 60 - 30, endValue: 18 * 60 + 30 - 1 }],
				},
			],
			// 用来设置打卡时间范围
			listCopy: [],
			// 用来判断组件是否合法
			listFlag: false,
			// 是否显示dialog
			dialogFormVisible: false,

			// 单个时间用到的内容=========================================================================================
			myItem: {
				// 开始时间与后端交互的值
				startValue: 9 * 60,
				// 结束时间与后端交互的值
				endValue: 18 * 60,
			},
		};
	},
	methods: {
		/**
		 * 获取次日时间选择器返回的值
		 * @param {array} value 次日时间选择器返回的值
		 */
		getFanNextTimeSelectList(value) {
			// 赋值
			value.pickers.forEach((item, i) => {
				this.$set(this.list, i, item);
			});
			this.listFlag = value.flag;
		},

		/**
		 * 获取次日时间选择器返回的值--复制版
		 * @param {array} value 次日时间选择器返回的值
		 */
		getFanNextTimeSelectListCopy(value) {
			// 赋值
			value.pickers.forEach((item, i) => {
				this.$set(this.listCopy, i, item);
			});
			this.listFlag = value.flag;
		},

		/**
		 * 显示dialog
		 */
		showDialog() {
			// 赋值
			this.listCopy = this.$util.deepCopy(this.list);

			// 打开dialog
			this.dialogFormVisible = true;
		},

		/**
		 * 提交打卡范围
		 */
		dialogSubmit() {
			// 验证
			if (!this.listFlag)
				return this.$message.error("时间选择器有误不允许提交哦");

			// 赋值
			this.listCopy.forEach((item, i) => {
				this.$set(this.list, i, item);
			});

			// 关闭dialog
			this.dialogFormVisible = false;
		},

		/**
		 * 提交表单
		 */
		submit() {
			// 验证
			if (!this.listFlag)
				return this.$message.error("当前时间选择器有误，不能提交");

			let data = this.$util.formatPickerValue(this.list); // 最终用到的值
			console.log("最终用到的值：", data);

			this.$message.success("提交成功");
		},

		// 单个选择器用到的方法==================================================================================

		/**
		 * 单个选择器返回的值
		 * @param {array} value
		 */
		getItem(value) {
			// 赋值
			this.myItem = value;
			// 获取最终值
			let myValue = this.$util.formatPickerValue(this.myItem, true);
			console.log("最终分钟值：", myValue);
		},
	},
};
</script>

<style lang="less">
.index-contaienr {
	width: 100%;
	height: 100vh;
	background-color: #fff;
}
</style>

FanNextTimeSelect 中的 API

| API | 描述 | 是否必填 | 默认值 | 范围 | 类型 | | ----------- | ------------------------------------------------------------ | -------- | ------------------------------------------ | ---------------- | ------- | | list | 父组件传递的数组。 | 是 | 详情见下方 list 数组中每个对象的字段与值。 | - | Array | | rangeFlag | 是否验证范围选择器。组。 | 否 | true | true/false | Boolean | | addStep | 添加时较上一组新增多少分钟 | 否 | 1*60 | 0-2880（48*60） | Number | | startText | 开始时间的标题。 | 否 | '' | - | String | | endText | 结束时间的标题。 | 否 | '' | - | String | | maxLength | 时间选择器组的最大数量。为 1 时不可添加或删除。 | 否 | 1 | 0-100 | Number | | step | 步进值，每个时间选择器之间相差值，为 0 时可相等。 | 否 | 1 | 0-2880（48*60） | Number | | stepMax | 第一组选择器的开始时间与最后一组选择器的结束时间相差最大值。 | 否 | 1440(24*60) | 0-2880（48*60） | Number | | range | 是否显示范围选择器。 | 否 | false | true/false | Boolean | | btnDisable | 是否禁止显示'+'、'-'按钮器。 | 否 | false | true/false | Boolean | | disable | 是否禁用选择器器。 | 否 | false | true/false | Boolean | | width | 设置选择器宽度，单位 px。 | 否 | 100 | 100-500 | Number | | titleSize | 设置标题的字号大小，单位 px。 | 否 | 14 | 2-100 | Number | | titleColor | 设置标题颜色。 | 否 | #333333 | - | String | | borderColor | 设置边框颜色。 | 否 | #ccd4e0 | - | String | | bgColor | 设置选择器背景颜色。 | 否 | #fafbfc | - | String | | color | 设置选择器文字颜色。 | 否 | #333333 | - | String |

list 数组中每个对象的字段与值

| 字段名 | 详情 | 默认值 | 类型 | 范围 | | ---------- | -------------------------------------- | -------------------------------------- | ------ | -------------------------- | | startValue | 与后端交互的开始时间值（以分钟计算）。 | 9*60 | Number | 0-2880(48*60) | | endValue | 与后端交互的结束时间值（以分钟计算）。 | 18*60 | Number | 0-2880(48*60) | | startRange | startValue 的最大、最小值范围 | [{startValue:0,endValue:2880(48*60)}] | Array | 对象内字段：0-2880(48*60) | | endRange | endValue 的最大、最小值范围 | [{startValue:0,endValue:2880(48*60)}] | Array | 对象内字段：0-2880(48*60) |

FanNextTimeSelect 中的 Events

| 事件名 | 详情 | 类型 | | ------------------------ | ---------------------------------------------------- | -------- | | setFanNextTimeSelectList | 参数返回最新的{pickers：数组或对象,flag：值是否合法} | Function |

FanNextTimeSelectItem 中的 API

| API | 描述 | 是否必填 | 默认值 | 范围 | 类型 | | ----------- | ---------------------------------- | -------- | --------------------- | -------------- | -------- | | item | 父组件传递的对象。 | 是 | {startValue,endValue} | 0-2880(48*60) | {Number} | | title | 标题。 | 否 | '' | - | String | | disable | 是否禁用本组件。 | 否 | false | true/false | Boolean | | width | 宽度。 | 否 | 100 | 100-500 | Number | | titleSize | 标题字号。 | 否 | 14 | 2-100 | Number | | titleColor | 标题颜色。 | 否 | #333 | - | String | | borderColor | 边框颜色。 | 否 | #ccd4e0 | - | String | | bgColor | 背景颜色。 | 否 | #fafbfc | - | String | | color | 文字颜色。 | 否 | #33333 | - | String | | end | 是否为下班的控件。（不要动它。。） | 否 | 0 | 0/1 | Number | | only | 是否单独使用。（不要动它。。） | 否 | true | true/false | Boolean |

FanNextTimeSelectItem 中的 Events

| 事件名 | 详情 | 类型 | | ------- | ----------------------------------------------------------------------- | -------- | | setItem | 参数返回最新的 {pickers：数组或对象,flag：值是否合法}，或者 item 对象。 | Function |

$util 中需要用到的的方法

| 方法名 | 详情 | 参数 | | ----------------- | ------------------------------------ | ------------------------------------------------------------------------------- | | formatPickerValue | 格式化次日时间选择器的值。 | 参 1：要格式化的数组或对象，参 2：是否单组件模式。为 true 时（参 1 应为对象）。 | | fanCode | 将小时和分钟编码获得与后端交互的值。 | 参 1：小时，参 2：分钟。 | | fanDecode | 解码后端交互的值获得小时和分钟。 | 参 1：与后端交互的值。 |

bug 反馈与合作 weChat：