search-input.blade.php 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. {{-- resources/views/components/ui/search-input.blade.php
  2. 通用搜索输入框组件。
  3. Props:
  4. $action — 表单提交路由
  5. $value — 当前搜索词(默认空)
  6. $placeholder — 占位文字
  7. $buttonText — 按钮文字(默认"搜索")
  8. $size — lg | md(默认 md)
  9. $hiddenFields — 额外隐藏字段 array ['name' => 'value']
  10. $autofocus — 是否自动聚焦(默认 false)
  11. --}}
  12. @props([
  13. 'action',
  14. 'value' => '',
  15. 'placeholder' => '搜索…',
  16. 'buttonText' => '搜索',
  17. 'size' => 'md',
  18. 'hiddenFields' => [],
  19. 'autofocus' => false,
  20. ])
  21. <form action="{{ $action }}" method="GET" class="search-input-form">
  22. <div class="input-group {{ $size === 'lg' ? 'input-group-lg' : '' }}">
  23. <input
  24. type="text"
  25. name="q"
  26. class="form-control search-input"
  27. value="{{ $value }}"
  28. placeholder="{{ $placeholder }}"
  29. {{ $autofocus ? 'autofocus' : '' }} />
  30. @foreach ($hiddenFields as $name => $val)
  31. @if ($val)
  32. <input type="hidden" name="{{ $name }}" value="{{ $val }}">
  33. @endif
  34. @endforeach
  35. <button class="btn btn-primary" type="submit">
  36. {{ $buttonText }}
  37. </button>
  38. </div>
  39. </form>