uniapp 简单的可滑动搜索框（css动画）

uniapp 简单的可滑动搜索框（css动画）

效果图

首先，组件的html

<template>
    <view class="all">
        <view class="icon" :class="[bgColor,size]">
            <view class="icon_cirle" @click="seachSelect">
                <icon type="search" color="#999" size="15"></icon>
            </view>
            <input :class="isSearchShow?'input':''" placeholder="请输入关键词" v-model="keyword" @confirm="search" />
        </view>
    </view>
</template>

其次，script

<script>
export default {
    name:'smallSearch',
    data(){
        return{
            keyword:'',
            isSearchShow:false,
        }
    },
    //定义需要外界传入的参数
    props: {
        bgColor: {
			type: String,
			default: ''
        },
        color:{ 
            type: String,
            default: '',
        },
        size:Number,

    },
    methods: {
        seachSelect(){
            this.isSearchShow = !this.isSearchShow;
        }
    }
}
</script>

然后样式

 .all{
        display: flex;
        justify-content: flex-end;
    }
    .icon{
        display: flex;
        height: 60upx;
        opacity: 0.9;
        text-align: left;
        border: 2upx solid #eeeeee;
        border-radius: 30upx;
        background-color: #F5F5F5;
        color:#888888 ;
        font-size: 28upx;
        line-height: 60upx;
       
        &_cirle{
            padding: 0 18upx;
        }
        input{
            transition: width 1s;
            -webkit-transition: width 1s; /* Safari */
            width: 0upx;
        }
        .input{
            width: 195upx; 
        }
    }

最后，在别的页面调用