fan-next-time-select v1.2.1

次日时间选择器

show me bug...

源码地址：gitee

组件地址：npm

版本更新 1.2.1

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

版本更新 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

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

FanNextTimeSelect 中的 Events

FanNextTimeSelectItem 中的 API

FanNextTimeSelectItem 中的 Events

$util 中需要用到的的方法

bug 反馈与合作 weChat：