仿今日头条时间段选择器组件封装

增加鼠标拖动多选择
看代码吧!

首先看代码使用

<el-form-item label="呼叫时间段:" ref="outTimes" prop="outboundTime">(最小可选呼叫时间段为1小时,双击已选中时间段可取消选择)<br /><div class="timeul"><drag-weektimev-model="outboundTime":data="weektimeData"@on-clear="clearWeektime"/></div></el-form-item>//jsimport DragWeektime from "./date.vue";
import weektimeData from "./weektime_data";components: { DragWeektime },computed: {outboundTime() {return this.weektimeData.map((item) => {return {id: item.row,week: item.value,value: this.splicing(item.child),};});},},created() {this.weektimeData = weektimeData;},mounted() {this.weektimeData = weektimeData;},
data(){return {weektimeData: [],outboundData: "",}
},methods:{clearWeektime() {this.weektimeData.forEach((item) => {item.child.forEach((t) => {this.$set(t, "check", false);});});},splicing(list) {let same;let i = -1;const len = list.length;const arr = [];if (!len) return;while (++i < len) {const item = list[i];if (item.check) {if (item.check !== Boolean(same)) {arr.push(...["、", item.begin, "~", item.end]);} else if (arr.length) {arr.pop();arr.push(item.end);}}same = Boolean(item.check);}arr.shift();this.outboundData = arr.join("");return arr.join("");},
}

date.vue

<template><div class="c-weektime"><div class="c-schedue"></div><div:class="{ 'c-schedue': true, 'c-schedue-notransi': mode }":style="styleValue"></div><table :class="{ 'c-min-table': colspan < 2 }" class="c-weektime-table"><tbody class="c-weektime-body"><tr v-for="t in data" :key="t.row"><tdv-for="n in t.child":key="`${n.row}-${n.col}`":data-week="n.row":data-time="n.col":class="selectClasses(n)"@mouseenter="cellEnter(n)"@mousedown="cellDown(n)"@mouseup="cellUp(n)"class="weektime-atom-item"></td></tr><tr><td v-for="t in theadArr" :key="t" :colspan="colspan">{{ t }}:00</td></tr></tbody></table></div>
</template>
<script>
const createArr = (len) => {return Array.from(Array(len)).map((ret, id) => id);
};
export default {name: "DragWeektime",props: {value: {type: Array,required: true,},data: {type: Array,required: true,},colspan: {type: Number,default() {return 2;},},},data() {return {width: 0,height: 0,left: 0,top: 0,mode: 0,row: 0,col: 0,theadArr: [],};},computed: {styleValue() {return {width: `${this.width}px`,height: `${this.height}px`,left: `${this.left}px`,top: `${this.top}px`,};},selectValue() {return this.value;},selectState() {return this.value.some((ret) => ret.value);},selectClasses() {return (n) => (n.check ? "ui-selected" : "");},},created() {this.theadArr = createArr(24).slice(8, -1);},methods: {cellEnter(item) {const ele = document.querySelector(`td[data-week='${item.row}'][data-time='${item.col}']`);if (ele && !this.mode) {this.left = ele.offsetLeft;this.top = ele.offsetTop;} else if (item.col <= this.col && item.row <= this.row) {this.width = (this.col - item.col + 1) * ele.offsetWidth;this.height = (this.row - item.row + 1) * ele.offsetHeight;this.left = ele.offsetLeft;this.top = ele.offsetTop;} else if (item.col >= this.col && item.row >= this.row) {this.width = (item.col - this.col + 1) * ele.offsetWidth;this.height = (item.row - this.row + 1) * ele.offsetHeight;if (item.col > this.col && item.row === this.row)this.top = ele.offsetTop;if (item.col === this.col && item.row > this.row)this.left = ele.offsetLeft;} else if (item.col > this.col && item.row < this.row) {this.width = (item.col - this.col + 1) * ele.offsetWidth;this.height = (this.row - item.row + 1) * ele.offsetHeight;this.top = ele.offsetTop;} else if (item.col < this.col && item.row > this.row) {this.width = (this.col - item.col + 1) * ele.offsetWidth;this.height = (item.row - this.row + 1) * ele.offsetHeight;this.left = ele.offsetLeft;}},cellDown(item) {const ele = document.querySelector(`td[data-week='${item.row}'][data-time='${item.col}']`);this.check = Boolean(item.check);this.mode = 1;if (ele) {this.width = ele.offsetWidth;this.height = ele.offsetHeight;}this.row = item.row;this.col = item.col;},cellUp(item) {if (item.col <= this.col && item.row <= this.row) {this.selectWeek([item.row, this.row],[item.col, this.col],!this.check);} else if (item.col >= this.col && item.row >= this.row) {this.selectWeek([this.row, item.row],[this.col, item.col],!this.check);} else if (item.col > this.col && item.row < this.row) {this.selectWeek([item.row, this.row],[this.col, item.col],!this.check);} else if (item.col < this.col && item.row > this.row) {this.selectWeek([this.row, item.row],[item.col, this.col],!this.check);}this.width = 0;this.height = 0;this.mode = 0;},selectWeek(row, col, check) {const [minRow, maxRow] = row;const [minCol, maxCol] = col;this.data.forEach((item) => {item.child.forEach((t) => {if (t.row >= minRow &&t.row <= maxRow &&t.col >= minCol &&t.col <= maxCol) {this.$set(t, "check", check);}});});},},
};
</script>
<style lang="scss" scoped>
.c-weektime {min-width: 490px;height: 30px;position: relative;display: inline-block;
}
.c-schedue {background: #598fe6;position: absolute;width: 0;height: 0;opacity: 0.6;pointer-events: none;
}
.c-schedue-notransi {transition: width 0.12s ease, height 0.12s ease, top 0.12s ease,left 0.12s ease;
}
.c-weektime-table {border-collapse: collapse;th {vertical-align: inherit;font-weight: bold;}tr {height: 30px;}tr,td,th {user-select: none;border: 1px solid #cccccc;text-align: center;min-width: 15px;line-height: 1.8em;transition: background 0.2s ease;}.c-weektime-head {font-size: 12px;.week-td {width: 70px;}}.c-weektime-body {font-size: 10px;tr:nth-child(2) {border: 0px;height: 10px;td {border: 0px;}}td {&.weektime-atom-item {user-select: unset;background-color: #fff;}&.ui-selected {background-color: #598fe6;}}}
}
.c-min-table {tr,td,th {min-width: 24px;}
}
.g-clearfix {&:after,&:before {clear: both;content: " ";display: table;}
}
.g-pull-left {float: left;
}
.g-pull-right {float: right;
}
.g-tip-text {color: #999;
}
</style>

weektime_data.js

const formatDate = (date, fmt) => {const o = {'M+': date.getMonth() + 1,'d+': date.getDate(),'h+': date.getHours(),'m+': date.getMinutes(),'s+': date.getSeconds(),'q+': Math.floor((date.getMonth() + 3) / 3),S: date.getMilliseconds()}if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1,(date.getFullYear() + '').substr(4 - RegExp.$1.length))}for (const k in o) {if (new RegExp('(' + k + ')').test(fmt)) {fmt = fmt.replace(RegExp.$1,RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))}}return fmt}const createArr = (len) => {return Array.from(Array(len)).map((ret, id) => id)}const formatWeektime = (col) => {const timestamp = 1018483200000 // '2018-11-17 00:00:00'const beginstamp = timestamp + col * 1800000 // col * 30 * 60 * 1000const endstamp = beginstamp + 1800000const begin = formatDate(new Date(beginstamp), 'hh:mm')const end = formatDate(new Date(endstamp), 'hh:mm')return `${begin}~${end}`}const data = ['时间'].map((ret, index) => {const children = (ret, row, max) => {return createArr(max).map((t, col) => {return {//   week: ret,value: formatWeektime(col),begin: formatWeektime(col).split('~')[0],end: formatWeektime(col).split('~')[1],row,col}})}return {value: ret,row: index,child: children(ret, index, 30)}})export default data

仿今日头条时间段选择器组件封装相关推荐

vue仿今日头条_Vue仿今日头条实例详解
前言 vue也弄了一段时间了,前段时间一直想用vue写个移动端,加之年底也不是很忙,于是前几天便着手开始弄了,到今天为止也算是勉强能看了因为也是纯粹的写写前端页面,所以数据方面用的是mock.js, ...
vue 仿今日头条_vue实现仿今日头条首页选项卡的功能 -
...的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue.js 来取代 Angular 和 React.js .那么对于 An ...
vue仿今日头条_vue 仿今日头条
vue 仿今日头条为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...
vue仿今日头条_vue 仿今日头条 - osc_isfcy2fi的个人空间 - OSCHINA - 中文开源技术交流社区...
vue 仿今日头条为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...
仿今日头条后台管理系统（二）
仿今日头条后台管理系统(二) ###03-登录模块-分析表单组件  <!-- ref="form" 获取dom使用--& ...
Android仿今日头条的开源项目
起因看到众多大神纷纷有了自己的开源项目,于是自己琢磨着也想做一个开源项目来学习下,因为每次无聊必刷的app就是今日头条,评论简直比内容都精彩,所以我打算仿今日头条来练练手,期间也曾放弃过,也遇到很多 ...
android 横向滚动导航,仿今日头条横向滚动导航栏--原生js
咳咳!先打一波小广告,在上一篇里忘记了,那啥--我的那个个人博客做好了-->(我的博客) 好嘞,言归正传,说说我们的效果. 其实就是实现横向滑动,进行选择. 原理: 鼠标按下,获取当前鼠标坐标, ...
Android仿今日头条开源项目
起因看到众多大神纷纷有了自己的开源项目,于是自己琢磨着也想做一个开源项目来学习下,因为每次无聊必刷的app就是今日头条,评论简直比内容都精彩,所以我打算仿今日头条来练练手,期间也曾放弃过,也遇到很多 ...
Android 仿今日头条的开源项目
前言看到众多大神纷纷有了自己的开源项目,于是自己琢磨着也想做一个开源项目来学习下,因为每次无聊必刷的 app 就是今日头条,评论简直比内容都精彩,所以我打算仿今日头条来练练手,期间也曾放弃过,也遇到 ...

仿今日头条时间段选择器组件封装

仿今日头条时间段选择器组件封装相关推荐

最新文章

热门文章

仿今日头条 时间段选择器组件封装

仿今日头条 时间段选择器组件封装相关推荐

最新文章

热门文章

仿今日头条时间段选择器组件封装

仿今日头条时间段选择器组件封装相关推荐