aurora-admin/frameworks-mobile/Search.uniapp.vue

<template>
  <view class="kole-m-search" :class="searchClass">
    <view class="kole-m-search__form">
      <view class="kole-m-search__icon"></view>
      <input
        class="kole-m-search__control"
        type="text"
        confirm-type="search"
        :value="value"
        :placeholder="placeholder"
        :disabled="disabled"
        :aria-label="label"
        placeholder-class="kole-m-search__placeholder"
        @input="onInput"
        @confirm="onConfirm"
      />
      <view
        v-if="clearable && filled && !disabled"
        class="kole-m-search__clear"
        role="button"
        aria-label="清除"
        @tap="clear"
      >
        <text>✕</text>
      </view>
    </view>
    <view
      v-if="showCancel"
      class="kole-m-search__cancel"
      :role="disabled ? '' : 'button'"
      :aria-disabled="disabled ? 'true' : 'false'"
      @tap="onCancel"
    >
      <text>{{ cancelText }}</text>
    </view>
    <slot></slot>
  </view>
</template>

<script setup>
/* uni-app 端 · 搜索框（移动端）— 规格 §28
   跨端差异：
   ① <input> 是 uni 基础组件，事件对象是 { detail: { value } }，没有 DOM 的 event.target；
   ② 键盘右下角键位用 confirm-type="search"（对应 @confirm），不是 keydown.enter；
   ③ 取消动作与清除按钮用 view + role="button"（小程序没有可聚焦的原生 button 语义），点击用 @tap；
   ④ uni 的 input 没有 type="search" 的样式差异，用 type="text" + confirm-type 表达语义。
   尺寸用 rpx：88rpx = 375pt 下的 44px 触控最小边长。 */
import { computed } from 'vue';

const props = defineProps({
  value: { type: String, default: '' },
  placeholder: { type: String, default: '' },
  round: { type: Boolean, default: true },
  showCancel: { type: Boolean, default: false },
  clearable: { type: Boolean, default: true },
  disabled: { type: Boolean, default: false },
  cancelText: { type: String, default: '取消' },
  label: { type: String, default: '搜索' }
});
const emit = defineEmits(['input', 'search', 'clear', 'cancel']);

const filled = computed(() => String(props.value || '').length > 0);

const searchClass = computed(() => [
  props.round ? 'kole-m-search--round' : '',
  filled.value ? 'is-filled' : '',
  props.showCancel ? 'is-cancelable' : '',
  props.disabled ? 'is-disabled' : ''
].filter(Boolean));

/* uni 的 <input> 事件对象为 { detail: { value } }，无 DOM event.target */
function onInput(e) {
  if (props.disabled) return;
  emit('input', e && e.detail ? e.detail.value : '');
}

function onConfirm(e) {
  if (props.disabled) return;
  emit('search', e && e.detail ? e.detail.value : props.value);
}

function clear() {
  if (props.disabled) return;
  emit('clear');
}

function onCancel() {
  if (props.disabled) return;
  emit('cancel');
}
</script>

<style>
.kole-m-search {
  --kole-m-search-height: 88rpx;  /* 搜索框高度（88rpx = 44px，触控最小边长） */
  --kole-m-search-radius: 8rpx;   /* round=false 时的圆角 */
  --kole-m-touch-target: 88rpx;
  --kole-m-font-size-body: 32rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
}

.kole-m-search--round { --kole-m-search-radius: 999rpx; }

.kole-m-search__form {
  flex: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: var(--kole-m-search-height);
  padding: 0 24rpx;
  border: 1rpx solid var(--kole-color-border);
  border-radius: var(--kole-m-search-radius);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-body);
}

.kole-m-search__form:focus-within { border-color: var(--kole-color-brand); }

/* 放大镜：纯装饰方块（uni 端不引图标字体，用边框圆点 + 短柄由 CSS 画） */
.kole-m-search__icon {
  flex-shrink: 0;
  width: 28rpx;
  height: 28rpx;
  border: 4rpx solid var(--kole-color-text-secondary);
  border-radius: 50%;
}

.kole-m-search__control {
  flex: 1;
  min-width: 0;
  height: var(--kole-m-search-height);
  padding-left: 16rpx;
  font-size: var(--kole-m-font-size-body);
  color: inherit;
}

.kole-m-search__placeholder { color: var(--kole-color-text-placeholder); }

.kole-m-search__clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88rpx;
  height: 88rpx;
  margin-right: -24rpx;
  color: var(--kole-color-text-placeholder);
  font-size: var(--kole-m-font-size-label);
}

.kole-m-search__cancel {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 88rpx;
  min-height: 88rpx;
  padding: 0 16rpx;
  color: var(--kole-color-brand);
  font-size: var(--kole-m-font-size-body);
}

.kole-m-search.is-disabled .kole-m-search__form {
  background-color: var(--kole-color-disabled-bg);
  color: var(--kole-color-text-disabled);
}
</style>