今天碰到一个同学问了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，暂时没有什么头绪，如果有大神们知道是怎么回事，欢迎给我留言
注：转载请注明出处
网友评论