101 lines
2.5 KiB
Vue
101 lines
2.5 KiB
Vue
<template>
|
|
<div class="mb-2">
|
|
<label :for="name" class="col-md-2 col-form-label">
|
|
{{ title }}
|
|
<span :class="isEssential ? 'link-danger' : 'd-none'">*</span>
|
|
</label>
|
|
<div class="col-md-12">
|
|
<div v-if="useInputGroup" class="input-group mb-3">
|
|
<input
|
|
:id="name"
|
|
class="form-control"
|
|
:type="type"
|
|
@input="updateInput"
|
|
:value="value"
|
|
:maxLength="maxlength"
|
|
:placeholder="title"
|
|
/>
|
|
<span class="input-group-text">@ localhost.co.kr</span>
|
|
</div>
|
|
<div v-else>
|
|
<input
|
|
:id="name"
|
|
class="form-control"
|
|
:type="type"
|
|
@input="updateInput"
|
|
:value="value"
|
|
:maxLength="maxlength"
|
|
:placeholder="title"
|
|
/>
|
|
</div>
|
|
|
|
<div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}를 확인해주세요.</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const prop = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '라벨',
|
|
required: true,
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: 'nameplz',
|
|
required: true,
|
|
},
|
|
isEssential: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'text',
|
|
required: false,
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: '',
|
|
require: false,
|
|
},
|
|
maxlength: {
|
|
type: Number,
|
|
default: 30,
|
|
required: false,
|
|
},
|
|
isAlert : {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false,
|
|
},
|
|
useInputGroup: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false,
|
|
},
|
|
});
|
|
|
|
const emits = defineEmits(['update:data', 'update:alert'])
|
|
|
|
const updateInput = function (event) {
|
|
//Type Number 일때 maxlength 적용 안됨 방지
|
|
if (event.target.value.length > prop.maxlength) {
|
|
event.target.value = event.target.value.slice(0, prop.maxlength);
|
|
}
|
|
emits('update:data', event.target.value);
|
|
|
|
// 값이 입력될 때 isAlert를 false로 설정
|
|
if (event.target.value.trim() !== '') { emits('update:alert', false); }
|
|
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|