https://github.com/yevin-yu/vue-time-axis

时间轴组件，支持拖拽移动，删除
https://github.com/yevin-yu/vue-time-axis

Last synced: 10 months ago
JSON representation

时间轴组件，支持拖拽移动，删除

• Host: GitHub
• URL: https://github.com/yevin-yu/vue-time-axis
• Owner: Yevin-Yu
• Created: 2024-05-11T09:34:48.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-13T13:37:56.000Z (about 2 years ago)
• Last Synced: 2025-01-20T07:43:06.395Z (over 1 year ago)
• Language: Vue
• Homepage: https://www.npmjs.com/package/vuetimeaxisdemo
• Size: 132 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# vuetimeaxisdemo

## 下载

```shell

npm i vuetimeaxisdemo

```

## 使用

`main.js`

```js

import vueTimeAxisDemo from 'vuetimeaxisdemo'

import  'vuetimeaxisdemo/vueTimeAxisDemo.css'

Vue.use(vueTimeAxisDemo);

```

`App.vue`

```vue

  


    

  


export default {

  name: "App",

  data() {

    return {

      option: {

        id:'0',

        width: 500,

        min: 0,

        max: 100,

        data: [

          {

            id: "1",

            text: "时间轴",

            start: 2,

            end: 20,

          },

          {

            id: "2",

            text: "时间轴2",

            start:30,

            end: 50,

          },

        ],

      },

    };

  },

};

#app {

  width: 600px;

  height: 300px;

  background-color: pink;

  margin: 0 auto;

  padding: 24px;

  overflow: auto;

}

```

可以拖动蓝色块进行调整，并实时更新`start`和`end`属性