[JS] URL 접속 QR code 만들기

 

 - 작업은 Vue js로 함

 - Google Chart API 사용

 

 

<template>
  <div class="test">
    <input placeholder="접속 URL 입력" v-model="site" v-on:focusin="value = ''">
    <div class="btn" v-on:click="value = 'https://chart.googleapis.com/chart?chs=400x400&cht=qr&chl='+site+'&choe=UTF-8'">생성</div>
    <img :src="value" v-if="this.value.length > 1">
  </div>
</template>

<script>
export default {
  name: 'test',
  data(){
    return{
      site: '',
      value: ''
    }
  },
  created() {


  }
}
</script>
<style scoped>
  .test{ width:100%; height:100vh; display:flex; align-items: center; flex-direction: column; }
  .btn{ width:300px; height:45px; background-color: #222222; color:white; display:flex; justify-content: center; align-items: center; margin-top:10px; cursor:pointer; }
  input{ width:300px; height:45px; border:0; border-bottom:1px solid; outline: none; margin: 100px 0 0; padding:0 3px; }
  img{ margin-top:10px; }
</style>