vue组件 -- 实现一种小时级时间段选择

最新推荐文章于 2024-08-07 02:52:26 发布
最新推荐文章于 2024-08-07 02:52:26 发布
阅读量3.1k 收藏 8
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44021888/article/details/127666974
版权

vue组件 – 实现一种小时级时间段选择

效果
在这里插入图片描述
操作大概是选择一个开始时间和一个结束时间（从左往右选是选择，从右往左是取消），排除已选后计算他们总的时间段。

代码：

  1. 单个组件页面
<template>
	<div>
		<div class="hours-container">
			<div v-for="(item, index) in hours" :key="index" class="hours-item">
				<div class="hours-item-header">{{ compItem(item) }}</div>
				<div class="hours-item-value">
					<div
						:class="compClass(2 * item)"
						@click="handleClick(2 * item)"
						@mouseover="handleHover(2 * item)"
					></div>
					<div
						:class="compClass(2 * item + 1)"
						@click="handleClick(2 * item + 1)"
						@mouseover="handleHover(2 * item + 1)"
					></div>
				</div>
			</div>
		</div>
		<div class="tips">{{ tips }}</div>
	</div>
</template>
 
<script>
/*
* @Description 为了实现24小时区间选择，若有星期的需求直接看 TimeRangeList组件
* @Author dengkangning
* @Date 2020年11月18日 16:33:19
*/
export default {
	model: {
		prop: "sendTimeList",
	},
	props: {
		sendTimeList: {
			required: true,
			default: []
		},
		readonly: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		timeRangeList: function (value) {
			this.$emit('change', value);
			this.$parent.$emit("el.form.change");// 触发父组件的校验规则
		},
		sendTimeList:{
            handler () {
                this.transformedIndex();
            },
            deep:true
        }
	},
	computed: {
	},
	data() {
		return {
			hours: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],// 选项
			selectStart: false,// 开始
			startIndex: '',// 开始下标
			timeRangeList: [],// 选择的时间段
			timeRangeListIndex: [],// 选中的下标
			tempRangeIndex: [],// 预选下标
			tips: '向右选中，向左取消选择'
		}
	},
	methods: {
		// 时间区间转换成下标区间
		transformedIndex() {
			this.timeRangeListIndex = [];
			this.timeRangeList = this.sendTimeList;
			this.timeRangeList.forEach(element => {
				const [startTime, endTime] = element.match(/\d+\:\d+/g);
				if (startTime && endTime) {
					let [startHour, startMin] = startTime.split(':');
					let [endHour, endMin] = endTime.split(':');
					if (startHour && startMin && endHour && endMin) {
						let startNum, endNum;
						if (startMin === '00') {
							startNum = 2 * parseInt(startHour);
						} else {
							startNum = 2 * parseInt(startHour) + 1;
						}
						if (endMin === '00') {
							endNum = 2 * parseInt(endHour) - 1;
						} else {
							endNum = 2 * parseInt(endHour);
						}
						while (endNum >= startNum) {
							this.timeRangeListIndex.push(startNum);
							startNum++;
						}
 
					} else {
						this.$message.error("时间段格式不正确");
					}
 
				} else {
					this.$message.error("没有拿到开始时间或结束时间或者时间段格式不对");
				}
			});
			this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '向右选中，向左取消选择';
		},
		// 下标区间转换成时间区间
		transformedSection() {
			this.timeRangeList = [];
			let startTime = '', endTime = '', len = this.hours.length;
			for (let index = this.hours[0] * 2; index < 2 * (len + 1); index++) {
				if (this.timeRangeListIndex.indexOf(index) > -1) {
					if (startTime) {// 如果有开始时间，直接确定结束时间
						let endHour = Math.floor((index + 1) / 2);
						let endMin = (index + 1) % 2 === 0 ? "00" : "30";
						endTime = `${endHour < 10 ? '0' + endHour : endHour}:${endMin}`;
					} else {// 没有开始时间，确定当前点为开始时间
						let startHour = Math.floor(index / 2);
						let startMin = index % 2 === 0 ? "00" : "30";
						startTime = `${startHour < 10 ? '0' + startHour : startHour}:${startMin}`;
					}
					if (index === 2 * this.hours.length + 1) { // 如果是最后一格，直接结束
						endTime = `${Math.floor((index + 1) / 2)}:00`;
						this.timeRangeList.push(`${startTime ? startTime : "23:30"}-${endTime}`);
						startTime = '';
						endTime = '';
					}
				} else { // 若这个点不在选择区间，确定一个时间段
					if (startTime && endTime) {
						this.timeRangeList.push(`${startTime}-${endTime}`);
						startTime = '';
						endTime = '';
					} else if (startTime && !endTime) {// 这里可能只选半个小时
						let endHour = Math.floor(index / 2);
						let endMin = index % 2 === 0 ? "00" : "30";
						endTime = `${endHour < 10 ? '0' + endHour : endHour}:${endMin}`;
						this.timeRangeList.push(`${startTime}-${endTime}`);
						startTime = '';
						endTime = '';
					}
				}
			}
			this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '向右选中，向左取消选择';
		},
		// 点击事件
		handleClick(index) {
			if (this.selectStart) {
				if (index === this.startIndex) {// 双击取反
					if (this.timeRangeListIndex.indexOf(index) > -1) {
						this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1);
					} else {
						this.timeRangeListIndex.push(this.startIndex);
					}
				} else if (index > this.startIndex) {// 选取数据--向右添加，向左取消
					while (index >= this.startIndex) {
						this.timeRangeListIndex.push(this.startIndex);
						this.startIndex++;
					}
					this.timeRangeListIndex = Array.from(new Set(this.timeRangeListIndex));
				} else {// 删除数据
					while (this.startIndex >= index) {
						if (this.timeRangeListIndex.indexOf(index) > -1) {
							this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1);
						}
						index++;
					}
				}
				this.startIndex = '';
				this.tempRangeIndex = [];
				this.transformedSection();
			} else {
				this.startIndex = index;
			}
			this.selectStart = !this.selectStart;
		},
		// 预选区间
		handleHover(index) {
			if (this.selectStart) {
				this.tempRangeIndex = [];
				if (index > this.startIndex) {// 选取数据--向右添加，向左取消
					while (index >= this.startIndex) {
						this.tempRangeIndex.push(index);
						index--;
					}
				} else {// 删除数据
					while (this.startIndex >= index) {
						this.tempRangeIndex.push(index);
						index++;
					}
				}
			}
		},
		// 是否选中，计算className
		compClass(index) {
			if (index === this.startIndex) {
				return 'hours-item-left preSelected';
			}
			if (index >= this.startIndex) {
				if (this.tempRangeIndex.indexOf(index) > -1) {
					return 'hours-item-left preSelected';
				}
			} else {
				if (this.tempRangeIndex.indexOf(index) > -1) {
					return 'hours-item-left unSelected';
				}
			}
			return this.timeRangeListIndex.indexOf(index) > -1 ? 'hours-item-left selected' : 'hours-item-left';
		},
		compItem(item) {// 不足10前面补0
			return item < 10 ? `0${item}` : item;
		},
 
	},
	mounted() {
		this.transformedIndex();
	}
}
</script>
 
<style lang="scss" scoped>
.hours-container {
	display: flex;
	cursor: pointer;
	.hours-item {
		width: 30px;
		height: 60px;
		border: 1px solid #c2d0f3;
		border-right: none;
		text-align: center;
		&:last-child {
			border-right: 1px solid #c2d0f3;
		}
		.hours-item-header {
			width: 100%;
			height: 30px;
			line-height: 30px;
			border-bottom: 1px solid #c2d0f3;
		}
		.hours-item-value {
			width: 100%;
			height: 30px;
			box-sizing: border-box;
			display: flex;
			.hours-item-left,
			.hours-item-right {
				width: 50%;
				height: 100%;
				border-right: 1px solid #c2d0f3;
				box-sizing: border-box;
				&:last-child {
					border-right: none;
				}
			}
		}
		.selected {
			background-color: #4e84fe;
			border-bottom: 1px solid #c2d0f3;
		}
		.preSelected {
			background-color: #8eaffc;
			border-bottom: 1px solid #c2d0f3;
		}
		.unSelected {
			background-color: #ffffff;
			border-bottom: 1px solid #c2d0f3;
		}
	}
}
.tips {
	width: 100%;
	line-height: 30px;
}
</style>

2.整体代码

<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__classify">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
	     <el-form-item>
          <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="itemName" label="项目名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="description" :show-overflow-tooltip="true" label="描述" header-align="center" align="center"></el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">{{ $t('update') }}</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update :sendTimeList = timeList v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @change="taskTimeChange($event)"></add-or-update>
      <!--时间-->
      <task-time :sendTimeList = timeList :readonly=false v-if="timeVisible" ref="taskTime" @refreshDataList="getDataList" @change="taskTimeChange($event)"></task-time>
    </div>
  </el-card>
</template>

<script>
import AddOrUpdate from './task-add-or-update'
export default {
  data () {
    return {
        addOrUpdateVisible: false,
        page: 1,                    // 当前页码
        limit: 10,                  // 每页数
        total: 0,                   // 总条数
        dataListSelections: [],     // 数据列表，多选项
        dataListLoading: false,
        dataList: [],
        dataForm: {
            itemId: '',
        },
        timeList: [],
        currentDate: ''
    }
  },
  components: {
    AddOrUpdate,
  },
  mounted() {
      this.getDataList()
      this.getCurrentDate()
  },
  methods: {
    // 获取当前日期
    getCurrentDate () {
        var  date =  new  Date();
        var  seperator1 =  "-" ;
        var  year = date.getFullYear();
        var  month = date.getMonth() + 1;
        var  strDate = date.getDate();
        if  (month >= 1 && month <= 9) {
            month =  "0"  + month;
        }
        if  (strDate >= 0 && strDate <= 9) {
            strDate =  "0"  + strDate;
        }
        this.currentDate = year + seperator1 + month + seperator1 + strDate
    },
    // 多选
    dataListSelectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 分页, 每页条数
    pageSizeChangeHandle (val) {
      this.page = 1
      this.limit = val
      this.getDataList()
    },
    // 分页, 当前页
    pageCurrentChangeHandle (val) {
      this.page = val
      this.getDataList()
    },
    getDataList() {
        this.$http.get(`/sys/task/page`, {
            params: {
                'page': this.page,
                'limit': this.limit,
                'itemId': this.dataForm.itemId,
                'classifyId': this.dataForm.classifyId
            }
        }).then(({data}) => {
            if (data && data.code === 0) {
                this.dataList = data.data.list
                this.total = data.data.total
            } else {
                this.dataList = []
                this.total = 0
            }
        })
    },
    // 新增 / 修改
    addOrUpdateHandle (row) {
        this.addOrUpdateVisible = true
        if (row) {
            this.timeList = row.time.split(',')
        } else {
            this.timeList = []
        }
        this.$nextTick(() => {
            if (row) {
                this.$refs.addOrUpdate.dataForm.id = row.id
            }
            this.$refs.addOrUpdate.init()
        })
    },
    taskTimeChange(value) {
        this.timeList = value
    },
  }
}
</script>
<style scoped>
.el-table--border th, .el-table__fixed-right-patch {
    border-bottom: none
}
</style>

页面效果：该页面没有展示小时时间
在这里插入图片描述
3. 新增或修改
代码：

<template>
  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
      <el-form-item prop="description" :label="$t('task.description')">
        <el-input type="textarea" v-model="dataForm.description" :placeholder="$t('task.description')"></el-input>
      </el-form-item>
      <el-form-item prop="time" :label="$t('task.time')">
          <div class="hours-container">
                <div v-for="(item, index) in hours" :key="index" class="hours-item">
                    <div class="hours-item-header">{{ compItem(item) }}</div>
                    <div class="hours-item-value">
                        <div :class="compClass(2 * item)" @click="handleClick(2 * item)" @mouseover="handleHover(2 * item)"></div>
                        <div :class="compClass(2 * item + 1)" @click="handleClick(2 * item + 1)" @mouseover="handleHover(2 * item + 1)"></div>
                    </div>
                </div>
            </div>
            <div class="tips">{{ tips }}</div>
      </el-form-item>
    </el-form>
    
    <template slot="footer">
        <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
    model: {
        prop: "sendTimeList",
    },
    props: {
        sendTimeList: {
			type: Array,
            required: true,
            default: ()=>[]
        },
        readonly: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        timeRangeList: function (value) {
            this.$emit('change', value);
            this.$parent.$emit("el.form.change");// 触发父组件的校验规则
        },
        sendTimeList:{
            handler () {
                this.transformedIndex();
            },
            deep:true
        }
    },
    data () {
        return {
            visible: false,
            hours: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,23,24],// 选项
			selectStart: false,// 开始
			startIndex: '',// 开始下标
			timeRangeList: [],// 选择的时间段
			timeRangeListIndex: [],// 选中的下标
			tempRangeIndex: [],// 预选下标
			tips: '向右选中，向左取消选择',
            dataForm: {
                id: '',
                description: '',
                time: '',
            }
        }
    },
    methods: {
        init(){
            this.visible = true
            if (this.sendTimeList != null && this.sendTimeList.length > 0) {
			    this.tips = this.sendTimeList
            }
            this.$nextTick(() => {
                this.$refs['dataForm'].resetFields()
                if (this.dataForm.id) {
                    this.getInfo()
                }
            })
        }, 
        // 获取信息
        getInfo () {
        this.$http.get(`/sys/task/${this.dataForm.id}`).then(({ data: res }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.dataForm = res.data
            
        }).catch(() => {})
        },
        // 时间区间转换成下标区间
		transformedIndex() {
            if (this.timeRangeList.length > 1) {
                this.tips = "只能选择一处，向左取消选择"
            } else{
                this.timeRangeListIndex = [];
                this.timeRangeList = this.sendTimeList;
                this.timeRangeList.forEach(element => {
                    const [startTime, endTime] = element.match(/\d+\:\d+/g);
                    if (startTime && endTime) {
                        let [startHour, startMin] = startTime.split(':');
                        let [endHour, endMin] = endTime.split(':');
                        if (startHour && startMin && endHour && endMin) {
                            let startNum, endNum;
                            if (startMin === '00') {
                                startNum = 2 * parseInt(startHour);
                            } else {
                                startNum = 2 * parseInt(startHour) + 1;
                            }
                            if (endMin === '00') {
                                endNum = 2 * parseInt(endHour) - 1;
                            } else {
                                endNum = 2 * parseInt(endHour);
                            }
                            while (endNum >= startNum) {
                                this.timeRangeListIndex.push(startNum);
                                startNum++;
                            }
                        } else {
                            this.$message.error("时间段格式不正确");
                        }
                    } else {
                        this.$message.error("没有拿到开始时间或结束时间或者时间段格式不对");
                    }
                });
                this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '向右选中，向左取消选择';
                this.dataForm.time = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList.toString() : ''
            }
		},
		// 下标区间转换成时间区间
		transformedSection() {
			this.timeRangeList = [];
			let startTime = '', endTime = '', len = this.hours.length;
			for (let index = this.hours[0] * 2; index < 2 * (len + 1); index++) {
				if (this.timeRangeListIndex.indexOf(index) > -1) {
					if (startTime) {// 如果有开始时间，直接确定结束时间
						let endHour = Math.floor((index + 1) / 2);
						let endMin = (index + 1) % 2 === 0 ? "00" : "30";
						endTime = `${endHour < 10 ? '0' + endHour : endHour}:${endMin}`;
					} else {// 没有开始时间，确定当前点为开始时间
						let startHour = Math.floor(index / 2);
						let startMin = index % 2 === 0 ? "00" : "30";
						startTime = `${startHour < 10 ? '0' + startHour : startHour}:${startMin}`;
					}
					if (index === 2 * this.hours.length + 1) { // 如果是最后一格，直接结束
						endTime = `${Math.floor((index + 1) / 2)}:00`;
						this.timeRangeList.push(`${startTime ? startTime : "23:30"}-${endTime}`);
						startTime = '';
						endTime = '';
					}
				} else { // 若这个点不在选择区间，确定一个时间段
					if (startTime && endTime) {
						this.timeRangeList.push(`${startTime}-${endTime}`);
						startTime = '';
						endTime = '';
					} else if (startTime && !endTime) {// 这里可能只选半个小时
						let endHour = Math.floor(index / 2);
						let endMin = index % 2 === 0 ? "00" : "30";
						endTime = `${endHour < 10 ? '0' + endHour : endHour}:${endMin}`;
						this.timeRangeList.push(`${startTime}-${endTime}`);
						startTime = '';
						endTime = '';
					}
				}
			}
			this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '向右选中，向左取消选择';
		},
		// 点击事件
		handleClick(index) {
			if (this.selectStart) {
				if (index === this.startIndex) {// 双击取反
					if (this.timeRangeListIndex.indexOf(index) > -1) {
						this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1);
					} else {
						this.timeRangeListIndex.push(this.startIndex);
					}
				} else if (index > this.startIndex) {// 选取数据--向右添加，向左取消
					while (index >= this.startIndex) {
						this.timeRangeListIndex.push(this.startIndex);
						this.startIndex++;
					}
					this.timeRangeListIndex = Array.from(new Set(this.timeRangeListIndex));
				} else {// 删除数据
					while (this.startIndex >= index) {
						if (this.timeRangeListIndex.indexOf(index) > -1) {
							this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1);
						}
						index++;
					}
				}
				this.startIndex = '';
				this.tempRangeIndex = [];
				this.transformedSection();
			} else {
				this.startIndex = index;
			}
			this.selectStart = !this.selectStart;
		},
		// 预选区间
		handleHover(index) {
			if (this.selectStart) {
				this.tempRangeIndex = [];
				if (index > this.startIndex) {// 选取数据--向右添加，向左取消
					while (index >= this.startIndex) {
						this.tempRangeIndex.push(index);
						index--;
					}
				} else {// 删除数据
					while (this.startIndex >= index) {
						this.tempRangeIndex.push(index);
						index++;
					}
				}
			}
		},
		// 是否选中，计算className
		compClass(index) {
			if (index === this.startIndex) {
				return 'hours-item-left preSelected';
			}
			if (index >= this.startIndex) {
				if (this.tempRangeIndex.indexOf(index) > -1) {
					return 'hours-item-left preSelected';
				}
			} else {
				if (this.tempRangeIndex.indexOf(index) > -1) {
					return 'hours-item-left unSelected';
				}
			}
			return this.timeRangeListIndex.indexOf(index) > -1 ? 'hours-item-left selected' : 'hours-item-left';
		},
		compItem(item) {// 不足10前面补0
			return item < 10 ? `0${item}` : item;
		},
        // 表单提交
        dataFormSubmitHandle: debounce(function () {
            //this.getCurrentDate()
            this.$refs['dataForm'].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/task', this.dataForm).then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                this.$message({
                    message: this.$t('prompt.success'),
                    type: 'success',
                    duration: 500,
                    onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                    }
                })
                }).catch(() => {})
            })
        }, 1000, { 'leading': true, 'trailing': false })
		// dataFormSubmitHandle() {
		// 	this.visible = false
		// 	this.$emit('change', this.tips);
		// }
    },
	mounted() {
		this.transformedIndex();
	}
}
</script>

<style  lang="scss" scoped>
.hours-container {
	display: flex;
	cursor: pointer;
	.hours-item {
		width: 30px;
		height: 60px;
		border: 1px solid #c2d0f3;
		border-right: none;
		text-align: center;
		&:last-child {
			border-right: 1px solid #c2d0f3;
		}
		.hours-item-header {
			width: 100%;
			height: 30px;
			line-height: 30px;
			border-bottom: 1px solid #c2d0f3;
		}
		.hours-item-value {
			width: 100%;
			height: 30px;
			box-sizing: border-box;
			display: flex;
			.hours-item-left,
			.hours-item-right {
				width: 50%;
				height: 100%;
				border-right: 1px solid #c2d0f3;
				box-sizing: border-box;
				&:last-child {
					border-right: none;
				}
			}
		}
		.selected {
			background-color: #4e84fe;
			border-bottom: 1px solid #c2d0f3;
		}
		.preSelected {
			background-color: #8eaffc;
			border-bottom: 1px solid #c2d0f3;
		}
		.unSelected {
			background-color: #ffffff;
			border-bottom: 1px solid #c2d0f3;
		}
	}
}
.tips {
	width: 100%;
	line-height: 30px;
}
</style>

页面效果：
在这里插入图片描述
注意：
数据回传参考参数：sendTimeList

小果子^_^
关注
专栏目录
大屏可视化项目之vue3-seamless-scroll无缝滚动组件（一）——基本使用_vue seamless scroll官网
2401_84411822的博客
04-27 2532
,setup() {title: “Vue3.0 无缝滚动组件展示数据第1条”,},title: “Vue3.0 无缝滚动组件展示数据第2条”,},title: “Vue3.0 无缝滚动组件展示数据第3条”,},title: “Vue3.0 无缝滚动组件展示数据第4条”,},title: “Vue3.0 无缝滚动组件展示数据第5条”,},title: “Vue3.0 无缝滚动组件展示数据第6条”,},
一个用于日期和时间选择的VueJs控件支持范围选择
08-07
一个用于日期和时间选择的VueJs控件，支持范围选择
一个Vue2日期范围选择控件
08-10
一个Vue2日期范围选择控件
Vue/uniapp 实现自定义时间段选择器组件
weixin_40621647的博客
08-07 265
在开发过程中，经常会遇到需要用户选择时间段的需求。本文将介绍如何使用 Vue.js 构建一个简单的时间选择器组件，该组件允许用户选择服务的开始时间和结束时间，并确保选择的时间段满足一定的业务逻辑要求。组件功能概述选择服务时间：用户可以从上午和下午两个时间段中选择服务的开始时间和结束时间。验证时间间隔：确保用户选择的服务时间...
Vue3的时间段日期区间选择器,以一天24小时中每半小时为单位,（完善时间回显）
weixin_43373009的博客
04-29 1044
2、效果2展示，代码加了挺多的（所以重新发一次完整代码），经过表的时候悬停时1.5s后在鼠标位置的右下方出现提示选择的时间，移出表、选择或移动的就取消提示。a、用原版本鼠标的画框的效果出不来，调试摸了很久才改好， pointerEvents: 'none'，要在画框的div加上这个才可以然后。因为工作需要，项目时间比较紧张，需要用到较为复杂的时间段的选择器，所以手搓不太现实，研究了两三天，最总找到类似的（b、在表单的右上角新增了hover移入表才出现清空的x图标，去阿里巴巴图库找的图片。
vue3 实现时间分段选择
m0_37715184的博客
09-21 3153
vue3 实现时间分段选择
vue 封装一个鼠标拖动选择时间段功能
满天星的博客
07-27 1871
【代码】vue 封装一个鼠标拖动选择时间段功能。
Vue企业级时间轴选择器
08-09
2. **引入组件**：在项目的Vue组件中引入并注册时间轴选择器组件，如：`import Tlpick from 'vue-tlpick-master'`，然后在组件的`components`对象中添加`Tlpick`。 3. **配置组件**：在模板中使用`<Tlpick>`标签，...
一个Vue视频媒体多段裁剪组件的实现示例
10-18
整个裁剪组件的实现，还涉及到Vue组件的封装和复用。例如，裁剪工具组件被设计为可以独立使用，也可以集成到其他页面中。这可能涉及到组件的props属性和自定义事件，使得组件可以在不同的上下文中保持功能的一致性。...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
TypeScript（简称TS）则是一种强类型、静态类型的编程语言，它在 JavaScript 的基础上增加了许多特性，提高了代码的可维护性和安全性。 Vue Router 是 Vue.js 官方的路由管理器，版本4.x 对应的是与 Vue3.x 兼容的...
Vue2x的下拉时间选择器小时分钟秒支持灵活的时间格式
08-08
Vue 2.x的下拉时间选择器（小时|分钟|秒），支持灵活的时间格式
vue滑动选择日期插件_vue-hash-calendar, 移动端日期时间选择插件 (使用篇)
weixin_39938724的博客
12-23 1083
vue-hash-calendar, 移动端日期时间选择插件 (使用篇)按照惯例, 先上效果图imageimageimagevue-hash-calendar基于 vue 2.X 开发的日历组件支持手势滑动操作. 1原生 JS 开发, 没引入第三方库上下滑动 切换 周 / 月 模式[周模式中] 左右滑动可切换 上一周 / 下一周[月模式中] 左右滑动可切换 上一月 / 下一月安装使用说明NPM...
前端VUE2/VUE3/uniapp/微信小程序进度条时间段选择（开始时间，结束时间）
小伙伴们全都Lucky！
04-27 981
可以自定义点击选择的时间段进度条
vue2实现时间选择--点选
Pluto_fxy的博客
06-03 2351
vues实现点击时间选择块
vue3 时间轴选择某个时间段
sbb0_0的博客
09-26 453
【vue3】时间轴选择某段时间
vue el-date-picker 时间选择器选择日期范围
来都来了
02-01 2952
前端这个时候就写好了，由于改变了查询条件，我们需要在后端的查询方法内。
Ant Design of Vue 时间选择器（时间限定）
qq_38743783的博客
09-13 2210
Ant Design of Vue 时间选择跨度最多选七天(选完开始时间，决定时间段限定)Ant Design of Vue 时间选择最多选七天（直接限定开始和结束时间）
Vue -- 如何实现页面每隔一段时间自动刷新
最新发布
09-10
在Vue.js中，要实现页面每隔一段时间自动刷新，通常会利用`Intersection Observer API`或者结合定时器`setTimeout`函数。这里提供两种常见的方法： 1. **使用Intersection Observer**: - 首先，安装`vue-popper`等...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值