更新记录

1.1.7（2023-02-22） 下载此版本

添加组件事件

1.1.6（2023-02-22） 下载此版本

修改组件

1.1.5（2023-02-22） 下载此版本

修改v-model传值

平台兼容性

参数属性

事件

使用方式

<template>
    <view class="container">
        <zy-search :focus="false" fixedHead></zy-search>
        <view class="text">基础功能+固定顶部</view>

        <view class="text">自定义边框样式</view>
        <zy-search :customSearch="customSearch"></zy-search>

        <view class="text">通过value向子组件传值+回车事件</view>
        <!-- 两种传值方法都可以 -->
        <zy-search clearable @clear="clear" v-model="fieldValue" @onConfirm="onConfirm"></zy-search>

        <view class="text">清除功能</view>
        <zy-search clearable @clear="clear"></zy-search>

        <view class="text">禁用功能</view>
        <zy-search disabled placeholder="搜索框禁用"></zy-search>

        <view class="text">前置iconfont图标控件+事件</view>
        <zy-search :preIconfont="preIconfont" @preHandler="preHandler"></zy-search>

        <view class="text">前置zy-icon图标控件+前置自定义尺寸</view>
        <zy-search :preIcon="preIcon" preSize='40'></zy-search>

        <view class="text">前置图片控件</view>
        <zy-search :preImg="preImg"></zy-search>

        <view class="text">前置文字控件</view>
        <zy-search :preText="preText"></zy-search>

        <view class="text">自定义前置内容</view>
        <zy-search preSlot>
            <template>
                <view class="preSlot">
                    <image src="./static/tel.png" class="img" mode="aspectFit">
                    </image>
                    <text style="font-size: 32rpx;">phone</text>
                </view>
            </template>
        </zy-search>

        <view class="text">修改输入框文本尺寸</view>
        <zy-search size="36"></zy-search>

        <view class="text">后置按钮控件+事件(button的尺寸是size)</view>
        <zy-search :sufBtn="sufBtn" @sufHandler="sufHandler"></zy-search>

        <view class="text">后置iconfont图标控件+后置自定义尺寸</view>
        <zy-search :sufIconfont="sufIconfont" sufSize="45"></zy-search>

        <view class="text">后置zy-icon图标控件</view>
        <zy-search :sufIcon="sufIcon"></zy-search>

        <view class="text">后置图片控件</view>
        <zy-search :sufImg="sufImg"></zy-search>

        <view class="text">后置文字控件</view>
        <zy-search :sufText="sufText"></zy-search>

        <view class="text">自定义后置内容</view>
        <zy-search sufSlot>
            <template>
                <view class="sufSlot">
                    <image src="./static/voice.png" class="img" mode="aspectFit">
                    </image>
                    <view class="border"></view>
                    <image src="./static/scan.png" class="img" mode="aspectFit">
                    </image>
                </view>
            </template>
        </zy-search>

        <view class="text">后置外侧文字控件+后置外侧自定义尺寸</view>
        <zy-search :actionText="actionText" actionSize="40" @actionHandler="actionHandler"></zy-search>
    </view>
</template>
<script>
    import zySearch from '@/uni_modules/zy-function-search/components/zy-function-search/zy-function-search.vue'
    export default {
        components: {
            zySearch,
        },
        data() {
            return {
                fieldValue: '',
                customSearch: {
                    borderRadius: "10rpx",
                    border: "5rpx solid #ff0000",
                },
                preIconfont: "iconfont icon-saoyisao",
                preIcon: "magnifier",
                preImg: require('./static/scan.png'),
                preText: "搜索",
                sufBtn: "查 询",
                sufIconfont: "iconfont icon-saoyisao",
                sufIcon: "location",
                sufImg: require('./static/scan.png'),
                sufText: "搜 索",
                actionText: "搜 索"
            }
        },
        methods: {
            //清除事件
            clear() {
                uni.showToast({
                    title: "清除成功",
                    duration: 2000,
                    icon: 'none'
                });
            },
            //前置事件
            preHandler() {
                uni.showToast({
                    title: "前置事件",
                    duration: 2000,
                    icon: 'none'
                });
            },
            //回车事件
            onConfirm(val) {
                console.log(this.fieldValue)
                uni.showToast({
                    title: "回车事件：" + val,
                    duration: 2000,
                    icon: 'none'
                });
            },
            //后置事件
            sufHandler(val) {
                uni.showToast({
                    title: "后置事件：" + val,
                    duration: 2000,
                    icon: 'none'
                });
            },
            //后置外侧事件
            actionHandler(val) {
                uni.showToast({
                    title: "后置外侧事件：" + val,
                    duration: 2000,
                    icon: 'none'
                });
            },
        },
    }
</script>

<style lang="scss" scoped>
    .container {
        padding-bottom: 10rpx;
    }

    .text {
        padding: 20rpx 0 0 20rpx;
        font-size: 26rpx;
        color: #999999;
    }

    .preSlot {
        display: flex;
        margin: auto 0;
        white-space: nowrap;
    }

    .sufSlot {
        display: flex;
        margin: auto 0;
    }

    .img {
        width: 40rpx;
        height: 40rpx;
        margin: auto 0;
    }

    .border {
        height: 40rpx;
        margin: auto 10rpx;
        border-right: 5rpx solid #e9e9e9;
    }
</style>

1.若使用到iconfont图标，需至iconfont网站自行下载

2.若使用到zy-icon图标，需至主页下载https://ext.dcloud.net.cn/plugin?id=10518配套使用

如使用过程中有任何问题，或者您有一些好的建议，欢迎联系QQ：2360273432