| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <template> |
| H | 2 | <div |
| 3 | class="search-bar" | |
| 4 | :style="{ | |
| 5 | color: property.textColor | |
| 6 | }" | |
| 7 | > | |
| 8 | <!-- 搜索框 --> | |
| 9 | <div | |
| 10 | class="inner" | |
| 11 | :style="{ | |
| 12 | height: `${property.height}px`, | |
| 13 | background: property.backgroundColor, | |
| 14 | borderRadius: `${property.borderRadius}px` | |
| 15 | }" | |
| 16 | > | |
| 17 | <div | |
| 18 | class="placeholder" | |
| 19 | :style="{ | |
| 20 | justifyContent: property.placeholderPosition | |
| 21 | }" | |
| 22 | > | |
| 23 | <Icon icon="ep:search" /> | |
| 24 | <span>{{ property.placeholder || '搜索商品' }}</span> | |
| 25 | </div> | |
| 26 | <div class="right"> | |
| 27 | <!-- 搜索热词 --> | |
| 28 | <span v-for="(keyword, index) in property.hotKeywords" :key="index">{{ keyword }}</span> | |
| 29 | <!-- 扫一扫 --> | |
| 30 | <Icon icon="ant-design:scan-outlined" v-show="property.showScan" /> | |
| 31 | </div> | |
| 32 | </div> | |
| 33 | </div> | |
| 34 | </template> | |
| 35 | ||
| 36 | <script setup lang="ts"> | |
| 37 | import { SearchProperty } from './config' | |
| 38 | /** 搜索框 */ | |
| 39 | defineOptions({ name: 'SearchBar' }) | |
| 40 | defineProps<{ property: SearchProperty }>() | |
| 41 | </script> | |
| 42 | ||
| 43 | <style scoped lang="scss"> | |
| 44 | .search-bar { | |
| 45 | /* 搜索框 */ | |
| 46 | .inner { | |
| 47 | position: relative; | |
| 48 | display: flex; | |
| 49 | min-height: 28px; | |
| 50 | font-size: 14px; | |
| 51 | align-items: center; | |
| 52 | ||
| 53 | .placeholder { | |
| 54 | display: flex; | |
| 55 | width: 100%; | |
| 56 | padding: 0 8px; | |
| 57 | overflow: hidden; | |
| 58 | text-overflow: ellipsis; | |
| 59 | word-break: break-all; | |
| 60 | white-space: nowrap; | |
| 61 | align-items: center; | |
| 62 | gap: 2px; | |
| 63 | } | |
| 64 | ||
| 65 | .right { | |
| 66 | position: absolute; | |
| 67 | right: 8px; | |
| 68 | display: flex; | |
| 69 | align-items: center; | |
| 70 | justify-content: center; | |
| 71 | gap: 8px; | |
| 72 | } | |
| 73 | } | |
| 74 | } | |
| 75 | </style> | |
