在vue中使用laydate插件

今天碰到一個同學(xué)問了laydate在vue中的使用問題透绩，因為以前在項目中也用過laydate羊瘩，也算有一些了解，所以在這里做一個簡單的測試
官方網(wǎng)址：http://www.layui.com/laydate/
GitHub地址：https://github.com/sentsin/laydate/

測試文件：新建vue的webpack模板

1、首先是組件里import引用
這里是在components中的hello.vue中進(jìn)行

<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
          }
        })
      }
    }
  }

效果：沒有報錯靠汁，點(diǎn)擊輸入框也沒有反應(yīng)

效果圖1.png

2舰褪、在組件中單獨(dú)引入不行皆疹，那么我們來嘗試一下在入口文件index.html中做常規(guī)js文件引用，并在index.html中調(diào)用

<!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是能夠使用的，但是一般來說項目需求會要求我們是在組件之中調(diào)用laydate晃酒，而不是在入口文件中調(diào)用表牢，那么第三種方法，我們在index.html中引入贝次，而在組件中調(diào)用
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>

結(jié)果：運(yùn)行報錯崔兴，提示laydate沒有聲明

運(yùn)行報錯.png

4、我們在入口文件引入了laydate.js蛔翅，并且在入口文件中引用是可行的敲茄，但是在組件中引用卻會報未聲明的錯誤，會不會是我們在入口文件引入的laydate是全局的搁宾，但是在組建中沒有加載到折汞，所以第四次測試時獲取全局的laydate對象，依然是在index.html引入js文件盖腿，然后在組件中調(diào)用
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>

效果：沒有報錯翩腐，點(diǎn)擊能夠正常調(diào)用laydate

效果圖4.png

這個測試到這里應(yīng)該算是結(jié)束了鸟款，但是既然這個插件能夠在mounted中調(diào)用，那么能不能在methods的方法中調(diào)用呢

附加測試：在4的基礎(chǔ)上進(jìn)行修改茂卦，測試laydate能否在methods中運(yùn)行

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>

效果：沒有報錯等龙，點(diǎn)擊第一次，沒有反應(yīng)罐栈，失去焦點(diǎn)之后再重新點(diǎn)擊，時間框出現(xiàn)柑贞，laydate插件調(diào)用成功

對于這個bug棠众，暫時沒有什么頭緒摄欲，如果有大神們知道是怎么回事，歡迎給我留言

注：轉(zhuǎn)載請注明出處

最后編輯于：2018.08.04 18:38:25

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者