How to use the layer's layData date component in the vue-cli project (code)

The content of this article is about how to use the layer's layData date component (code) in the vue-cli project. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

A friend asked me how to use the layData component in layui in the vue-cli project. I had time to check it out on the Internet and write the next article.

1. First, go to the layData official website to download the file package, and place the entire unzipped laydate folder in the static directory of the vue-cli scaffolding root

　　

2. Introduce static/laydate/laydate.js into the head tag in the entry file index.html

3. Use it in the component Without further ado, let’s get straight to the code

<template>
  <div class="hello">
    <p>你选择的日期是：{{ date }}</p>
    <p><input type="text" placeholder="点击选择日期" id="test1" v-model="date"></p>
  </div>
</template>
<script>
export default {
  name: "HelloLayData",
  data() {
    return {
      // 定义个变量用来存储选择的日期
      date: ""
    };
  },
  mounted() {
    // 使用：执行一个laydate实例
    laydate.render({
      elem: "#test1", // 指定元素
      type: "datetime", // 组件的类型：year,month,time···
      done: value => { // 点击确认执行的回调函数，会把当前选择的时间传入进来
        // 把选择的时间赋值给先前定义好的变量，显示在页面
        this.date = value;
      }
    });
  }
};
</script>
<style scoped>
</style>

Code screenshot

Related recommendations:

How to obtain the Vue-cli project Local json file

How to use bootstrap in vue-cli project

The above is the detailed content of How to use the layer's layData date component in the vue-cli project (code). For more information, please follow other related articles on the PHP Chinese website!