前端使用vue3的setup实现微博同款搜索框并且有漂亮的背景

以下是一个使用Vue3的setup函数实现微博同款搜索框并且有漂亮背景的示例代码：

<template>
  <div class="search-container">
    <div class="search-box">
      <i class="iconfont icon-search"></i>
      <input type="text" placeholder="搜索微博">
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const searchValue = ref('')

    const handleSearch = (e) => {
      searchValue.value = e.target.value
    }

    return {
      searchValue,
      handleSearch
    }
  }
}
</script>

<style>
.search-container {
  background-color: #f5f5f5;
  padding: 20px;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 20px;
  padding: 10px;
}

.search-box i {
  font-size: 20px;
  color: #999;
  margin-right: 10px;
}
</style>

在上面的代码中，我们使用了Vue3的`ref`函数来创建响应式的`searchValue`变量，在`handleSearch`函数中将输入框的值赋值给`searchValue`，从而实现搜索框的双向绑定。同时，我们也使用了一些CSS样式来实现搜索框的漂亮背景。