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('搜索方法名称',参数);交给调用端完成

热门文章

暂无图片
编程学习 ·

无线传输技术有哪些?

什么是ZigBee? ZigBee,也称紫蜂,是一种低速短距离传输的无线网上协议,底层是采用IEEE802.15.4标准规范的媒体访问层与物理层。主要特色有低速、低耗电、低成本、支持大量网上节点、支持多种网上拓扑、低复杂度、快速、可靠、安全。 三大特征、八大优势 特征一 ZigBee能源消…
暂无图片
编程学习 ·

GPU与深度学习

GPU与深度学习一.为什么深度学习要使用CPU 深度学习:深度学习是模拟人脑神经系统而建立的数学网络模型,最大特点是需要大数据来训练,也就需要大量的并行的重复计算。 GPU:CPU的全称是Central Processing Unit,GPU的全称是Graphics Processing Unit。在命名上,这两种器件…
暂无图片
编程学习 ·

mac mysql更改了目录所遇到的坑

之前安装的目录为/usr/local/develope/mysql后来改了下目录 同时也改了MySQL文件夹名现在为/usr/local/develope/develop/mysql5.6 同时data目录还是在的配置文件已经修改 MySQL在安装或者启动的时候没有指定配置文件时候 默认找的配置文件/etc/my.cnf将basedir目录和data目录修…
暂无图片
编程学习 ·

python pytest selenium 自动化测试框架搭建

python pytest selenium 自动化测试框架搭建公司一直有这个自动化测试需求,前期利用c++或者python进行了一些自动化脚本的编写。这几天没有版本更迭,基于前期的工作,把自动化测试整理了一部分功能模块。现在的状态基本达到预期:即搭建了一个AutoTest框架,基于此实现了logi…
暂无图片
编程学习 ·

广东工业大学黎权之的百度云使用经验分享

广东工业大学黎权之的百度云使用经验分享 我将在这篇文章分享自己用了百度云这么多年来的经验。 一、百度云的分享链接食用方法 1.将分享链接完整的分享给别人 这种最直接,但如果是敏感资源的话链接容易失效 2.将分享链接/s/后的内容和提取码一同分享给别人 同样如果是敏感资源…
暂无图片
编程学习 ·

Java网络编程

端口号范围:0~65535,建议选择1024以上 UDP:面向无连接,数据不安全,速度快,不区分客户端和服务器(有发送端和接收端)(发短信) TCP:面向连接(三次握手),数据安全,速度略低,分为客户端和服务器(打电话) 1.UDP package day26;import java.io.IOException; import…
暂无图片
编程学习 ·

jsoncpp的安装与配置

某些项目需要jsoncpp库,那么本文将介绍Ubuntu下安装jsoncpp库具体步骤。安装jsoncpp前必须安装scons。1.scons下载地址:https://sourceforge.net/projects/scons 可以选择对应的版本下载2.jsoncpp下载地址:http://sourceforge.net/projects/jsoncpp/files/3.解压scons-3.1.2…
暂无图片
编程学习 ·

【Flink】Object Reuse 模式(Stream API)

1. 概述昨天在界面上看到一句话,主管让加上去,于是我去查查这个参数有什么用 官网:https://ci.apache.org/projects/flink/flink-docs-stable/dev/execution_configuration.html enableObjectReuse() / disableObjectReuse() By default, objects are not reused in Flink. …
暂无图片
编程学习 ·

微信小程序 列表渲染多层嵌套循环

前言入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉。<view wx:for="{{items}}">{{index}}: {{item.message}} </view>123 还有一个九九乘法表把数据直接写到wx…
暂无图片
编程学习 ·

Java 中内部类简单概念

概念:在一个类内部定义的类 1.内部类会生成独立的.class文件。文件名Outer$Inner.class 2.内部类可以访问外部类的私有属性,从而不破坏外部类的封装性 成员内部类(类比成员变量) 1.定义位置:类以内,方法以外 2.如何创建对象 Outer o = new Outer(); //创建外部类对象 Out…
暂无图片
编程学习 ·

Leetcode刷题链表预备知识(C)

Leetcode里的head指针指向实实在在的链表第一个结点,该结点不是哨兵结点。 对链表处理完之后,链表成为空链表,则head指针赋值NULL。 写代码的时候,不要写出p->next->next这种东西,因为如果p->next==NULL,那程序运行就报错了。 用指针的时候,一定要判其是否为NU…
暂无图片
编程学习 ·

返回什么才好c++编程题第三周

此题主要考察this指针,以及引用作左值 #include using namespace std; class A{ public: int val; // 在此处补充你的代码 (需要我自己注意的是对象已经被分配了空间了,构造函数和析构函数只是起到一个修饰或者清洁的作用) A(int x = 123 ) { val = x; …
暂无图片
编程学习 ·

比特币重生计划:去中心化的迷思

去中心化的迷思 去中心化的意义 很多人不明白去中心化其实是分两个步骤的:去中心,然后再统一形成共识。也就说要先去中心,然后再中心化。 一、先去中心化 BTC 软件的设计,就是将区块链完整地备份到每个节点的电脑上,这个软件或者说这个链或者说这个公开数据库一开始就是去…
暂无图片
编程学习 ·

less封装样式有规律的类选择器-遁地龙卷风

1.解决的问题 .class-rule(p,2,width 20px animation-dely 0.1s);可以生成下列css样式.p2 {animation-dely: 0.2s;width: 40px; } .p1 {animation-dely: 0.1s;width: 20px; }2.less 代码.class-rule(@name,@number,@rest) when(@number > 0){@max-index:length(@rest) / 2;.…
暂无图片
编程学习 ·

java.lang.NumberFormatException: null

服务器报错原因为: java.lang.NumberFormatException: null 错误原因拿不到url地址的值 数据转换出错,如果格式为String则无法转换成numberformat如何解决检查url 若url有值,则检查数值类型
暂无图片
编程学习 ·

Linux进程——exec族函数

1、为什么要使用exec族函数 当我们fork一个子进程就是为了执行一个新的程序,此时可以调用exec族函数,执行已经编译好的可执行程序或者Linux自带的ls、cd等命令。 2、exec族函数如何使用 函数原型: #include <unistd.h> extern char **environ; int execl( const cha…
暂无图片
编程学习 ·

Cesium对3dtile单个feature进行特效处理

cesium中对3dtile做特效处理的时候,目前只能对所有3dtile处理或者小区域内的3dtile(例如3dtile挖洞,淹没分析等)进行处理,本身上还是对drawcommand进行着色器的部分的改动。通常所作我们只能对选中的featrue进行更改颜色,无法做到更大限度去更改当前选中的feature,本文介…