vue引入layer踩坑
本想引用layer中的confirm确认框
按照layui官网介绍的使用npm 安装的方式:npm i layui-src
,并通过 layui.use() 方式来加载该入口文件,任然发现提示layer未定义
下载layer插件成功引入
接着只有下载完整版的layer插件,放在static文件目录下,
再index.html文件中引入全局js和css文件
再项目中就可以使用layer插件了,
插件中this指向问题
在使用中发现在layer对象里面调用this.$htttp.delete方法报错,显示delete未定义,发现this指向不再是vue对象而是layer对象了,故在created中将通过定义的myVue将指向vue对象的this保存起来,接着在layer插件里面就可以使用了。
<script>
import Alert from './Alert'
var myVue = {}
export default {
name: 'CustomerDetail',
data () {
return {
customer:""
}
},
methods:{
fn(){
layer.confirm('确认删除吗?',{icon:3,title:'删除提示'},function(index){
myVue.$http.delete("http://localhost:3000/users/"+myVue.customer.id).then(function(){
myVue.$router.push({path:"/",query:{alert:"删除成功!!!"}});})
layer.close(index);
});
},
},
created(){
this.showCluster();
myVue = this;
}
/* beforeCreate(){
myVue = this;这里赋值也可以
}*/
}
</script>