Vue2MediaPreview

Vue Component for Vue 2.x

Install

    npm install vue2-media-preview --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2MediaPreview from 'vue2-media-preview';

2.1 Use it globally

Vue.use(Vue2MediaPreview);

// OR with options

Vue.use(Vue2MediaPreview, {baseURL: 'https://jsonplaceholder.typicode.com/', headers: {'X-API-KEY': 1234}});

*3. Access it locally

<template>
    <vue2-media-preview ref="http" v-model="data" :error-fn="onError"></vue2-media-preview>
</template>

components: {
    'vue2-media-preview': Vue2MediaPreview
},

Properties

Example

<template>
    <div id="app">
        <div class="container">
            <form>
                <div class="form-group row">
                    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
                    <div class="col-sm-10">
                        <vue2-media-button v-model="data.url1"></vue2-media-button>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                    </div>
                </div>
            </form>

            <div>
                <div>
                    Item #1:
                </div>

                <div>
                    Item #2:
                    <vue2-media-button v-model="data.url2"></vue2-media-button>
                </div>

                <div>
                    Item #3:
                    <vue2-media-button v-model="data.url3"></vue2-media-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import Vue2MediaPreview from '../src/index'

    Vue.use(Vue2MediaPreview, {});

    export default {
        name: 'app',
        data() {
            return {
                data: {
                    url1: 'http://www.letsintern.com/blog/wp-content/uploads/2015/09/3050613-inline-i-6-googles-new-logo-copy-640x393.png',
                    url2: 'https://www.youtube.com/watch?v=UW_kKafCIsg&list=RDUW_kKafCIsg&start_radio=1',
                    url3: 'http://www.gravomaster.com/alarm/sounds/Chime.MP3'
                },
            }
        },
        methods: {
            test() {
                // code
            }
        },
    }
</script>

Contributing

Contributions are welcome

Build Setup

# install dependencies
npm install

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

# build for production with minification
npm run build