Vue.js 中使用layDate插件

前阶段在Vue.js中用到了layDate插件，特此来记录一下我在使用中遇到的障碍，至于如何使用的话，官网有很详细的解释，可以看下官网：layDate插件官网。

1、说明：由于layDate插件是通过id的方式将html元素和layDate时间组件绑定到一起，所以在layDate插件应用到JQuery的页面中时，我们会将创建layDate实例的代码写到window.onload=function(){}或$(function(){})中，是要保证元素都初始化并渲染完成之后再进行绑定layDate组件创建layDate实例，而我们要在Vue.js中想应用layDate插件，我们就要将其layDate组件应用在Vue.js中，那么我们也要放到绑定的元素初始化完成后的时间点，而Vue.js的生命周期中恰好有一个阶段满足我们的要求（即：mounted中），我们在mounted钩子函数中创建好layDate实例，然后使用done的回调函数，将我们选择的时间获取到，后期可以赋值到data中用于我们向后台发送数据或是在其他地方展示等等。

2、示例：代码出处

<template>
  <div class="hello">
    <input type="text" placeholder="选择体检时间" id="orderTime" v-model="date">
  </div>
</template>

<script>
export default {
    name: "myTime",
    data() {
        return {
            date: ""// 存储选择的日期
        };
    },
    mounted() {
    	//使用：执行一个laydate实例
        laydate.render({
            elem: "#orderTime", // 指定元素
            type: "datetime", // 组件的类型：year,month,time···
　　　　　　　format: 'yyyy-MM-dd HH:mm'// 设置显示格式
           	done: value => { // 点击确认执行的回调函数，会把当前选择的时间传入进来
            	// 把选择的时间赋值给先前定义好的变量，显示在页面
                this.date = value;
            }
        });
	}
};
</script>

你要去做一个大人，不要回头，不要难过。

“去走自己的路，赢要赢得理所当然，输也要输得清清楚楚。”

来源：CSDN

作者：你好像很好吃a

链接：https://blog.csdn.net/weixin_44296929/article/details/103819301

标签

laydate