更新记录

1.0.0（2025-02-28） 下载此版本

发布初版

平台兼容性

Search 搜索框

组件名: xt-search

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

基本用法

<template>
    <view class="xt">
        <view>
            <view>基本使用</view>
            <xt-search v-model="searchValue" placeholder="请输入"></xt-search>
        </view>
        <view>
            <view>圆角模式</view>
            <xt-search v-model="searchValue" placeholder="请输入" round></xt-search>
        </view>
        <view>
            <view>左边插槽</view>
            <xt-search v-model="searchValue" placeholder="请输入">
                <template #left>
                    <xt-icon></xt-icon>
                </template>
            </xt-search>
        </view>
        <view>
            <view>右边插槽</view>
            <xt-search v-model="searchValue" placeholder="请输入" round>
                <template #right>
                    <xt-icon></xt-icon>
                </template>
            </xt-search>
        </view>
        <view>
            <view>自定义搜索图标</view>
            <xt-search v-model="searchValue" placeholder="请输入">
                <template #icon>
                    <xt-icon name="xt-icon-saoyisao"></xt-icon>
                </template>
            </xt-search>
        </view>
        <view>
            <view>一键清空</view>
            <xt-search value="一键清空" placeholder="请输入" clearable></xt-search>
        </view>
        <view>
            <view>伸缩模式(点击搜索图标可展开和收缩)</view>
            <xt-search v-model="searchValue" placeholder="请输入" round elastic></xt-search>
            <xt-search v-model="searchValue" placeholder="请输入" elastic></xt-search>
        </view>
        <view>
            <view>自定义颜色</view>
            <xt-search placeholder="边框颜色" borderColor="red"></xt-search>
            <xt-search placeholder="背景颜色" bgColor="#ccc"></xt-search>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                searchValue: ''
            }
        },
        methods: {
        }
    }
</script>
<style scoped>
    .xt {
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        gap: 20rpx;
    }
</style>

API

Event