vue-soccer-field v1.0.5

vue-soccer-field

A Soccer Field vue component

Installation

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

Usage

In Vue Template

Basic Usage

<vue-soccer-field 
	orientation="landscape|portrait" 
	:visitors="Array[{name:String, number:Number}]" 
	:receivers="Array[{name:String, number:Number}]"/>

Example

<template>
  <vue-soccer-field
          orientation="portrait"
          :visitors="visitors"
          :receivers="receivers"
          style="width: 360px; height: 600px;"
  />
</template>

<script>

  import VueSoccerField from './component/vue-soccer-field';

  export default {
    name: 'app',
    components: {VueSoccerField},
    comments: {
      VueSoccerField
    },
    data() {
      return {
        receivers: [
          {number: 1, name: 'Yashin'},
          {number: 2, name: 'Maldini'},
          {number: 3, name: 'Cafu'},
          {number: 4, name: 'Beckenbauer'},
          {number: 5, name: 'Xavi'},
          {number: 6, name: 'Matthaus'},
          {number: 7, name: 'Christiano'},
          {number: 8, name: 'Pelé'},
          {number: 9, name: 'Ronaldo'},
          {number: 10, name: 'Maradona'},
          {number: 11, name: 'Messi'},
        ],
        visitors: [
          {number: 1, name: 'Yashin'},
          {number: 2, name: 'Maldini'},
          {number: 3, name: 'Cafu'},
          {number: 4, name: 'Beckenbauer'},
          {number: 5, name: 'Xavi'},
          {number: 6, name: 'Matthaus'},
          {number: 7, name: 'Christiano'},
          {number: 8, name: 'Pelé'},
          {number: 9, name: 'Ronaldo'},
          {number: 10, name: 'Maradona'},
          {number: 11, name: 'Messi'},
        ],
      }
    }
  }
</script>

Value Binding

Use visitors and receivers to set list of differents players.

Props