localhost-front/src/components/search/SearchBar.vue
2024-12-19 13:06:00 +09:00

28 lines
842 B
Vue

<template>
<div class="input-group mb-3 d-flex">
<input type="text" class="form-control bg-white" placeholder="Search" @change="search" />
<button type="button" class="btn btn-primary"><i class="bx bx-search bx-md"></i></button>
</div>
</template>
<script setup>
import { defineEmits } from 'vue';
const props = defineProps({
maxlength: {
type: Number,
default: 30,
required: false,
},
});
const emits = defineEmits(['update:data']);
const search = function (event) {
//Type Number 일때 maxlength 적용 안됨 방지
if (event.target.value.length > props.maxlength) {
event.target.value = event.target.value.slice(0, props.maxlength);
}
emits('update:data', event.target.value);
};
</script>