vue中实现一个搜索框的组件

在前端开发中有些东西就会经常反复使用，这样的东西抽取成组件比较合适，最近工作中遇到一个搜索楼盘的页面需要反复多次使用，抽取成了组件，现在记录一下

1.创建一个searchcom.vue文件

2.文件中填入一下代码，具体内容在代码后边进行解释

<template> <div> <header class="page-header"> <div class="searchwrap border-bottom"> <div class="searchbox"> <span class="icon-search"><img :src="images.searchpng" alt=""></span> <input type="text" class="input-search" v-model="keyword" id="searchTxt" ref="searchTxt" placeholder="请输入楼盘名称" filterable value=""> <span class="search-x"><img :src="images.searchxpng" alt="" @click="clearInput"></span> </div> <span class="quxiao" style="display:block;" @click="cancel">取消</span> </div> </header> <div class="page-container mt44"> <div class="stafflist" > <ul> <li class="clearfix" v-for="(project,index) in searchData" :key="index" @click="selectProject(project)"> <div class="staffinfo"> <div class="s-desc"> <h2>{{project.projname}} <span v-if="project.aliasprojname!=''" class="f13">({{project.aliasprojname}})</span></h2> <p>{{project.district}} {{project.comarea}}</p> </div> </div> </li> </ul> </div> </div> <div class="mask" style="display:none"></div> </div> </template> <script> import {Toast, Indicator} from 'mint-ui'; import axiosService from '@/pages/wap/api/axiosservice.js'; export default { props : { city : String }, data() { return { searchData:[], keyword : '', images: { searchpng:require('@/pages/wap/assets/images/search.png'), searchxpng:require('@/pages/wap/assets/images/search-x.png') } } }, watch : { 'keyword' : function(newVal,oldVal){ this.getSearchProjects(newVal) } }, methods:{ cancel(){ this.$emit('cancelSearch'); }, clearInput(){ this.keyword=''; }, selectProject(project){ //选择楼盘 this.$emit('selectProject',project); }, getSearchProjects(keyword){ //搜索楼盘 Indicator.close(); var currentTime = new Date().getTime(); this.newcodeSearchTime = currentTime; setTimeout(() => { if (this.newcodeSearchTime == currentTime) { var searchparm = { keyword: keyword,city:this.city }; this.newcodeSearchTime = currentTime; this.addTip= ''; axiosService({ url: process.env.VUE_APP_apiHost+'/project/getSearchProjects', method: 'get', params: searchparm }).then(res => { if (res != null && res.data != null) { if (res.status === 1) { this.searchData = res.data; } else { Toast({ message: res.message, duration: 2000 }); } } }).catch(err => { Toast({ message: err, duration: 2000 }); this.isLoading = false; }); } }, 300); } } } </script> <style scoped> </style>

template 里边是html的内容

其中

    import {Toast, Indicator} from 'mint-ui';

    import axiosService from '@/pages/wap/api/axiosservice.js';

是分别引入移动h5需要的组件和调取接口的文件，

props中数据是需要从调用组件时传入的参数或者叫做数据，一般最好是指定类型

watch里边的keyword是要监控数据keyword的变化，其中的两个参数一个是原来的值，一个是变化后的新值

不管是watch还是methods中的方法，如果有些方法操作不是共用的，需要调用的地方进行单独的处理则可以使用this.$emit('cancelSearch');  或者带参数形式 this.$emit('selectProject',project); 交给调用的地方进行完成

cancelSearch 和selectProject 都是方法名，在调用的地方需要完成这两个方法，project是方法中传递过父组件的数据

调用的地方代码书写形式

 

将代码粘贴到这里，方便以后复制

 <searchcom :city="userInfo.city" @selectProject="selectProject" @cancelSearch="cancelSearch" v-if="searchShow" ></searchcom>

components: {

           searchcom  //如果需要引入多个组件用,隔开就行

 },

          cancelSearch(){

                this.searchShow=false;

            },

            selectProject(project){

                var addparm={

                    orderId:this.$route.query.orderId,

                    newCode:project.newcode,

                    projName:project.projname,

                    city:project.city,

                    propertyType:project.purpose,

                    district:project.district,

                    comarea:project.comarea,

                    otherProjName:project.aliasprojname

                }

                this.addProj(addparm);

            },

axiosservice.js代码也分享一下，如下

// 创建axios实例 import axios from 'axios'; const service = axios.create({ // baseURL:process.env.NODE_ENV === 'development' ? '/rawapi' : process.env.VUE_APP_apiHost.replace("/esfapi",''), timeout: 5000, // 请求超时时间 withCredentials: true }); service.interceptors.request.use( config => { return config; }, error => { // Do something with request error console.error(error); // for debug Promise.reject(error); } ); service.interceptors.response.use( response => { return response.data; }, error => { let message = '请求异常'; if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') > -1) { message = '请求超时'; } if (error.response) { let errorMessage = null; if (error.response.data && error.response.data.message ) { errorMessage = error.response.data.message; } if (errorMessage) { message = errorMessage; } } return { status:0, message:message }; } ); export default service;

最后的实现效果如下：

点击添加楼盘显示出搜索组件，输入搜索内容展示出搜索到的楼盘列表选择楼盘列表中的一项之后添加到列表中，添加的操作就是在上边的selectProject方法中，搜索楼盘的接口调用是放到了组件里，如果搜索楼盘接口不是在组件中也可以用this.$emit('搜索方法名称',参数);交给调用端完成