vue中 input type=date组件封装及调用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiejunna/article/details/86643730

封装组件vue

<template>
  <div class="inputItem">
    <div class="leftText">{{textName}}</div>
    <div class="rightText">
      <input type="date" class="inputstyle" v-on:change="dateChanged" >
    </div>
  </div>
</template>

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

  methods: {
  //监听日期改变函数
    dateChanged: function($event) {
      this.$emit("dateChanged", $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">
      
          <InputDate textName="日期"  v-on:dateChanged="dateChanged($event)"></InputDate>
          
          <div class="btnContainer">
              <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 InputDate from "../basicComponents/InputDate";
export default {
  components: {
    InputDate,
    toast
  },
  data() {
    return {
      toastShow: false,
      toastMsg: "",
      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);
    },

    dateChanged:function ($event) {
        console.log($event.target.value)
    },
    clicking:function ($event) {
      console.log("pushKafka");
      console.log(this.$refs.inputDate)
    }
  },
  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>