Touch-enabled Spin Wheel In Vue

Install & Download:

# Yarn
$ yarn add vue-spin-wheel
# NPM
$ npm install vue-spin-wheel --save

Description:

A fancy Vue.js component to create a spin wheel that is fully interactive with mouse drag and touch events.

How to use it:

1. Import components from ‘vue-spin-wheel’.

import { SpinWheel, SpinCircle, SpinItem } from "vue-spin-wheel";

2. Import the necessary stylesheet.

import 'vue-spin-wheel/lib/vue-spin-wheel.css';

3. Add the spin wheel component together with controls to the template.

<template>
  <div id="app">
    <spin-wheel v-slot="{ angle }" class="flower">
      <spin-circle :items="items" :gravity="hasGravity">
        <template v-slot:bubble="{ item }">
          <spin-item :rotation="angle" class="bubble">
            <span>{{item}}</span>
          </spin-item>
        </template>
        <template v-slot:center>
          <spin-item :rotation="angle" class="bubble">
            <span>CENTER</span>
          </spin-item>
        </template>
      </spin-circle>
    </spin-wheel>
    <div class="actions">
      <button @click="addItem">Add item</button>
      <button @click="removeItem">Remove item</button>
      <input type="checkbox" v-model="hasGravity" name="gravity">
      <label for="gravity">Gravity</label>
    </div>
  </div>
</template>

4. Register the component and enable the controls.

export default {
  name: "App",
  components: {
    SpinWheel,
    SpinCircle,
    SpinItem
  },
  data: function() {
    return {
      items: ["HELLO", "THERE", "GENERAL", "KENOBI"],
      hasGravity: true,
      index: 0
    };
  },
  methods: {
    removeItem: function() {
      this.items.splice(-1);
    },
    addItem: function() {
      this.items.push(`TEST-${this.index++}`);
    }
  }
};

Preview:

Changelog:

v1.2.0 (07/30/2022)

• Removed ts-matrix dependency. Use native javascript Math methods now.

v1.1.0 (02/05/2022)

• New itemKey prop on SpinItem to indicate which property of the item to use as a uniq key (used for v-for)
• Fixed height computation problems when the container only use min-height and doesn’t specify height.