{ {textName}}</div> <div class="rightText"> <input type="date" class="inputstyle" v-on:change="dateChanged" > </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">
          <b>test</b>
        </span>
      <div class="menuItem" id="menuItem"></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>
    <toast v-show="toastShow" :msg="toastMsg" v-on:closeToast="closeToast($event)"></toast>
</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>
                    封装组件vue&amp;lt;template&amp;gt;  &amp;lt;div class=&quot;inputItem&quot;&amp;gt;    &amp;lt;div class=&quot;leftText&quot;&amp;gt;{{textName}}&amp;lt;/div&amp;gt;    &amp;lt;div class=&quot;rightText&quot;&amp;gt;      &amp;lt;input type=&quot;date&qu
				
前段时间搞了个公众号，我用的Vant-ui，Vant官方网站，毕竟是有赞团队开发的，项目需求有个地方用到日历，这个组件：
<van-datetime-picker
  v-model="currentDate"
   :type="dateType"
   @cancel="showPickerTime = false"
   @confirm="onConfirm"
   :formatt...
				
单向操作：获取/设置input内容
<div id="app">
    <input type="text" v-bind:value="value" v-on:input="changeValue"> <!--输入即改变value值-->
    <p>{{ value }}</p> <!--用于显示当前value值-->
<script src="https://cdn.jsdelivr.net/
				
原文地址：《Vue系列》timeago.js将时间戳转换成“几天前”“几分钟前”等格式 | 理木客​www.limuke.top1、引入timeago.js>1.引入timeago.js/**
2.在vue分过滤器中定义changeTime方法filters3.在template中使用，例如：time是需要转换的时间戳，changeTime是过滤器中定义的方法<...
				
最近在写一个手机网页时，要求使用原生的手机时间控件。需要使用标签，之前并没有注意过type=‘date’的用法，在使用时也遇到了很多问题。在此一一总结一下： 
    1.首先调用浏览器自带时间控件，input的type属性有以下几种写法： 
        type=’date’ //显示年、月、日 
        type=‘month’//显示年、月
var day = ("0" + now.getDate()).slice(-2);
//格式化月，如果小于9，前面补0
var month = ("0" + (now.getMonth() + 1)).slice(-2);
//拼装完整日期格式
var toda
				
好的，这里是一个简单的基于Vue 3.2的input子组件的封装示例。您可以将以下代码保存为一个名为Input.vue的单文件组件，然后在父组件中导入并使用它。
<template>
    <label>{{ label }}</label>
    <input type="text" v-model="value" @input="handleChange" />
</template>
<script>
  export default {
    props: {
      label: {
        type: String,
        required: true
      value: {
        type: String,
        default: ''
    methods: {
      handleChange(event) {
        this.$emit('update:value', event.target.value);
</script>
在父组件中，您可以像这样使用它：
<template>
    <Input label="Name" v-model="inputValue" />
</template>
<script>
  import Input from './Input.vue';
  export default {
    components: {
      Input
    data() {
      return {
        inputValue: ''
</script>
在这个例子中，Input组件接收两个props：label和value。label用于显示输入框旁边的文本标签，value用于显示输入框中的值。Input组件将value绑定到输入框的v-model上，当输入框的值发生改变时，会触发一个名为'update:value'的自定义事件，并将更新后的值作为参数传递给父组件。父组件可以通过v-model来监听这个事件并更新其自己的状态。
您可以根据需要自定义这些props，并在子组件中添加其他方法和事件处理程序。
            Cast of C pointer type ‘CFArrayRef‘ (aka ‘const struct __CFArray *‘) to Objective-C pointer type ‘NS
            Cast of C pointer type ‘CFArrayRef‘ (aka ‘const struct __CFArray *‘) to Objective-C pointer type ‘NS
            Build input file cannot be found: .pch