Vue 实现带拖动功能的时间轴

1.效果图

2. 

当使用timeline-slider-vue组件时,你可以设置以下属性:

  1. date:用于设置时间轴滑块的初始日期,格式通常为 YYYY-MM-DD。

  2. mask:一个布尔值,用于控制是否显示背景遮罩。

  3. markDate:一个数组,用于标记特定日期,在时间轴上会有相应的标记显示。

  4. lockDate:一个数组,用于锁定日期,当滑动结束时自动跳到指定的日期。

3.js部分

 

环境node V12.20.0npm 6.14.8📦 Installnpm install --save timeline-slider-vue全局引用main.jsimport TimelineSliderVue from 'timeline-slider-vue'import 'timeline-slider-vue/lib/timeline-slider-vue.css'Vue.use(TimelineSliderVue)🔧 Usage<TimelineSliderVue><divslot="sliderContent"slot-scope="scope">{{ scope.data }}</div></TimelineSliderVue>使用示例<template><div id="app"><TimelineSliderVue:date="date":mask="mask":mark-date="markDate":lock-date="lockDate"@change="handleChange"@input="handleInput"><div slot="sliderContent" slot-scope="scope">{{ scope.data }}</div></TimelineSliderVue></div></template><script>export default {data() {return {lockDate: [], // 锁定的日期(滑动结束时自动跳到指定的日期)markDate: [], // 做标记的日期mask: true,date: '2022-06-01',}},methods: {handleInput(value, date) {console.log('........input', value, date)},handleChange(value, date) {console.log('........change', value, date)},},}</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/768696.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 面试宝典:什么是大 key 问题?如何解决?

大家好&#xff0c;我是大明哥&#xff0c;一个专注「死磕 Java」系列创作的硬核程序员。 本文已收录到我的技术网站&#xff1a;https://skjava.com。有全网最优质的系列文章、Java 全栈技术文档以及大厂完整面经 回答 Redis 大 key 问题是指某个 key 对应的 value 值很大&am…

链表去重介绍

链表去重是数据结构中一个常见的问题&#xff0c;它涉及到遍历链表、比较节点值以及修改链表结构等操作。链表去重的目的是删除链表中重复的元素&#xff0c;使得每个元素在链表中只出现一次。这个问题在实际应用中具有广泛的用途&#xff0c;比如在处理用户数据、优化搜索引擎…

C语言——sizeof与strlen的对比

一.sizeof 我们在学习操作符的时候&#xff0c;就了解到了sizeof操作符&#xff0c;它的作用是求参数所占内存空间的大小&#xff0c;单位是字节。如果参数是一个类型&#xff0c;那就返回参数所占的字节数。 #include <stdio.h>int main() {int a 10;size_t b sizeo…

Mamba 基础讲解【SSM,LSSL,S4,S5,Mamba】

文章目录 Mamba的提出动机TransformerRNN Mama的提出背景状态空间模型 (The State Space Model, SSM)线性状态空间层 (Linear State-Space Layer, LSSL)结构化序列空间模型 &#xff08;Structured State Spaces for Sequences, S4&#xff09; Mamba的介绍Mamba的特性一&#…

美团2024届秋招笔试第二场编程真题

要么是以0开头 要么以1开头 选择最小的答案累加 import java.util.Scanner; import java.util.*; // 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和…

C# 右键快捷菜单(上下文菜单)的两种实现方式

在C#中&#xff0c;ContextMenuStrip是一种用于创建右键菜单的控件。它提供了一种方便的方式来为特定的控件或窗体添加自定义的上下文菜单选项。有两种实现方式&#xff0c;如下&#xff1a; 一.通过ContextMenuStrip控件实现 1.从工具箱中拖一个ContextMenuStrip控件到窗体上…

ROS2 高效学习系列

ROS2 高效学习系列 1 说明2 正文 1 说明 2023 年&#xff0c;我们总结输出了 ROS高效入门系列 和 ROS高效进阶系列&#xff0c;系统学习了 ros1 基础知识和 ros 的机器人算法。由于 ros2 的普及&#xff0c;我们将系统学习 ros2 &#xff0c;包括 ros2 基础知识和相关高级组件…

LLM - 大语言模型的分布式训练 概述

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/136924304 大语言模型的分布式训练是一个复杂的过程&#xff0c;涉及到将大规模的计算任务分散到多个计算节点上。这样做的目的是为了处…

Python学习笔记01

第一章、你好Python 初识Python Python的起源 1989年&#xff0c;为了打发圣诞节假期&#xff0c;Gudiovan Rossum吉多范罗苏姆(龟叔)决心开发一个新的解释程序(Python雏形) 1991年&#xff0c;第一个Python解释器诞生 Python这个名字&#xff0c;来自龟叔所挚爱的电视剧M…

领域、系统和组织-《实现领域驱动设计》中译本评点-第2章(4)

相关链接 DDD领域驱动设计批评文集>> 汪峰哭晕在厕所-《实现领域驱动设计》中译本评点-第2章&#xff08;1&#xff09; 可不是乱打的-《实现领域驱动设计》中译本评点-第2章&#xff08;2&#xff09; “领域”的错误定义-《实现领域驱动设计》中译本评点-第2章&…

Tomcat介绍,Tomcat服务部署

目录 一、Tomcat 介绍 二、Tomcat 核心技术和组件 2.1、Web 容器&#xff1a;完成 Web 服务器的功能 2.2、Servlet 容器&#xff0c;名字为 catalina&#xff0c;用于处理 Servlet 代码 2.3、JSP 容器&#xff1a;用于将 JSP 动态网页翻译成 Servlet 代码 Tomcat 功能组件…

AST抽象语法树webpack逻辑解析

AST抽象语法树是什么&#xff1f; 树形语法结构&#xff0c;会对代码里的函数、变量声明、逻辑操作进行一些校验。 为什么要用AST&#xff1f; 手写了一段代码之后&#xff0c;编译器需要对不同风格的代码按照商定好的规则统一处理&#xff0c;处理成为规则能够顺利执行的语言&…

Window全网解析网站下载视频

全网解析网站下载视频 介绍m3u8格式cbox格式 解析视频下载的方法方法一解析视频下载视频 方法二老王浏览器下载使用浏览器解析下载视频 总结 介绍 今天分享一下如何解析网页中的视频进行下载。通常情况下我们打开的某某网站的视频是不提供下载接口的&#xff0c;甚至说你下载了…

[JavaEE -- 传输层中UDP和TCP的api实现原理]

传输层中UDP和TCP的api实现原理 1. UDP和TCP协议特点1.1 TCP1.2 UDP 2. UDP协议中socket api的使用2.1 服务器&#xff1a;2.2 客户端2.3 整个流程 3. TCP协议中的api使用3.1 TCP服务器3.2 TCP客户端3.3 整个流程 1. UDP和TCP协议特点 1.1 TCP 有连接&#xff1a;抽象&#x…

ClickHouse--11--物化视图

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.物化视图什么是物化视图? 1.1 普通视图1.2 物化视图1.3 优缺点1.4 基本语法1.5 在生产环境中创建物化视图1.6 AggregatingMergeTree 表引擎3.1 概念3.2 Aggregat…

面试算法-87-分隔链表

题目 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你应当 保留 两个分区中每个节点的初始相对位置。 示例 1&#xff1a; 输入&#xff1a;head [1,4,3,2,5,2], x …

【JAVA】通过JAVA实现用户界面的登录

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-wyCvaz0EBNwHcwsi {font-family:"trebuchet ms",verdana,arial,sans-serif;f…

NPM 国内镜像

一、修改成腾讯云镜像源 1. 设置命令 npm config set registry http://mirrors.cloud.tencent.com/npm/ 验证命令 npm config get registry 如果返回 http://mirrors.cloud.tencent.com/npm/&#xff0c;说明镜像配置成功。 二、修改成淘宝镜像源 设置命令 npm config set…

Linux系统——硬件命令

目录 一.网卡带宽 1.查看网卡速率——ethtool 网卡名 2.查看mac地址——ethtool -P 网卡名 二、内存相关 1.显示系统中内存使用情况——free -h 2.显示内存模块的详细信息——dmidecode -t memory 三、CPU相关 1.查看CPU架构信息——lscpu 2.性能模式 四、其他硬件命…

C语言字节对齐关键字#pragma pack(n)的使用

0 前言 在进行嵌入式开发的过程中&#xff0c;我们经常会见到对齐操作。这些对齐操作有些是为了便于实现指针操作&#xff0c;有些是为了加速对内存的访问。因此&#xff0c;学习如何使用对齐关键字是对于嵌入式开发是很有必要的。 1 对齐规则 1.0 什么叫做对齐 众所周知&a…