vue - 搜索框组件的封装及使用

青旅半醒 2021-09-30 14:22 1066阅读 0赞

在写一个项目的时候，我们在多个页面会使用到搜索功能，这时我们一般都会选择直接写一个组件给多个页面一起使用，下面我给大家分享一下我的组件封装，如果不妥之处，请多多指教！

### 1、子组件 ###

<template>
            <div id="searchblock" class="searching">
                <div class="searchinput">
                    <div class="iconblock">
                        <span class="iconfont icon-Fill"></span>
                    </div>
                    <div class="inputblock">
                        <form class="searchform" id="searchform" action="">
                            <input id="input" v-model="keywords" type="text" :placeholder="placeholder" autocomplete="off">
                        </form>
                    </div>
                </div>
            </div>
        </template>
        <script type="text/javascript">
        	 //逻辑文件
        import {Icon} from 'vux';
        import {XInput} from 'vux';
        import Jquery from "../../../static/js/jquery-3.3.1.min";
        
        export default {
            name: '',
            data() {
                return {
                    placeholder: '请输入关键字',
                    keywords: '',
                }
            },
            components: {
                Icon,
                XInput
            },
            props: {
                text: String,
                value: String,
            },
            methods: {
                submit() {
                    let _this = this;
                    let keywords = ''
                    Jquery('#searchform').on('submit', function () {
                        return false;
                    });
        
                    //监听回车
                    Jquery('#input').keydown(function (event) {
                        console.log('键盘keycode', event.keyCode);
                        if (event.keyCode == 13) {
                            var input = document.getElementById("input");
                            input.blur();  // 按回车键时将键盘隐藏
                            keywords = (_this.keywords);
                            // keywords=_this.keywords;
                            console.log('提交搜索====>', keywords);
                            if (!keywords || keywords == undefined) {
                                keywords = '';
                            }
                            _this.$emit('submit', keywords);
                        }
                    });
                },
            },
            watch: {
                value(val, oldval) {
                    console.log('value========>', this.value, this.keywords)
                    this.keywords = this.value;
                },
                text(val, oldval) {
                    this.placeholder = this.text;
                }
            },
            mounted() {
                if (this.text) {
                    this.placeholder = this.text;
                }
                this.keywords = this.value;
                this.submit();
                let div = ['searchblock'];
                let height = sser.adapter(div);  // 获取搜索框的高度
                console.log('height searchblock', height)
                this.$emit('height', height);
            }
        }
    	</script>
        <style lang="less" scoped>
            @import './style.css';
        </style>

### 2、使用子组件的父组件 ###

<Searching  :value="strQuery"  :text="placeholder"  @submit="submit"  @height="getsearch"></Searching>
        import Searching from '../../components/searching/index.vue';
        export default {
          name: 'home',
    	      data() {
    		        return {
    		    		strQuery:'',
    		    		placeholder:'',
    		     	}  
    	     	},
    	     	components:{
    	    		Searching 
    	    	},
    	    	methods:{
    	    		submit(value) {
    			      this.strQuery = value;
    			      // 处理相应的搜索逻辑
    			      console.log(value);
    			    },
    	    		getsearch(value) { //获取搜索框的高度
    			      	this.heighting['search'] = value;
    			    }
    			}
        }