v-ctrl

An Vue abstract component for mouse dragging, i.e. the pattern below:

--down--move--move---move--...---up--|-->

Install

npm install --save v-ctrl
# or
yarn add v-ctrl

Or just add a script tag in you html:

<scriptsrc="https://unpkg.com/v-ctrl"></script>

Demo

A simple range slider:

<template><divclass="wrapper"><v-ctrldirection="h" :throttle="80" @change="onChange"><divclass="range-slider"><divclass="progress" :style="{ width: percentage }"></div><divclass="thumb" :style="{ left: percentage }"></div></div></v-ctrl><p>{{value}}</p></div></template><script>importVCtrlfrom'v-ctrl'exportdefault{components: {'v-ctrl': VCtrl},data(){return{value: 20}},computed: {percentage(){return`${this.value}%`}},methods: {onChange(val){this.value=Math.round(val*100)}}}</script>

Live demo

Attributes

throttle: Number

Throttling time for mousemove.

direction: Enum('v', 'h', 'vh')

• h: emit proportion for the horizontal axis, e.g. 0.52
• v: emit proportion for the vertical axis, e.g 0.91
• vh: emit proportion for both axis, e.g. { x: 0.24, y: 0.87 }

Event

change

change event is emitted while keeping dragging.