首先在Layui官网下载Layui
https://www.layui.com/
下载下来之后解压,把layui文件夹放入static文件夹中
- 引入
在index.html文件中引入 layui.css、layui.js
引入及使用代码:例子以日期组件为例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>vue-test1</title>
<link rel="stylesheet" href="./static/layui/css/layui.css" />
<script src="./static/layui/layui.js"></script>
</head>
<body style="text-align: center;">
<div id="app"></div>
<p style="color: #fff;">主页面的日期插件</p>
<input type="text" id="test2" />
<script>
// 需要用的组件在数组当中自行引入
layui.use(['layer', 'form', 'table', 'laydate', 'element'], function () {
var layer = layui.layer,
form = layui.form,
laydate = layui.laydate,
table = layui.table,
element = layui.element
laydate.render({
elem: '#test2' //指定元素
})
})
</script>
</body>
</html>
效果
在子页面/其它页面使用Layui中的日期组件
HelloWorld.vue
<template>
<div class="hello" style="margin-bottom: 400px;margin-top:50px;">
<!-- 日期与时间选择组件 -->
<p style="color: #fff;">HelloWorld页面的日期插件</p>
<input type="text" id="test1">
</div>
</template>
<script >
export default {
name: 'HelloWorld',
data () {
return {
}
},
mounted () {
layui.use(['laydate'], function () {
var laydate = layui.laydate
laydate.render({
elem: '#test1' //指定元素
})
})
},
methonds: {
}
}
</script>