npm.io
1.2.3 • Published 2 years ago

fan-next-time-select

Licence
ISC
Version
1.2.3
Deps
0
Size
71 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

次日时间选择器

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：

Keywords

nexttimeselect次日时间选择器