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

1.效果图

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

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

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

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

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

3.js部分

复制代码
环境

node V12.20.0

npm 6.14.8

📦 Install

npm install --save timeline-slider-vue

全局引用

main.js

import TimelineSliderVue from 'timeline-slider-vue'

import 'timeline-slider-vue/lib/timeline-slider-vue.css'

Vue.use(TimelineSliderVue)

🔧 Usage

<TimelineSliderVue>

<div

slot="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>
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github