封装input vue组件

<template>
  <div class="inputItem">
    <div class="leftText">{{textName}}</div>
    <div class="rightText">
    
      <input :type="inputType" class="inputstyle" :placeholder="placeholder" @input="inputChanged($event)">
      
    </div>
  </div>
</template>

<script>
export default {
  name: "InputItem",
  props: ["textName", "placeholder","inputType"],
  data() {
    return {};
  },
  mounted() {},

  methods: {
  //监听输入框事件
    inputChanged: function($event) {
      this.$emit("inputChanged", $event); //将值放在自定义的事件函数中作为参数
    }
  },
  computed: {}
};
</script>


<style scoped>
input:focus {
  outline: none;
  border: 1px solid #fff;
}
.inputItem {
  width: 100%;
  height: 60px;
  font-size: 18px;
  text-indent: 10px;
  letter-spacing: 10px;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-bottom: 1px solid #eceef1;
}
.leftText {
  width: 15%;
  padding-left: 1%;
  color: #757575;
  overflow: hidden;
  word-break:keep-all;
  white-space:nowrap;  
}
.rightText {
  width: 84%;
}
.inputstyle {
  width: auto;
  min-width: 50%;
  border: none;
  outline: none;
  text-indent: 3px;
  letter-spacing: 3px;
  color: #757575;
  /* border-bottom: 1px solid #6a7c9f; */
}
</style>

调用组件的vue

<template>
  <div class="main" :style="{'height':getClientHeight1}">
    <div class="menuContainer">
      <div class="menuItem">
        <span class="exportBarText">
         test >
          <b>test</b>
        </span>
      </div>
      <div class="menuItem" id="menuItem"></div>
    </div>

    <div class="dataList" :style="{'height':getClientHeight2}">
      <div class="reactDatalist">
      
          <InputItem inputType="text" textName="姓名" placeholder="必填" @inputChanged="inputChangedMer($event)"></InputItem>
          
          <InputItem inputType="text" textName="职位" placeholder="必填" :inputChanged="inputChangedTer"></InputItem>
          
              <button class="btn" @click="clicking($event)">确定</button>
          </div>
      </div>
    </div>
    <toast v-show="toastShow" :msg="toastMsg" v-on:closeToast="closeToast($event)"></toast>
  </div>
</template>

<script>
import toast from "../basicComponents/Toast";
import InputItem from "../basicComponents/InputItem";
import store from "../store/store";

export default {
  store,
  components: {
    InputItem,
    toast
  },
  data() {
    return {
      toastShow: false,
      toastMsg: "",
      mercode:"",
      tercode:"",
      date:"",
    };
  },

  methods: {
    closeToast($event) {
      console.log("closeToast");
      this.toastShow = false;
    },
    showToast: function(content) {
      let that = this;
      that.toastShow = true;
      that.toastMsg = content;
      setTimeout(function() {
        that.toastShow = false;
      }, 2000);
    },
    //输入框事件监听
    inputChangedMer: function (e) {
      this.mercode = e.target.value
      console.log(this.mercode)
    },
        //输入框事件监听
    inputChangedTer: function (e) {
      this.tercode = e.target.value
      console.log(this.tercode)
    },

    clicking:function ($event) {

    }
  },
  mounted: function(e) {
    console.log("mounted query Terminal Data");
  },
  computed: {
    getClientHeight1: function() {
      return tools.getClientHeight() - 100 + "px";
    },
    getClientHeight2: function() {
      return tools.getClientHeight() - 160 + "px";
    },
    saveTerminalListData: function(list) {
      return this.$store.commit("TerminalList", list);
    }
  }
};
</script>
<style  scoped>
.menuContainer {
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.menuItem {
  width: 50%;
  height: 60px;
}
#menuItem {
  position: relative;
  padding-left: 24%;
}

.main {
  width: 100%;
  float: left;
  font-family: NotoSansHans-Light, Arial, Helvetica, sans-serif;
}

.dataList {
  position: relative;
  width: 100%;
  background: #f0f3fa;
}

.reactDatalist {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 97%;
  min-height: 400px;
  transform: translateX(-50%);
  border-radius: 8px;
  box-shadow: 0px 0px 12px -2px #2a3853;

  overflow: auto;
  background: #fff;
}
.exportBarText {
  width: 300px;
  height: 60px;
  display: inline-block;
  padding-left: 20px;
  color: #94a0b9;
}
.btnContainer{
  width: 100%;
  height: 60px;
  margin-top: 20px;
  font-size: 18px;
  text-indent: 10px;
  letter-spacing: 10px;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.btn{
  width: 35%;
  height: 45px;
  font-size: 18px;
  text-indent: 10px;
  letter-spacing: 10px;  
}
</style>