v-nudge

The v-nudge directive is used to adjust values using directional keys on the keyboard.

The element or root element of the component to which v-nudge is applied must be able to receive focus. Elements that already receive focus such as <button> and <input>, or the tabindex attribute can be used.

Examples

When the directional keys are pressed while the shift or alt key is also pressed, the change value will be increased or decreased by a factor of 10.

点我，按左右方向键

点我，按上下方向键

Edit this demo on GitHubEdit

<template>
<article>
  <div class="box value">
    {{ displayValue }}
  </div>
  <div
    v-nudge.x="{update: handleNudgeUpdate}"
    class="box"
    tabindex="-1"
  >
    点我，按<strong>左右</strong>方向键
  </div>
  <div
    v-nudge.y="{update: handleNudgeUpdate}"
    class="box"
    tabindex="-1"
  >
    点我，按<strong>上下</strong>方向键
  </div>
</article>
</template>

<script>
import { nudge } from 'veui'

export default {
  directives: {
    nudge
  },
  data () {
    return {
      value: 0
    }
  },
  computed: {
    displayValue () {
      return this.value.toFixed(1).replace('.0', '')
    }
  },
  methods: {
    handleNudgeUpdate (increase) {
      this.value += increase
    }
  }
}
</script>

<style lang="less" scoped>
article {
  display: flex;
}

.box {
  width: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbdbdb;
  background: #fff;
  margin-right: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s;
  line-height: 1;

  &:focus {
    background-color: #e7e7e7;
  }
}

.value {
  font-size: 1.5em;
}
</style>

API

Please refer to the official document for the specific usage of the directive. For more detailed parameters, please refer to Custom Directive.

Options

Type: function | Object.

When using the function type, the options represent the callback function triggered after the directional keys are pressed. For example:

<div tabindex="-1" v-nudge="update"></div>

When using the Object type, the options can fully configure all parameters. For example:

<div tabindex="-1" v-nudge="{
  step: 5,
  axis: 'y',
  update: increase
}"></div>

Name	Type	Default	Description
`axis`	`string`	`y`	Restricts adjustment with only left and right or up and down directional keys. Optional value types: `'x' \| 'y'`
`step`	`number`	`nudge.step`	Step value. Can be globally configured.
`update`	`function(delta: number)`	`function() {}`	Triggered when the value changes, passing in the changed value. The parameter `delta` is the calculated numeric change.

The parameters provided by the Object type will overwrite the parameters specified by the directive argument and modifier.

v-nudge only generates the change value obtained from the directional keys, and does not modify the value itself. The user needs to handle it in the update callback.

Modifiers

Corresponding to the axis / step in the Object type binding value. For example:

<div tabindex="-1" v-nudge.x.2="{ update: delta => this.val += delta }"></div>

Name	Description
`x`	Restricts adjustment with only left and right directional keys.
`y`	Restricts adjustment with only up and down directional keys.
`step`	The step value, note that `step` is a variable here.

The only positive integer in the modifier will be recognized as step.

Configs

Key	Type	Default	Description
`nudge.step`	`number`	`1`	Step value.

Edit this page on GitHubEdit