vue-focus demo ([email protected])

by J. Albert Bowden

HTML

<script src="https://cdn.rawgit.com/simplesmiler/vue-focus/0.1.1/dist/vue-focus.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-focus/1.0.0/vue-focus.js"></script>
<h2>This is a demo of <a href="https://github.com/simplesmiler/vue-focus">vue-focus</a></h2>

<hr/>

<h3><code>Example 1: Autofocus</code></h3>
<div id="example1">
  <p><label><input type="checkbox" v-model="shown"> Show the field</label></p>
  <p v-if="shown"><input type="text" v-focus="true"></p>
  <p>NOTE: field is focused from the start, and gains focus whenever it enters the DOM.</p>
</div>

<hr/>

<h3><code>Example 2: Show a hint for the focused field</code></h3>
<div id="example2">
  <div><pre>{{ $data | json }}</pre></div>
  <p>
    <input type="text" v-focus="focused" @focus="focused = true" @blur="focused = false">
    <span v-if="focused">Focused!</span>
  </p>
</div>

<hr/>

<h3><code>Example 3: Move focus</code></h3>
<div id="example3">
  <div><pre>{{ { focused: focused } | json }}</pre></div>
  <p v-for="item in items">
    <input type="text"
       v-model="item.value"
       @keydown.down.prevent="moveDown"
       @keydown.up.prevent="moveUp"
       v-focus="$index === focused"
       @focus="focused = $index"
       @blur="focused = null"
     >
  </p>
  <p>NOTE: move the focus with ↑ and ↓ keys.</p>
</div>

<hr/>

<h3><code>Example 4: Custom label</code></h3>
<div id="example4">
  <div><pre>{{ $data | json }}</pre></div>
  <p>
    <span role="label" @mousedown.prevent="focused = true">Label</span>
    <input type="text"
      v-focus="focused"
      @focus="focused = true"
      @blur="focused = false"
    >
  </p>
  <p>NOTE: click on the label to focus the input.</p>
</div>

<hr/>

<ul>
  <li>vue: <a href="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js">v1.0.26</a></li>
  <li>vue-focus: <a...

JavaScript

new Vue({
  el: '#example1',
  mixins: [ VueFocus.mixin ],
  data: {
    shown: true,
  },
});

new Vue({
  el: '#example2',
  mixins: [ VueFocus.mixin ],
  data: {
    focused: false,
  },
});

new Vue({
  el: '#example3',
  mixins: [ VueFocus.mixin ],
  data: {
    focused: null,
    items: [
      { value: 'hello' },
      { value: 'world' },
      { value: '' },
      { value: 'hello' },
      { value: 'world' },
      { value: '' },
    ],
  },
  methods: {
    moveDown: function() {
      this.focused = Math.min(this.focused + 1, this.items.length - 1);
    },
    moveUp: function() {
      this.focused = Math.max(this.focused - 1, 0);
    },
  },
});

new Vue({
  el: '#example4',
  mixins: [ VueFocus.mixin ],
  data: {
    focused: false,
  },
});