77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
<template>
|
|
<div class="mb-4 row">
|
|
<label :for="name" class="col-md-2 col-form-label">
|
|
{{ title }}
|
|
<span :class="isEssential ? 'text-red' : 'none'">*</span>
|
|
</label>
|
|
<div class="col-md-10">
|
|
<input :id="name"
|
|
class="form-control"
|
|
:type="type"
|
|
@input="updateInput"
|
|
:value="value"
|
|
:maxLength="maxlength"
|
|
:placeholder="title" />
|
|
<div class="invalid-feedback" :class="isAlert ? 'display-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,
|
|
}
|
|
});
|
|
|
|
const emits = defineEmits(['update:data'])
|
|
|
|
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);
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.none {
|
|
display: none;
|
|
}
|
|
</style>
|