uni-app实现的搜索功能可以应用到vue和小程序

矫情吗；* 2021-09-08 17:30 396阅读 0赞

search.vue

<template>  
    <view class="search" :style="\{ backgroundColor: backgroundColor \}">  
        <view class="content" :style="\{ 'border-radius': radius + 'px', border: border \}">  
            <view class="content-box" :class="\{ center: mode === 2 \}">  
                <text class="icon icon-search">&\#xe61c;</text>  
                <input class="input" :class="\{ center: !active && mode === 2 \}" :focus="isFocus" :placeholder="placeholder" v-model="inputVal" @focus="focus" @blur="blur" />  
                  
                <text v-if="isDelShow" class="icon icon-del" @click="clear">&\#xe644;</text>  
            </view>  
            <view v-show="(active && show && button === 'inside') || (isDelShow && button === 'inside')" class="searchBtn" @click="search">搜索</view>  
        </view>  
        <view v-if="button === 'outside'" class="button" :class="\{ active: show || active \}" @click="search">  
            <view class="button-item">\{ \{ !show ? searchName : '搜索' \}\}</view>  
        </view>  
    </view>  
</template>  
   
<script>  
export default \{  
    props: \{  
        mode: \{  
            type: Number,  
            default: 1  
        \},  
        button: \{  
            type: String,  
            default: 'outside'  
        \},  
        show: \{  
            type: Boolean,  
            default: true  
        \},  
        radius: \{  
            type: String,  
            default: '60'  
        \},  
        placeholder: \{  
            type: String,  
            default: '请输入搜索内容'  
        \},  
        backgroundColor: \{  
            type: String,  
            default: '\#fff'  
        \},  
        border: \{ type: String, default: '1px \#f5f5f5 solid' \}  
          
    \},  
    data() \{  
        return \{  
            active: false,  
            inputVal: '',  
            searchName: '取消',  
            isDelShow: false,  
            isFocus: false  
        \};  
    \},  
    methods: \{  
        focus() \{  
            this.active = true;  
        \},  
        blur() \{  
            this.isFocus = false;  
            if (!this.inputVal) \{  
                this.active = false;  
            \}  
        \},  
        clear() \{  
            this.inputVal = '';  
            this.active = false;  
            this.$emit('search', '');  
        \},  
        getFocus() \{  
            this.isFocus = true;  
        \},  
        search() \{  
            if (!this.inputVal) return;  
            console.log(this.inputVal);  
            this.$emit('search', this.inputVal);  
        \}  
    \},  
    watch: \{  
        inputVal(newVal) \{  
            if (newVal) \{  
                this.searchName = '搜索';  
                this.isDelShow = true;  
            \} else \{  
                this.searchName = '取消';  
                this.isDelShow = false;  
            \}  
        \}  
    \}  
\};  
</script>  
   
<style lang="scss" scoped>  
.search \{  
    display: flex;  
    width: 100%;  
    border-bottom: 1px \#f5f5f5 solid;  
    box-sizing: border-box;  
    padding: 15upx;  
    font-size: $uni-font-size-base;  
    background: \#fff;  
    .content \{  
        display: flex;  
        align-items: center;  
        width: 100%;  
        height: 60upx;  
        border: 1px \#ccc solid;  
        background: \#fff;  
        overflow: hidden;  
        transition: all 0.2s linear;  
        border-radius: 30px;  
   
        .content-box \{  
            width: 100%;  
            display: flex;  
            align-items: center;  
            background-color:\#F4F4F4;  
            &.center \{  
                justify-content: center;  
            \}  
            .icon \{  
                padding: 0 15upx;  
                  
                &.icon-del \{  
                    font-size: 38upx;  
                      
                \}  
            \}  
            .input \{  
                width: 100%;  
                max-width: 100%;  
                line-height: 60upx;  
                height: 60upx;  
                color:\#333;  
                font-size:28upx;  
                // transition: all 0.2s linear;  
                &.center \{  
                    width: 200upx;  
                \}  
                &.sub \{  
                    // position: absolute;  
                    width: auto;  
                    color: grey;  
                \}  
            \}  
        \}  
        .searchBtn \{  
            height: 100%;  
            flex-shrink: 0;  
            padding: 0 30upx;  
            background: $uni-color-success;  
            line-height: 60upx;  
            color: \#fff;  
            border-left: 1px \#ccc solid;  
            transition: all 0.3s;  
        \}  
    \}  
   
    .button \{  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        position: relative;  
        flex-shrink: 0;  
        width: 0;  
        transition: all 0.2s linear;  
        white-space: nowrap;  
        overflow: hidden;  
        &.active \{  
            padding-left: 15upx;  
            width: 100upx;  
            color: \#8BC34A;  
        \}  
    \}  
\}  
@font-face \{  
    font-family: 'iconfont';  
    src: url('https://at.alicdn.com/t/font\_989023\_efq0mtli526.ttf') format('truetype');  
\}  
.icon \{  
    font-family: iconfont;  
    font-size: 32upx;  
    font-style: normal;  
    color: \#999;  
\}  
</style>

引用 搜索框

Quotesearch.vue

<template>  
    <view>  
      =============================  
    使用  
        <mSearch :show="false" @search="search($event, 1)"></mSearch>  
      ==================================  
下面是写的一些别的 可以不用看  
   
        <view class="hot-search-wrap" v-if="isShowHotKey">  
            <view class="hot-search"><text class="shugang"></text> <text class="textinfo">热门搜索</text> </view>  
            <view class="hot-key-wrap">  
                <view class="hot-key" v-for="(item, index) in mhotKey" :key="index" @tap="search(item, '')">\{ \{ item \}\}</view>  
            </view>  
        </view>  
        <view class="wrapper" v-if="jobList">  
            <view class="job-list-wrap">  
                <view class="job-list" v-for="(item, index) in jobList" :key="item.id" @tap="goDetailPage(item.id)">  
                    <view class="icon"><image :src="item.thumbimg" mode=""></image></view>  
                    <view class="job-con-wrap">  
                        <view class="job-title">  
                        \{ \{ item.product\_name \}\}   
                        <image class="hot" :src="item.tag\_logo" mode=""></image>  
                        </view>  
                        <view class="job-tip">\{ \{ item.settlement \}\} | \{ \{ item.recruitment \}\} | \{ \{ item.sex \}\}</view>  
                    </view>  
                    <view class="job-rich">  
                        <text class="job-salary">\{ \{ item.remuneration \}\}</text>  
                        <text class="job-cen">\{ \{ item.remuneration\_type \}\}</text>  
                    </view>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  
   
<script>  
//引入进来  
   
import mSearch from '@/components/mehaotian-search/search.vue';  
api 是封装了请求数据 不用看  
import \{ api \} from '@/common/api.js';  
export default \{  
   
// 注册子组件  
    components: \{  
        mSearch  
    \},  
   
    data() \{  
        return \{  
            keyword: '',  
            jobList: '',  
            mhotKey: \['服务员', '客服', '销售', '在线直播','提成','校园代理','家教','餐饮','促销','派单','日结','分拣打包'\],  
            isShowHotKey: true  
        \};  
    \},  
    methods: \{  
        search(e, val) \{  
            // console.log(e, val);  
            // this\['val'+val\] = e;  
            if (e == '') \{  
                uni.showToast(\{  
                    title: '请输入关键词',  
                    icon: 'none',  
                    duration: 2000  
                \});  
                return;  
            \}  
            this.getJoblist(1, 20, e).then(rs => \{  
                let \[err, res\] = rs;  
                let \{ code, data \} = res.data;  
                if (code == 1001) \{  
                    this.jobList = data;  
                    this.isShowHotKey = false;  
                \} else \{  
                    uni.showToast(\{  
                        title: '换一个关键词试试吧',  
                        icon: 'none',  
                        duration: 2000  
                    \});  
                \}  
            \});  
        \},  
        goDetailPage(key) \{  
            uni.navigateTo(\{  
                url: '/pages/select/detail?id=' + key  
            \});  
        \},  
        getJoblist(\_page = 1, \_limit = 10, \_keyword) \{  
接口换成自己的  
            return api.post('https://job.liaotaba.com/api/product/dataList', \{  
                page: \_page,  
                limit: \_limit,  
                product\_type: this.pid,  
                keyword: \_keyword,  
                token: uni.getStorageSync('token') ? uni.getStorageSync('token') : '',  
                uid: uni.getStorageSync('uid') ? uni.getStorageSync('uid') : '',  
                type: '',  
                is\_selected: '',  
                is\_hot: '',  
                is\_tuijian: ''  
            \});  
        \}  
    \}  
\};  
</script>  
<style lang="scss">  
.hot-search-wrap \{  
    padding: 20upx;  
    .hot-search \{  
            font-size: 32upx;  
            font-weight: 500;  
            color: \#333;  
            padding:10upx;  
            overflow: hidden;  
            position:relative;  
            .shugang\{  
                display: inline-block;  
                width: 6upx;  
                height: 30upx;  
                background-color: \#89C756;  
                position: absolute;  
                top: 18upx;  
                left: 30upx;  
            \}  
            .textinfo\{  
                display: inline-block;  
                width: 200upx;  
                height: 34upx;  
                margin-left: 40upx;  
                color: \#333333;  
                font-weight: 600;  
                  
                  
            \}  
    \}  
    .hot-key-wrap \{  
        overflow: hidden;  
        margin-top: 20upx;  
        .hot-key \{  
            float: left;  
            margin-right: 20upx;  
            padding: 14upx 40upx;  
            margin-bottom: 30upx;  
            background: \#f4f4f4;  
            font-size: 28upx;  
            border-radius: 10upx;  
            color: \#898989;  
            font-weight: 600;  
        \}  
    \}  
\}  
.wrapper \{  
    padding: 10upx 30upx 0;  
\}  
.job-list-wrap \{  
    overflow: hidden;  
    .job-list \{  
        overflow: hidden;  
        border-bottom: 2upx solid \#d7d7d7;  
        padding: 30upx 0 32upx;  
        .icon \{  
            float: left;  
            width: 56upx;  
            height: 56upx;  
            image \{  
                width: 56upx;  
                height: 56upx;  
            \}  
        \}  
        .job-con-wrap \{  
            float: left;  
            margin-left: 19upx;  
            width: 424upx;  
            font-size: 30upx;  
            .job-title \{  
                overflow: hidden;  
                white-space: nowrap;  
                text-overflow: ellipsis;  
                color: \#333333;  
                font-size: 35upx;  
                font-weight: 600;  
                .hot \{  
                    width: 60upx;  
                    height: 30upx;  
                    margin-left: 20upx;  
                \}  
            \}  
            .job-tip \{  
                margin-top: 22upx;  
                font-size: 24upx;  
                color: \#868686;  
                clear: both;  
            \}  
        \}  
        .job-rich \{  
            float: left;  
            width: 190upx;  
            text-align: right;  
            font-size: 36upx;  
            font-weight:600;  
            color:rgba(229,28,35,1);  
            overflow: hidden;  
            white-space: nowrap;  
            text-overflow: ellipsis;  
            margin-top: 30upx;  
            .job-salary \{  
                font-size:36upx;  
                font-family:PingFangSC;  
                font-weight:600;  
                color:rgba(229,28,35,1);  
                text-align: right;  
            \}  
            .job-cen\{  
                font-size:28upx;  
                font-family:PingFangSC;  
                font-weight:400;  
                color:rgba(229,28,35,1);  
                text-align: right;  
            \}  
        \}  
    \}  
\}  
</style>