vue 中使用 layui

vue 中使用 layui1. 安装 : 根据 layui 官网介绍可以用命令行直接安装 . 我用 npm 安装后总会有报错 , 就没成功过一次 .解决办法 : 去 layui 官网首页下载文件包 .2. 拖动 : 将下载的文件包解压后 , 把整个解压文件夹拖到 vue 项目的静态资源文件夹 ( piblic 或 static ) 里 . 拖到其它位置会报错 error 'layui' is

mygoes

3137人浏览 · 2020-07-18 10:51:36

mygoes · 2020-07-18 10:51:36 发布

vue 中使用 layui

1. 安装 : 根据 layui 官网介绍可以用命令行直接安装 . 我用 npm 安装后总会有报错 , 就没成功过一次 .
解决办法 : 去 layui 官网首页下载文件包 .

2. 拖动 : 将下载的文件包解压后 , 把整个解压文件夹拖到 vue 项目的静态资源文件夹 ( piblic 或 static ) 里 . 拖到其它位置会报错 error 'layui' is not defined no-undef

3. 导入 : 在 vue 项目的静态资源文件夹下的 index.html 中使用 link 和 script 分别导入 layui.css 和 layui.js , 这样就可以在整个项目中使用了 . 在其它位置( 如 main.js ) 导入 layui.css 和 layui.js 都会报错 .

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    // 导入 layui.css
    <link rel="stylesheet" href="./layim-v3.9.5/dist/css/layui.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
    // 导入 layui.js
    <script type="text/javascript" src="./layim-v3.9.5/dist/layui.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %>
       doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4. 使用 : 在 vue 文件中使用
例一 ( layui 官网即时通讯 ) :

<template>
  <div class="layui-progress">
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
    },
    mounted() {
      layui.use('layim', function (layim) {
        //先来个客服模式压压精
        layim.config({
          brief: true //是否简约模式（如果true则不显示主面板）
        }).chat({
          name: '客服姐姐',
          type: 'friend',
          avatar: 'http://tp1.sinaimg.cn/5619439268/180/40030060651/1',
          id: -2
        });
      });
    },
  }
</script>

<style>
</style>

例二 ( layui 官网按钮 ) : 这样写的 layui.use 要安装并配置下饿了么 , 参照饿了么官网 , 也可以按例一中的写法来写 .

<template>
  <div class="layui-progress">
    <button type="button" class="layui-btn">一个标准的按钮</button>
    <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
    <i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>  
  </div>
</template>

<script>
  export default {
    name: 'App',
    mounted() {
      layui.use('element', function () {
        var element = layui.element
      })
    },
  }
</script>

<style>
</style>

备注 : 我在 vue 项目中使用 layui , 在运行 npm run serve 时 , 偶尔会遇到以下的报错 :

我的解决办法是 : ctrl + c 后输入 Y 终止操作 , 之后再运行 npm run serve . 反复操作 2~3 遍 ,它就不报错了 .

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^