vue中 input组件封装及调用

悠悠 2022-03-22 02:02 710阅读 0赞

封装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>