页面提交

src/components/common/SearchBar.vue

@@ -0,0 +1,137 @@
+<template>
+  <view class="search-bar" :class="{ focused: isFocused }">
+    <view class="search-input-wrapper">
+      <text class="icon i-carbon-search"></text>
+      <input
+        v-model="searchValue"
+        class="search-input"
+        type="text"
+        :placeholder="placeholder"
+        :placeholder-style="placeholderStyle"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @confirm="handleSearch"
+      >
+      <text v-if="searchValue" class="icon i-carbon-close" @click="handleClear"></text>
+    </view>
+    <view v-if="showCancel && isFocused" class="cancel-btn" @click="handleCancel">
+      取消
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue?: string // 搜索值
+  placeholder?: string // 占位符
+  showCancel?: boolean // 是否显示取消按钮
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: '搜索商品',
+  showCancel: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'search': [value: string]
+  'cancel': []
+  'clear': []
+}>()
+
+const searchValue = ref(props.modelValue)
+const isFocused = ref(false)
+
+const placeholderStyle = 'color: #999; font-size: 28rpx'
+
+// 监听 modelValue 变化
+watch(() => props.modelValue, (val) => {
+  searchValue.value = val
+})
+
+// 监听 searchValue 变化
+watch(searchValue, (val) => {
+  emit('update:modelValue', val)
+})
+
+function handleFocus() {
+  isFocused.value = true
+}
+
+function handleBlur() {
+  setTimeout(() => {
+    isFocused.value = false
+  }, 200)
+}
+
+function handleSearch() {
+  emit('search', searchValue.value)
+}
+
+function handleClear() {
+  searchValue.value = ''
+  emit('clear')
+}
+
+function handleCancel() {
+  searchValue.value = ''
+  isFocused.value = false
+  emit('cancel')
+}
+</script>
+
+<style lang="scss" scoped>
+.search-bar {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 24rpx;
+  background: #fff;
+  transition: all 0.3s;
+
+  &.focused {
+    .search-input-wrapper {
+      flex: 1;
+    }
+  }
+}
+
+.search-input-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 64rpx;
+  padding: 0 24rpx;
+  background: #f5f5f5;
+  border-radius: 32rpx;
+  transition: all 0.3s;
+
+  .icon {
+    font-size: 32rpx;
+    color: #999;
+
+    &.i-carbon-close {
+      margin-left: auto;
+      padding: 8rpx;
+    }
+  }
+
+  .search-input {
+    flex: 1;
+    height: 100%;
+    margin-left: 16rpx;
+    font-size: 28rpx;
+    border: none;
+    outline: none;
+    background: transparent;
+  }
+}
+
+.cancel-btn {
+  margin-left: 16rpx;
+  padding: 0 16rpx;
+  font-size: 28rpx;
+  color: #333;
+  white-space: nowrap;
+}
+</style>