精华内容
下载资源
问答
  • vue-light-timeline时间轴插件的使用

    千次阅读 2020-04-11 14:45:26
    vue-light-timeline时间轴插件的使用第一步、安装:install第二步、引入:main.js第三步、使用:timeline.vue 第一步、安装:install npm install vue-light-timeline --save 第二步、引入:main.js import ...

    第一步、安装:install

    npm install vue-light-timeline --save
    

    第二步、引入:main.js

    import LightTimeline from 'vue-light-timeline';
    
    Vue.use(LightTimeline)
    

    第三步、使用:timeline.vue

    <template>
      <light-timeline :items='items'></light-timeline>
    </template>
    
    <script>
    const theme = 'red';
    export default {
      data () {
        return {
          items: [
            {
              tag: '2018-01-12',
              content: 'hallo'
            },
            {
              tag: '2018-01-13',
              color: '#dcdcdc',
              type: 'circle',
              content: 'world'
            },
            {
              type: 'star',
              tag: '2018-01-14',
              htmlMode: true,
              content: `<div style="color: ${theme};"> =v = </div>`
            }
          ]
        }
      }
    }
    </script>
    
    <style scoped lang="stylus">
    
    </style>
    

    或者使用slot插槽

    <template>
      <light-timeline :items='items'>
        <template slot='tag' slot-scope='{ item }'>
          {{item.date}}
        </template>
        <template slot='symbol' slot-scope='{ item }'>
          <div class="my_icon_class"><i :class="item.class"></i><div>
        </template>
        <template slot='content' slot-scope='{ item }'>
          {{item.content}}
        </template>
      </light-timeline>
    </template>
    <script>
    export default {
      data () {
        return {
          items: [
            {
              tag: '2018-01-12',
              content: 'hallo',
              class: 'fas fa-star'
            },
            {
              tag: '2018-01-13',
              content: 'world',
              class: 'far fa-star'
            },
            {
              tag: '2018-01-14',
              content: 'other',
              class: 'fas fa-star'
            }
          ]
        }
      }
    }
    </script>
    
    展开全文
  • 企业级时间轴插件Vue-timelinepick

    万次阅读 2017-12-30 14:53:11
    简介时间范围选择插件 取当前时间之前一段时间范围 按刻,小时,天分类在线演示及下载在线演示:https://yelingfeng.github.io/vue-timelinepick/ 本地下载依赖 jquery import timelinepick from "vue-timelinepick...

    简介

    时间范围选择插件 取当前时间之前一段时间范围 按刻,小时,天分类

    在线演示及下载

    在线演示:https://yelingfeng.github.io/vue-timelinepick/
    本地下载

    依赖

    • jquery
    import timelinepick from "vue-timelinepick"
    import "vue-timelinepick/dist/vue-timelinepick.css"
    
    Vue.use(timelinpick)

    vue组件中直接使用

    <timelinepick :option="op" :width="width" :height="height" :handler="changeAction"></timelinepick>
    
    data() {
          return {
              "width": 1200,
              "height":110,
              "op" : {
                  "threshold": new Date(),
                  "number": 97,
                  "spanMinNumber": 10,
                  "isFixedDrag" : true,
                  "spanIndex": {start: 70, end: 97},
                  "type": "quarter",
                  "dateFormat" : 'yyyy-MM-dd mm:hh:ss'
              }
          }
      },
    methods:{
        changeAction(e){
            this.startTime = e.startTime;
            this.endTime = e.endTime;
        }
    }

    属性

    属性 说明
    width
    height
    option 配置项

    方法

    属性 说明
    threshold 起点时间(默认当前) new Date()
    number 总刻度 97
    isFixedDrag 是否禁止拖拽 false
    spanIndex 起始滑块范围 {start: 70, end: 97}
    type 刻度类型 “quarter”
    dateFormat 格式 ‘yyyy-MM-dd mm:hh:ss’

    更多插件

    展开全文
  • vue组件 .vue hhqing-vue时间轴 (hzqing-vue-timeline) A Vue component to hzqing-vue-timeline. hzqing-vue-timeline的Vue组件。 安装 (install) npm install -S hzqing-vue-timeline 用法 (usage) main.js:...

    vue组件 .vue

    hhqing-vue时间轴 (hzqing-vue-timeline)

    A Vue component to hzqing-vue-timeline.

    hzqing-vue-timeline的Vue组件。

    安装 (install)

    npm install -S hzqing-vue-timeline

    timelinephone

    用法 (usage)

    main.js:

    main.js:

    import hzqingVueTimeline from 'hzqing-vue-timeline'
    Vue.use(hzqingVueTimeline)

    <hzqing-vue-timeline 
       timelineColor="#5bbcd5"  
       timeContentColor="#fff"
       :dataList="data"
       ></hzqing-vue-timeline>
    data: [
            {
                time: 1522372393000,
                img: 'static/touxiang.jpeg',
                title: 'hzqing.com',
                content: '这是衡钊清的个人博客'
            },
            {
                time: '2018-03-30 14:36:35',
                img: 'static/one.jpeg',
                title: '这是一个简单的vue时间轴插件',
                content: '这是一个简单的vue时间轴插件,使用非常的方便'
            },
            {
                time: 1522372393000,
                img: 'static/three.jpg',
                title: '努力奋斗',
                content: '当你发现你的才华撑不起野心时,就请安静下来学习吧~~~'
            }
        ]

    翻译自: https://vuejsexamples.com/a-vue-component-to-hzqing-vue-timeline/

    vue组件 .vue

    展开全文
  • Vue时间轴 vue-light-timeline

    万次阅读 2019-02-18 18:16:54
    轻量的vue时间轴组件 install npm install vue-light-timeline 如果你使用的是yarn yarn add vue-light-timeline usage import LightTimeline from 'vue-light-timeline'; Vue.use(LightTimeline); &...

    轻量的vue时间轴组件

    install

    npm install vue-light-timeline

    如果你使用的是yarn

    yarn add vue-light-timeline

    usage

    import LightTimeline from 'vue-light-timeline';
    
    Vue.use(LightTimeline);
    <template>
      <light-timeline :items='items'></light-timeline>
    </template>
    
    export default {
      data () {
        return {
          items: [
            {
              tag: '2019-02-12',
              content: '测试内容'
            },
            {
              tag: '2019-02-13',
              type: 'circle',
              content: '练习内容'
            }
          ]
        }
      }
    }

    或者你还可以为时间轴的每个部分传递插槽:

    <template>
      <light-timeline :items='items'>
        <template slot='tag' slot-scope='{ item }'>
          {{item.date}}
        </template>
        <template slot='content' slot-scope='{ item }'>
          {{item.msg}}
        </template>
      </light-timeline>
    </template>
    <script>
    export default {
      data () {
        return {
          items: [
            {
              date: '2019-02-12',
              msg: '测试内容'
            },
            {
              date '2019-02-13',
              msg: '练习内容'
            }
          ]
        }
      }
    }

    自己写个好看点的样式就行了 

    展开全文
  • vue 时间线组件(时间轴组件)

    千次阅读 2020-10-09 16:17:49
    vue-时间线组件(时间轴组件)代码 <template> <ul class="timeline-wrapper"> <li class="timeline-item" v-for="t in timelineList" :key="t.id"> <div class="timeline-box"> <...
  • 一个基于vue时间轴轮播图插件。 DEMO演示 项目演示 使用方式 安装 npm i timeline-carousel --save 在main.js中使用 import timelineCarousel from 'timeline-carousel' Vue.use(timelineCarousel) 组件...
  • vue 时间轴:效果图

    万次阅读 2018-08-08 14:20:04
    时间轴:效果图 代码: &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="...
  • vue插件

    千次阅读 2017-06-26 11:10:45
    UI组件 http://www.jqsite.com/notes/1704205187.html element ★11612 - 饿了么出品的Vue2的web UI工具套件 ...Vux ★7503 - 基于Vue和WeUI的组件库 ...mint-ui ★5517 - Vue 2的
  • 时间轴是安装的一个插件,需要安装包 npm install vue-light-timeline 如果你使用的是yarn yarn add vue-light-timeline 使用方法: <template> <div> <el-dialog class=...
  • vue 常用的插件(自整理)

    万次阅读 2017-07-16 18:03:17
    vue-resourcevue-resource 作为vue插件的形式存在,通过XMLHttpRequest或JSONP发起请求并处理响应。开发中常用。 用法:npm install vue-resource --save如果你的项目遵守commonJS规范 var Vue = require('vue'); ...
  • 1、在vue项目的components文件夹中新建一个插件专门的文件夹如:wangEditorTool 2、新建一个vue文件,内容如下: <template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar...
  • image.png图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动。一直中意这种动态插件,今天有时间,迫不及待试了一波~大写的...
  • vue 插件集合

    2020-06-23 18:32:31
    UI组件 element ★11612 - 饿了么出品的Vue2的...vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2611 - 三端样式一致的响应式 UI 库 Keen-UI ★2587 - 轻量级的基本UI组件合集 vuetify ★

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,333
精华内容 2,133
关键字:

vue时间轴插件

vue 订阅