<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" />
  
<!-- <view v-if="!active && mode === 2" class="input sub" @click="getFocus">请输入搜索内容</view> -->
  
<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>