headershoushuo.vue

<template>
      <div class="headershoushuoout">
            <!--   搜索框     -->

            <img class="myshoushuoimg" @click="shuoshouchick"
                  src="http://blog.img.duanshuilu.com/dsf12sdf1d22d222df2dsf.png" alt="">

            <input class="myinputshuoshuo" type="text" placeholder="请输入搜索关键词" v-model="propertyvalue">

            <!--     -->
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        propertyvalue: '',
                  };
            },
            methods: {
                  shuoshouchick() {
                        let that = this
                        console.log('点击了搜索框');
                        if (this.propertyvalue == '') {
                              that.$toast('请输入搜索关键词');
                              return;
                        }
                        that.$emit('fatherMethod', that.propertyvalue)

                  },

            },
      }
</script>

<style scoped>
      .myshoushuoimg {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 13%;
            left: 2%;


      }

      .headershoushuoout {
            width: 92vw;

      }

      .myinputshuoshuo {
            width: 100%;
            height: 60px;
            border-radius: 30px;
            border: 1px solid rgba(204, 204, 204, 0.5);
            padding-left: 70px;
            outline: none;
      }

      .headershoushuoout {
            width: 94vw;
            position: relative;


      }
</style>