vole-ui

A Vue.js 2.0 Easy UI Toolkit for Web

Install

npm install vole-ui -S

Quick Start

import Vue from 'vue'
import VoleUI from 'vole-ui'

Vue.use(VoleUI)

Components

1. Resize (directive and component) （Document）

<template>
  <div class="test-wrap">
    <vo-resize 
      @resize="handleResizeEvent" 
      :immediate="false"
      :delay="500"
      :type="throttle">
      <div>{{rect}}</div>
    </vo-resize>

    <div 
      v-resize.quiet="handleResizeEvent" 
      vue-resize-delay="600" 
      vue-resize-type="debounce">
      {{rect}}
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class Test extends Vue {
  rect = {};

  oldRect = {};

  handleResizeEvent (el, rect, oldRect) {
    this.rect = rect
    this.oldRect = oldRect
  }
}
</script>

2. Longpress (directive) （Document）

<template>
  <div class="test-wrap">
    <button 
      v-longpress="handleLongpressEvent"
      vue-longpress-duration="1000">
    </button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class Test extends Vue {
  options = {
    endStamp: 1562638917679,
    rangeOfTime: 1001,
    startStamp: 1562638916678
  }

  handleLongpressEvent (options) {
    this.options = options
  }
}
</script>