mteacher/src/components/Search.vue

<template>
    <div class="search">
        <slot name="left"></slot>
        <van-search :placeholder="placeholder" :left-icon="leftIcon" @search="onSearch" show-action v-model="searchValue">
            <template slot="action" >
                <span @click="onSearch" class="search_btn">搜索</span>
            </template>
        </van-search>
    </div>
</template>
<script>
export default {
    props: {
        placeholder: { // 提示文字
            type: String,
            default: '请输入搜索关键词'
        }
    },
    data() {
        return {
            leftIcon: require('@/assets/images/common/icon_search.png'),
            searchValue: ""
        };
    },
    methods: {
        onSearch() {
            this.$emit("onSearch", this.searchValue);
        }
    }
};
</script>
<style lang="less" scoped>
@import url("../assets/commonLess/variable.less");
.search {
    overflow: hidden;
    background-color: #fff !important;
    display: flex;
    align-items: center;
    padding: 0 12px;

    /deep/.van-search {
        flex: 1;
        background-color: #fff !important;
        margin: 15px 0;
        padding: 0;
        border-radius: 20px;
        overflow: hidden;
        /deep/.van-cell {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /deep/.van-field__control {
            font-size: 16px;
        }
    }
    /deep/.van-cell__value {
        height: 24px !important;
    }
    /deep/.van-search__action {
        color: @tFontColor;
        background-color: #f5f5f5;
        padding: 0 5px;
    }
    /deep/.van-search__content {
        background-color: #f5f5f5;
    }
    /deep/.van-field__left-icon {
        margin-top: 3px;
        height: 21px;
    }
    .search_btn {
        background: #01C1B5;
        font-size: 14px;
        color: #fff;
        padding: 4px 9px;
        border-radius: 15px;
    }
}
input::-webkit-input-placeholder {
  color: #777 !important;
  font-size: .14rem;
}

input:-moz-placeholder {
  color: #777 !important;
  font-size: .14rem;
}

input::-moz-placeholder {
  color: #777 !important;
  font-size: .14rem;
}

input:-ms-input-placeholder {
  color: #777 !important;
  font-size: .14rem;
}
</style>