在vue中使用laydate插件

今天碰到一个同学问了laydate在vue中的使用问题，因为以前在项目中也用过laydate，也算有一些了解，所以在这里做一个简单的测试
官方网址：http://www.layui.com/laydate/
GitHub地址：https://github.com/sentsin/laydate/

测试文件：新建vue的webpack模板

1、首先是组件里import引用
这里是在components中的hello.vue中进行

<input type="text" id="test" v-model="date" class="ipt" @click="getDate" >

import laydate from 'layui-laydate'
  export default {
    name: 'hello',
    data () {
      return {
        date: null
      }
    },
    methods: {
      getDate () {
        console.log(0)
        laydate.render({
          elem: '#test',
          done: (value) => {
            this.date = value
          }
        })
      }
    }
  }

效果：没有报错，点击输入框也没有反应

效果图1.png

2、在组件中单独引入不行，那么我们来尝试一下在入口文件index.html中做常规js文件引用，并在index.html中调用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="static/laydate/laydate.js"></script>
    <title>laydatedemo</title>
    <style>
      .box{width: 200px; margin:0 auto }
    </style>
  </head>
  <body>
    <div id="app" ></div>
    <!-- built files will be auto injected -->
    <div class="box">
      <input type="text" id="test" >
    </div>
    <script>
      laydate.render({
         elem: '#test',
         done: (value) => {
            this.date = value
          }
       })
    </script>
  </body>
</html>

效果：没有报错，laydate能够正常使用

效果图2.png

3、上面的第二种方式laydate是能够使用的，但是一般来说项目需求会要求我们是在组件之中调用laydate，而不是在入口文件中调用，那么第三种方法，我们在index.html中引入，而在组件中调用
index.html

<script src="static/laydate/laydate.js"></script>

hello.vue

<template>
    <div class="hello">
      <H1>laydate时间插件测试</H1>
      <input type="text" id="test" v-model="date" class="ipt" >
    </div>
</template>
<script>
  export default {
    name: 'hello',
    mounted() {
      laydate.render({
        elem: '#test',
        done: (value) => {
          this.date = value
        }
      })
    }
  }
</script>

结果：运行报错，提示laydate没有声明

运行报错.png

4、我们在入口文件引入了laydate.js，并且在入口文件中引用是可行的，但是在组件中引用却会报未声明的错误，会不会是我们在入口文件引入的laydate是全局的，但是在组建中没有加载到，所以第四次测试时获取全局的laydate对象，依然是在index.html引入js文件，然后在组件中调用
index.html

<script src="static/laydate/laydate.js"></script>

hello.vue

<template>
    <div class="hello">
      <H1>laydate时间插件测试</H1>
      <input type="text" id="test" v-model="date" class="ipt">
    </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        date: null,
        //获取全局的laydate，带入到组件中
        laydate: window.laydate
      }
    },
    mounted() {
      this.laydate.render({
        elem: '#test'，
        done: (value) => {
          this.date = value
        }
      })
    }
  }
</script>

效果：没有报错，点击能够正常调用laydate

效果图4.png

这个测试到这里应该算是结束了，但是既然这个插件能够在mounted中调用，那么能不能在methods的方法中调用呢

附加测试：在4的基础上进行修改，测试laydate能否在methods中运行

index.html

<script src="static/laydate/laydate.js"></script>

hello.vue

<template>
    <div class="hello">
      <H1>laydate时间插件测试</H1>
      <input type="text" id="test" v-model="date" class="ipt"  @click="setDate">
    </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        date: null,
        //获取全局的laydate，带入到组件中
        laydate: window.laydate
      }
    }，
    methods: {
      setDate() {
        this.laydate.render({
          elem: '#test',
          done: (value) => {
            this.date = value
          }
        })
      }
    }
  }
</script>

效果：没有报错，点击第一次，没有反应，失去焦点之后再重新点击，时间框出现，laydate插件调用成功

对于这个bug，暂时没有什么头绪，如果有大神们知道是怎么回事，欢迎给我留言

注：转载请注明出处

最后编辑于：2018.08.04 18:38:25