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