@eafmm/vue v5.0.1

Form Minimap Vue

Vue components for Form Minimap. Please consult that documentation for further information on the concepts mentioned below.

Demo Appplication

Getting Started

Installation

npm install --save @eafmm/vue

Adding Form Minimap

The code sample below shows the lines added to a simple form to add a minimap (M) or a minimap with panel (P)

        <script>
M           import { FmmVueMinimap } from '@eafmm/vue'
  P         import { FmmVueMinimap, FmmVuePanel } from '@eafmm/vue'
            export default {
                name: 'App',
M P             components: {
M P                 FmmVueMinimap,
  P                 FmmVuePanel
M P             },
  P             data: () => ({
  P                 refPanel: undefined
  P             }),
  P             mounted() {
  P                 this.refPanel = this.$refs.panel;
  P             }
            }
        </script>

M P     <style>
M P         .fmm-frame { height: 50px; }
  P         .fmm-panel { height: 0; }
M P     </style>

        <template>
            <div id="app">
M P             <div ref='anchor' style='width:20px; height:20px; margin-left:200px'></div>
  P             <FmmVuePanel ref='panel'/>
                <form>
M                   <FmmVueMinimap :anchor='this.$refs.anchor' title='Title'/>
  P                 <FmmVueMinimap v-if='refPanel' :anchor='this.$refs.anchor' :panel='refPanel' title='Title'/>
                    <input id="Input1"/><br/>
                    <input id="Input2"/><br/>
                    <input id="Input3"/><br/>
                    <input id="Input4"/>
                </form>
            </div>
        </template>

API

FmmVueMinimap

Component to create and manage FmmMinimap. The minimap is detached when this component is unmounted. For minimaps in a panel, use the panelproperty; otherwise an anchor for a popup minimap.

| Method | --- | destructor | takeSnapshot

FmmVuePanel

Component to create and manage FmmPanel.

| Method | --- | destroyDetached

FmmVueStore

Component to create FmmStore.

FmmVuex

Component to create FmmStore when using Vuex.