Vue——vue中引入Layui并使用的方法

首先在Layui官网下载Layui

下载下来之后解压，把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>

效果

在这里插入图片描述

Vue——vue中引入Layui并使用的方法

Guess you like