2-2. mixin

 

mixin이란?

아래처럼 일반적인 vue 컴포넌트에서 export default 부분을 별도 자바스크립트로 만드는 것이라고 보면 된다

 

많이 중요하다고 생각하는 함수를 mixin 파일 javascript 파일로 만들어 놓으면, 중복적으로 component method를 만들 필요가 없어진다.

 

 

 

 

 

아래와 같은 사용법으로 하나로 병합해준다. (created는 created 끼리, mounted는 mounted)

그리고 mixin 자바스크립트 먼저 실행된다.

d

 

 

 

 

---------------

전역으로 설정하기

 

index.js

import axios from 'axios'

export default {

  methods: {

    async $get(url) {

      return await axios.get(url).catch((e) => {

        console.log(e)

      }).data

    },

    async $post(url, data) {

      return await axios.post(url, data).catch((e) => {

        console.log(e)

      })

    },

    async $put(url, data) {

      return await axios.put(url, data).catch((e) => {

        console.log(e)

      })

    },

    async $delete(url) {

      return await axios.delete(url).catch((e) => {

        console.log(e)

      })

    },

    $convertDateFormat(d, f) {

      let year = ''

      let month = ''

      let day = ''

      // '20220601'

      // Date()

      if (typeof d === 'string' && d.length === 8) {

        year = d.substr(0, 4)

        month = d.substr(4, 2)

        day = d.substr(6, 2)

      } else if (typeof d === 'object') {

        year = d.getFullYear()

        month = (d.getMonth() + 1).toString().padStart(2, 0)

        day = (d.getDate() + 1).toString().padStart(2, 0)

      }

      // f - 'YYYY-MM-DD' 'MM-DD-YYYY'

      return f.replace('YYYY', year).replace('MM', month).replace('DD', day)

    },

    // #,###

    // #,###.## - 3400.1 => 3,400.1

    // #,###.#0 - 3400.1 => 3,400.10

    // #.###,##

    // $#,###.## - 3400.1 => $3,400.1

    // #,###.##원

    $convertNumberFormat(amount, format) {

      let currencySymbol = ''

      let lastSymbol = ''

      if (format.substr(0, 1) !== '#') {

        currencySymbol = format.substr(0, 1)

      }

      if (format.slice(-1) !== '#' && format.slice(-1) !== '0') {

        lastSymbol = format.slice(-1)

        // '#,###,#0%'

        format = format.substring(0, format.length - 1)

      }

      let groupingSeparator = '' // 숫자 3자리마다 구분자 기호

      let decimalSeparator = '' // 소수점 구분자 기호

      let maxFractionDigits = 0 // 소수점 몇자리까지 표기할건지

      if (format.indexOf('.') === -1) {

        // #,###

        groupingSeparator = ','

      } else if (format.indexOf(',') === -1) {

        groupingSeparator = '.'

      } else if (format.indexOf(',') < format.indexOf('.')) {

        // #,###.##

        groupingSeparator = ','

        decimalSeparator = '.'

        maxFractionDigits = format.length - format.indexOf('.') - 1

      } else {

        // #.###,##

        groupingSeparator = '.'

        decimalSeparator = ','

        maxFractionDigits = format.length - format.indexOf(',') - 1

      }

      let sign = '' // amount가 음수일 때

      let dec = 1

      for (let i = 0; i < maxFractionDigits; i++) {

        // i=0, dec = 10

        // i=1, dec = 100

        dec = dec * 10

      }

      // amount = -3500.2345

      // format = #,###.#0

      // -3500.2345 * 100 = -350023.45

      // Math.round() = -350023

      // -350023 / 100 = -3500.23

      // amount = -3500.2375

      // format = #,###.#0

      // -3500.2375 * 100 = -350023.75

      // Math.round() = -350024

      // -350024 / 100 = -3500.24

      let v = String(Math.round(parseFloat(amount) * dec) / dec)

      if (v.startsWith('-')) {

        sign = '-'

        v = v.substring(1)

      }

      // 정수든, 부동소수점이든 상관없이 무조건 소수점이하 자리수 맞춰주는 곳

      if (maxFractionDigits > 0 && format.slice(-1) === '0') {

        v = parseFloat(v).toFixed(maxFractionDigits)

      }

      let d = '' // 소수점이하만

      if (maxFractionDigits > 0 && v.indexOf('.') > -1) {

        d = v.substring(v.indexOf('.')) // .24

        // format = #.###,##

        // #,###.##

        d = d.replace('.', decimalSeparator) // .24 => ,24

        v = v.substring(0, v.indexOf('.')) // 3500

      }

      // 3500 => 3,500

      // 8281300 => 8,281,300

      const regexp = /(\d+)(\d{3})/

      // v = 3524500

      while (regexp.test(v)) {

        // $1 = 3524

        // $2 = 500

        // 3524,500

        // $1 = 3

        // $2 = 524

        // 3,524,500

        v = v.replace(regexp, '$1' + groupingSeparator + '$2')

      }

      return sign + currencySymbol + v + d + lastSymbol

    }

  }

}

 

 

 

main.js

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import mixin from './mixins/index.js'

import PageTitle from './components/fragments/PageTitle.vue'

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min.js'

const app = createApp(App)

app.use(store)

app.use(router)

app.mixin(mixin)

app.component('page-title', PageTitle) // 특정 컴포넌트를 글로벌하게 선언하여 다른 곳에서 아요할 수 있다.

app.directive('focus', {

  mounted(el, binding) {

    el.focus()

  }

})

app.directive('lowercase', {

  mounted(el) {

    el.addEventListener('input', (event) => {

      console.log(event.target.value)

      event.target.value = event.target.value.toLowerCase()

    })

  }

})

app.directive('uppercase', {

  mounted(el) {

    el.addEventListener('input', (event) => {

      event.target.value = event.target.value.toUpperCase()

    })

  }

})

app.directive('number', {

  mounted(el) {

    el.addEventListener('input', (event) => {

      console.log(event.target.value)

      event.target.value = event.target.value.replace(/\D/g, '')

    })

  }

})

app.directive('korean', {

  mounted(el) {

    el.addEventListener('input', (event) => {

      console.log(event.target.value)

      event.target.value = event.target.value.replace(

        /[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g,

        ''

      )

    })

  }

})

app.mount('#app')