前端用vue3写一个漂亮的搜索框

这是一个简单的Vue 3搜索框组件，使用了Bootstrap框架和Font Awesome图标库：

<template>
  <div class="input-group">
    <input type="text" class="form-control" :placeholder="placeholder" v-model="value" @input="handleChange">
    <span class="input-group-text"><i class="fas fa-search"></i></span>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'SearchInput',
  props: {
    placeholder: {
      type: String,
      default: 'Search'
    },
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleChange(event) {
      this.$emit('update:value', event.target.value)
    }
  }
})
</script>

<style>
/* Included Bootstrap and Font Awesome styles */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css');

/* Customize search input styles */
.input-group {
  width: 300px;
  margin: 1rem auto;
}
.form-control {
  border-radius: 20px;
}
.input-group-text {
  background-color: #f8f9fa;
  border-radius: 20px;
}
</style>

通过导入该组件并在父组件中使用它，可以轻松创建一个漂亮的搜索框：

<template>
  <div>
    <search-input v-model="search"></search-input>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import SearchInput from './SearchInput.vue'

export default defineComponent({
  name: 'App',
  components: {
    SearchInput
  },
  setup() {
    const search = ref('')
    return { search }
  }
})
</script>