更新记录

1.0.0（2025-01-08） 下载此版本

搜索组件

平台兼容性

调用实例

<template>
    <view class="content">
        <view class="item">
            <view class="label">默认搜索框</view>
            <mz-search></mz-search>
        </view>
        <view class="item">
            <view class="label">圆角 & 指定placeholder文字和样式&字体颜色&字体大小 & 默认图标颜色</view>
            <mz-search borderRadius="50rpx" placeholder="请输入搜索内容" placeholderStyle="color:#ff5000" iconColor="#ff5000" fontColor="#ff5000" fontSize="32"></mz-search>
        </view>
        <view class="item">
            <view class="label">显示外部搜索按钮-文字模式</view>
            <mz-search borderRadius="50rpx" searchBtn="outside" @confirm="confirm"></mz-search>
        </view>
        <view class="item">
            <view class="label">显示内部搜索按钮-文字模式</view>
            <mz-search borderRadius="50rpx" searchBtn="inside"></mz-search>
        </view>
        <view class="item">
            <view class="label">显示内部搜索按钮-按钮模式</view>
            <mz-search borderRadius="50rpx" searchBtn="inside" searchMode="2"></mz-search>
        </view>
        <view class="item">
            <view class="label">自定义按钮样式</view>
            <mz-search borderRadius="50rpx" searchBtn="inside" searchMode="2" searchBtnStyle="background-color:#333333;padding:8rpx 40rpx;"></mz-search>
        </view>
        <view class="item">
            <view class="label">自定义图标</view>
            <mz-search borderRadius="50rpx">
                <template  #inputIcon>
                    <icon type="clear" size="18" style="margin-right: 10rpx;"/>
                </template>
            </mz-search>
        </view>
        <view class="item">
            <view class="label">边框颜色</view>
            <mz-search borderRadius="50rpx" border="1px solid #ff5000"></mz-search>
        </view>
        <view class="item">
            <view class="label">边框和背景颜色</view>
            <mz-search borderRadius="50rpx" border="1px solid #ff5000" backgroundColor="rgba(255,80,0,0.1)"></mz-search>
        </view>
    </view>
</template>

可用属性

可用插槽

方法