搜索框组件

展示

代码

ps：@include 为全局引入样式，用于主题切换的，需要请自行修改。

<template>
  <div class="search">
    <el-input class="search-input" type="text" v-model="searchInput" :placeholder="props.placeholder" />
    <el-icon style="font-size: 24px; color: #6c6c6c;margin-right: 15px;" @click="onCamera"><Camera /></el-icon>
    <div class="search-button" @click="onSearch">
      搜索
    </div>
  </div>
</template>

<script setup lang="ts">
import { Ref, ref } from 'vue';

const searchInput:Ref<string> = ref('')

function onCamera() {
  emit('camera')
}

function onSearch() {
  emit('search', searchInput.value)
}

const emit = defineEmits<{
  (e: 'search', val: string),
  (e: 'camera')
}>()

const props = defineProps({
  placeholder: {
    type: String,
    default: ''
  }
})
</script>

<style lang="scss" scoped>
.search {
  @include bg_color('bg-color');
  display: flex;
  align-items: center;
  padding-left: 16px;
  height: 44px;
  border-radius: 80px;
  &-input{
    width: 494.5px;
    :deep(.el-input__wrapper){
      box-shadow: none;
      background-color: transparent;
    } 
  }
  &-button {
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-right: 6px;
    padding: 5px 19px;
    background: linear-gradient(90deg,#ff9000,#ff5000);
    border-radius: 20px;
  }
}
</style>

属性

属性名	描述
placeholder	用于输入框占位符

方法

方法名	描述
onSearch	搜索事件（val：输入框内容）
Camera	相机图标点击事件