Use vue to do a continuous selection of time period, mouse over to select all the time

is there a ready-made component for imitating this? clipboard.png

Mar.23,2022

does not seem to have seen this type of component, because it has already coupled certain businesses

if it is realized, it is not difficult. The general idea is as follows:

  • first of all, you can use tables or div plus various styles to create a static component
  • drag and drop operations are implemented through the mouseup/mousemove/mousedown event model, and highlights are implemented through css
  • The middle grid of
  • is saved through a two-dimensional array while its coordinates are stored, then record the start coordinates in mousedown, record the end coordinates in mouseup, constantly calculate the selected coordinate range in mousemove, and update the highlighted css class name
  • .
  • then parse the time range according to this coordinate range

Boss, is our company the same as your business? have you solved


components?


Boss, ask for a code


this is the time to choose when the drill show is launched. Just copy the js and change it


add to the line the move out mouseleave event press the mousedown event press the mouseup event
add the move into mouseenter

trigger mousedown, represents the start of dragging the selected cell, and mouseenter represents the cell that was dragged when you pressed it. Mouseup and mouseleave represent the end

Menu