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>

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

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

发布了96 篇原创文章 · 获赞 228 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_44296929/article/details/103819301