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

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