通过自定义组件学习Vue系列（六）【日期输入框】（附源码）

效果：

操作效果：

实现思路

显示部分为一个输入框和一个下拉选择按钮，父级是一个div容器，采用 display:flex;justify-content: space-between;让两端靠边对齐

下拉选择按钮用css画一个向下的三角形

显示部分的下方放置一个div,上级div样式为display:flex；flex-direction: column;使其能够纵向排列，该div样式设为position: relative;下面放置一个日历组件，样式设置为position: absolute;

点击下拉选择按钮（倒三角形）时，显示日历组件，并添加全局click事件，click事件的作用是不管点击在哪里都关闭日历组件，当点击日历区域时，要进行阻止冒泡处理，不然就会响应到全局click事件，将日历组件关掉了

用v-model实现数据双向绑定

组件代码

<template>
    <div class = "ui-dateinput flex flex-col">
        <div class="content font-s flex flex-center-cz padding-left-m padding-right-m flex-space-between " @click="select">
            <input v-model="val" class="ui-input font-s"/>
            <div class="menu-down margin-top-s pointer" ></div>
        </div>
        <div v-if="show" class="position-relative" >
            <div class="list flex flex-col font-s scroll">
                <date-picker :options="options"></date-picker>
            </div>
        </div>
    </div>
</template>

<script>
     import DatePicker from '@/components/datePicker/index';
     export default {
        name:"DateInput",
        props:{
            data:{},
            value:{}
        },
        model: {
            prop: "value",
            event: "change"
        },
        components:{
            DatePicker
        },
        watch:{
            value:{
                handler(newValue) {
                    console.log("newValue", newValue);
                    this.val = newValue;
                    this.options.curtime = newValue;
                },
                immediate: true,
                deep: true   //深度监听                
            },
            'options.curtime':function(){
                this.val = this.options.curtime;
                this.$emit("change", this.options.curtime);
            },
        },
        data() {
            return {
                options:{
                    curtime: "",
                    format:"yyyy-mm-dd",
                },
                val:null,
                show: false,
            }
        },
        methods:{

            select(event) {
                this.options.curtime = this.val;
                event.stopPropagation();//阻止冒泡，防止触发下层点击事件
                document.addEventListener("click", this.closeList, false);// 添加监听点击事件
                this.show = !this.show;
            },
            closeList() {
                document.removeEventListener("click", this.closeList, false);//关闭监听点击事件
                this.show = false;
            }

        }
     }
</script>

调用代码

<template>
    <div class="body">
      <div class="table">
        <div class="filter font-bold">组件库(七) datePicker日期选择组件</div>
        <div class="margin-top-l margin-left-l flex flex-col " style="width: 300px;">
            <date-input v-model="nowDate" ></date-input>

        </div>
        <div class="margin-top-l margin-left-l" >date:{
      
      {nowDate}}</div>
      </div>
    </div>
</template>

<script>
/*
       名称：组件库（七） datePicker下拉多选组件
       作者：唐赢   
       时间：2023-4-6
*/


  import DateInput from '@/components/dateInput/DateInput';
  export default {
    name: 'DateInputDemo',
    components: {
        DateInput
    },
    data () {
      return {
        nowDate:'2021-01-01'
      }
    },
    methods: {
    }
  }
</script>

<style >
  .body {
    display: flex;
    justify-content: center;
    margin-top: 73px;
    width: 100%;    
  }
  .table {
    background-color: #fff;
    width: 1080px;
    min-height: 800px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .1);
    margin-bottom: 10px;
  }
  .filter {
    display: flex;
    height: 60px;
    align-items:center;
    background-color: #fff;
    font-size: 18px;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    z-index: 0;
  }
  .select-demo {
    width: 200px;
    height: auto;
    background-color: #fff;
  }

</style>

涉及到一个日历组件，代码比较多，有兴趣的话可以直接下载源码查看