vue 中使用 layui

最新推荐文章于 2024-08-21 09:02:46 发布

mygoes

最新推荐文章于 2024-08-21 09:02:46 发布

阅读量3.1k

点赞数 1

分类专栏： vue中使用layui layui的使用 layui 文章标签： vue 前端 jquery npm javascript

本文链接：https://blog.csdn.net/mygoes/article/details/107424651

版权

vue中使用layui 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

layui的使用

1 篇文章 0 订阅

订阅专栏

layui

1 篇文章 0 订阅

订阅专栏

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>