JavaScript | vue 화폐포멧 input 컴포넌트
페이지 정보
- 작성자:
- 핵탐
- 작성일
- 12.03 13:10
- 조회
- 2,157
- 댓글
- 0
본문
[code]
<template>
<div class="currency-input">
<input
v-model="displayValue"
type="text"
class="block text-lg font-bold text-center text-white bg-blue-500 border-gray-300 rounded input-value form-input"
@blur="isInputActive = false"
@focus="isInputActive = true"
/>
</div>
</template>
<script>
export default {
props: ['value'],
data: function() {
return {
isInputActive: false,
}
},
computed: {
displayValue: {
get: function() {
if (this.isInputActive) {
return this.value.toString()
} else {
return (
'$ ' +
this.value.toFixed(0).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, '$1,')
)
}
},
set: function(modifiedValue) {
let newValue = parseFloat(modifiedValue.replace(/[^\d\.]/g, ''))
if (isNaN(newValue)) {
newValue = 0
}
this.$emit('input', newValue)
},
},
},
}
</script>
<style lang="scss" scoped>
.currency-input {
.input-value {
width: 100px;
}
}
</style>
[/code]
댓글 0개
등록된 댓글이 없습니다.