Vue Plugin

Vue

Nuxt

데모보기

- StudyPlugin.js

export default{

install( Vue ){

Vue.prototype.getMobileDevice = function(){

let mobileKeyWords = [

'Android',

'iPhone',

'iPod',

'BlackBerry',

'Windows CE',

'SAMSUNG',

'LG',

'MOT',

'SonyEricsson'

];

let i = 0;

let len = mobileKeyWords.length;

for( i; i<len; i++ )

{

if( navigator.userAgent.match( mobileKeyWords[ i ] ) != null ){

return mobileKeyWords[ i ];

}

}

return "알 수 없음.";

}

Vue.prototype.getBrower = function(){

let browers = [

"chrome",

"opera" ,

"staroffice" ,

"webtv" ,

"beonex" ,

"chimera" ,

"netpositive" ,

"phoenix" ,

"firefox" ,

"safari" ,

"skipstone" ,

"netscape" ,

"mozilla/5.0" ,

"msie"

];

let i = 0;

let len = browers.length;

let agt = navigator.userAgent.toLowerCase();

for( i; i<len; i++ )

{

if( agt.indexOf( browers[ i ] ) != -1 ) return browers[ i ];

}

return "알 수 없음";

}

}

}

- default.vue

<template>

<div>

<nuxt/>

</div>

</template>

<script>

import Vue from "vue";

import StudyPlugin from "~/plugins/StudyPlugin";

Vue.use( StudyPlugin );

export default {

}

</script>

<style lang="scss">

</style>

- index.vue

<template>

<div class="studyplugin">

<p>{{ "결과 값 : " + value }}</p>

<button @click="showCheckMobileDevice">CHECK_MOBILE_DEVICE</button>

<button @click="showCheckBrower">CHECK_BROWER</button>

</div>

</template>

<script>

export default {

data(){

return{

value : "?"

}

},

methods : {

showCheckMobileDevice()

{

this.value = this.getMobileDevice();

},

showCheckBrower()

{

this.value = this.getBrower();

}

}

}

</script>

<style lang="scss" scoped>

.studyplugin{ text-align: center; width: 500px; margin: 0 auto; padding-top: 50px;

p{ font-size: 50px; margin-bottom: 50px; }

button{ font-size: 20px; width: 500px; height: 200px; margin-bottom: 10px; }

}

</style>