vue中如何使用layui

vue中使用layui只能下载官方的包,然后引用js/css文件。

1.下载layui包

> https://www.layui.com/

在这里插入图片描述
点击立即下载即可。

2.将里面的layui文件夹复制到vue项目的static下,如图:

在这里插入图片描述

3.在index.html中引用两个文件

<link type="text/css" rel="stylesheet" href="./static/layui/css/layui.css" rel="external nofollow" /> 
<script type="text/javascript" src="./static/layui/layui.js"></script>

在这里插入图片描述

4.在.vue文件中使用

html代码写在template中
js代码可以写在methods中,在mounted中调用该方法,也可以直接写在mounted中。
将官方文档的function(){}写成箭头函数形式,可以解决this指向问题,这样this指向的就是vue,可使用data中定义的变量和methods中的方法了。如果不明确可以输出this查看指向。
具体使用可以看官方文档附链接 : https://www.layui.com/doc/element/layout.html
在这里插入图片描述

发布了33 篇原创文章 · 获赞 22 · 访问量 5674
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览