组件 - 搜索(search) - vue

1、组件

1.1、html 部分

<template>
<div class="search_box">
	<div class="input_clear_box">
		<input type="text" :placeholder="getData.pla" v-model="searchVal" />
		<div class="clear" @click="clear">
			<div>×div>
		div>
	div>
	<div class="search_btn" @click="searchBtn(3)">{
    { getData.searchBtn }}div>
div>
template>

1.2、JavaScript 部分

export default {
     
	props: {
     
		searchValue: {
     
      		type: String,
      		default: () => {
     
        		return '';
      		},
    	},
    
		getData: {
     
			type: Object,
			default: () => {
     
				return {
     };
			},
		},
	},

	data() {
     
		return {
     
			// 双向绑定
			searchVal: '',
			// 防抖
			timer: undefined,
		};
	},

 	watch: {
     
		// 实时监听
		searchVal: {
     
			handler(val) {
     
				if (val.length == 0) {
     
					this.searchBtn(1);
				} else {
     
					this.searchBtn(2);
				}
			},
			// 首次打开就执行一次
			// immediate: true,
			// 深度监听
			deep: true,
		},

		// 选项卡切换监听
    	searchValue: {
     
      		handler(newVal) {
     
        		this.searchVal = newVal;
      		},
      		// immediate: true,
      		deep: true,
    	},
	},

	methods: {
     
		// 清空输入框
		clear() {
     
			this.searchVal = '';
		},

		// 点击搜索
		searchBtn(i) {
     
			let that = this;
      		if (i == 2) {
     
        		clearTimeout(that.timer);
        		that.timer = setTimeout(() => {
     
          			that.$emit('searchFun', that.searchVal);
        		}, 600);
      		} else if (i == 3 && that.searchVal.length == 0) {
     
        		that.$toast(`${
       that.getData.pla}`);
      		} else {
     
        		that.$emit('searchFun', that.searchVal);
      		}
		},
	},
};

1.3、Css 部分

.search_box {
     
  width: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 12px 15px;
  font-size: 14px;
  color: #a6a6a6;
  line-height: 30px;
}

.input_clear_box {
     
  flex: 7;
  background-color: #f1f2f4;
  border-radius: 15px;
  display: flex;
}

input {
     
  flex: 6;
  background-color: #f1f2f4;
  border-radius: 15px;
  padding-left: 10px;
  color: #666666;
}

input::-webkit-input-placeholder {
     
  /* WebKit browsers */
  font-size: 14px;
  color: #ccc;
}
input:-moz-placeholder {
     
  /* Mozilla Firefox 4 to 18 */
  font-size: 14px;
  color: #ccc;
}
input::-moz-placeholder {
     
  /* Mozilla Firefox 19+ */
  font-size: 14px;
  color: #ccc;
}
input:-ms-input-placeholder {
     
  /* Internet Explorer 10+ */
  font-size: 14px;
  color: #ccc;
}

.clear {
     
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clear > div {
     
  width: 13px;
  height: 13px;
  border: 1px solid #999999;
  border-radius: 50%;
  font-size: 13px;
  text-align: center;
  line-height: 13px;
  cursor: pointer;
}

.search_btn {
     
  flex: 1;
  text-align: right;
  cursor: pointer;
}

2、使用组件

2.1、html 部分

<-- 没有选显卡的时候可以不写 :searchValue="seaVal" 属性 -->
<search :getData="searchObj" @searchFun="searchF" :searchValue="seaVal">search>

2.2、JavaScript 部分

// 单页面引入搜索组件
import Search from '@/views/gs/components/search/search';

// 全局引入搜索组件
// 在 main.js 文件中引入
// 引入搜索组件
// import Search from '@/components/search/search'
// 挂在搜索组件
// Vue.component('search', Search)

export default {
     
	components: {
     
		Search,
	},
	
	data() {
     
		// 请求参数
		query: {
     
			search: ''
		},
		
		// 搜索提示
		searchObj: {
     
			pla: '请输入申请人',
			searchBtn: '搜索',
		},

		// 没有选项卡时可以不写 seaVal
      	seaVal: '',
	},

	methods: {
     
		// 子组件触发的函数
		searchF(data) {
     
			this.query.search = data;
      		this.seaVal = data;
		},

		// 选项卡
		tab() {
     
			this.seaVal = '';
		}
	}
}