43 lines
1.0 KiB
Vue
43 lines
1.0 KiB
Vue
<template>
|
|
<div class="input-group mb-3 d-flex">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Search"
|
|
v-model="searchQuery"
|
|
@keyup.enter="search"
|
|
@input="preventLeadingSpace"
|
|
/>
|
|
<button type="button" class="btn btn-primary" @click="search">
|
|
<i class="bx bx-search bx-md"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const props = defineProps({
|
|
maxlength: {
|
|
type: Number,
|
|
default: 30,
|
|
required: false,
|
|
},
|
|
});
|
|
|
|
const emits = defineEmits(["update:data"]);
|
|
const searchQuery = ref("");
|
|
|
|
const search = function () {
|
|
// Type Number 일때 maxlength 적용 안됨 방지
|
|
if (searchQuery.value.length > props.maxlength) {
|
|
searchQuery.value = searchQuery.value.slice(0, props.maxlength);
|
|
}
|
|
emits("update:data", searchQuery.value);
|
|
};
|
|
|
|
const preventLeadingSpace = function () {
|
|
searchQuery.value = searchQuery.value.trimStart();
|
|
};
|
|
</script>
|