forestry-wx/src/components/ut-search/ut-search.vue

<template>
    <!-- 搜索框 -->
    <view class="search-input d-flex a-c" :class="{ 'up-border': border }" :style="{ margin, background: bgColor, height, borderRadius }">
        <u-input v-model="value" ref="searchInputRef" cursor cursorColor="#333" clearable type="text" :focus="focused" border="none" @change="inputSearch" @clear="clear" @confirm="search" confirmType="search" :fontSize="fontSize" :maxlength="maxlength" :placeholder="placeholder">
            <template #suffix>
                <view @click.stop="search" class="d-flex j-c a-c" style="padding: 0 16rpx">
                    <image class="search_icon" src="/static/images/plant/search_icon.png" mode="widthFix" />
                </view>
            </template>
        </u-input>
    </view>
</template>
<script setup name="search">
import { defineProps, defineEmits, ref, watch } from 'vue';
import { debounce } from 'uview-plus';
const props = defineProps({
    modelValue: {
        type: String,
        default: '',
    },
    margin: {
        type: String,
        default: '24rpx',
    },
    placeholder: {
        type: String,
        default: '请输入搜索内容',
    },
    maxlength: {
        type: Number,
        default: 140,
    },
    fontSize: {
        type: String,
        default: '26rpx',
    },
    height: {
        type: String,
        default: '86rpx',
    },
    border: {
        type: Boolean,
        default: true,
    },
    // 背景颜色
    bgColor: {
        type: String,
        default: '#fff',
    },
    borderRadius: {
        type: String,
        default: '84rpx',
    },
});
const value = ref(props.modelValue);
const emit = defineEmits(['search', 'update:modelValue', 'change']);
const inputSearch = (e) => {
    debounce(() => {
        emit('update:modelValue', e);
        emit('change', e);
    }, 500);
};
const search = (e) => {
    debounce(() => {
        emit('update:modelValue', value.value);
        emit('search', value.value);
    }, 500);
};
const clear = () => {
    emit('update:modelValue', '');
    emit('change', '');
    emit('search', '');
};
const searchInputRef = ref(null);
const focused = ref(false);
const doFocus = () => {
    focused.value = true;
    // searchInputRef.value.doFocus();
};
// 监听输入框的输入事件，触发更新modelValue的值
watch(
    () => props.modelValue,
    (val) => {
        value.value = val;
    }
);
defineExpose({
    doFocus,
});
</script>
<style lang="scss" scoped>
.search-input {
    height: 86rpx;
    background-color: #fff;
    padding-left: 20rpx;
}

.search_icon {
    width: 40rpx;
    height: 40rpx;
}
</style>