精华内容
下载资源
问答
  • vue中使用layui

    2021-03-06 19:03:42
    *如何在vue中使用layui 第一次在vue中使用layui,完全不知道怎么引入样式与功能,百度了很多办法才弄好,特意来记录一下使用的过程,本次使用vue 2.x ,使用vue/cli构建项目,用vue create 【项目名称】,来创建项目...

    *如何在vue中使用layui

    第一次在vue中使用layui,完全不知道怎么引入样式与功能,百度了很多办法才弄好,特意来记录一下使用的过程,本次使用vue 2.x ,使用vue/cli构建项目,用vue create 【项目名称】,来创建项目。

    下载layui

    将使用脚手架创建的项目给清空一下,保留最原始的页面,后续将在清空的页面进行页面的编辑。
    下载layui文件,在layui的官网下载即可。
    layui官网
    在这里插入图片描述
    直接点击下载。
    把解压后的文件夹放到项目的public文件夹里面
    ##引入layui问价
    然后在public文件夹下的index.html引入
    在这里插入图片描述
    在这里插入图片描述
    这样就可以使用了
    ##测试
    在官网复制一段代码
    在这里插入图片描述
    千万不要忘了最下面的js内容
    在这里插入图片描述

    然后运行项目 npm run serve
    效果图如下
    在这里插入图片描述
    此方法最为简单,有效。
    ##建议在vue中不要使用layui,建议使用elementui。(最重要)

    ##本次使用遇到的问题(未解决,有大佬解决的希望告知一下)

    1.使用npm命令,在vue项目中下载layui。
    命令:npm i layui-src
    下载完成后,我们会在根目录下的package.json文件中看到我们下载的layui版本号,如下图
    在这里插入图片描述

    引入css样式

    在创建的项目的main.js文件中引入css文件
    import ‘layui-src/dist/css/layui.css’

    引入js文件

    1:
    在创建的项目的main.js文件中引入layui的js文件
    import “layui-src/dist/layui.all.js”
    此时我们会看到以下报错信息
    在这里插入图片描述
    此时我们执行 npm install --save jquery
    然后重新运行项目就可以了,就会没有报错信息。
    至此,全部的文件都已经引入完成了,后面就是在layui的官网,找到自己需要用到的模块,复制到自己页面。
    在此,随便去layui官网复制一段代码,看看是否成功。虽然基本样式出现了,但是没有js样式,找了很多办法没有解决。最终放弃了。有解决的大佬希望能告知。
    谢谢大家。本次到此结束,希望对你有所帮助,最后大声的说一声:
    vue中不要使用layui;vue中不要使用layui;vue中不要使用layui;(重要的事情说三遍)。

    展开全文
  • Vue:vue中使用layUI

    2020-12-07 15:36:37
    vue中使用layUI

    1. 将layUI依赖的js文件放入Vue项目文件夹中在这里插入图片描述

    2. 在index.js中引入layui.css、layui.js和jquery.js在这里插入图片描述

    3. 在组件create()钩子中进行配置就可以了在这里插入图片描述

    4. 成功在这里插入图片描述

    展开全文
  • 这次用layui 结合vue.js做项目,发现表单,如select发送改变,动态渲染select时,发现页面不能渲染数据。这里提供一个很简单的方法,就是利用vue.js的钩子函数updated 代码如下 methods: { }, updated:function ()...

    本篇文章给大家带来的内容是关于layui form表单的动态渲染与vue.js之间的冲突解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    这次用layui 结合vue.js做项目,发现表单中,如select发送改变,动态渲染select时,发现页面不能渲染数据。这里提供一个很简单的方法,就是利用vue.js的钩子函数updated
    代码如下

    methods: {
    },
    updated:function () {
        this.$nextTick(function () {
            layui.use(['form'], function(){
                layui.form.render('select')
            });
        });
    }
    
    展开全文
  • layui使用vue的例子

    2019-06-13 08:32:55
    layui使用vue的例子包含基本的页面增删改查,推荐给刚接触vue的小伙伴
  • vue 中使用 layui

    千次阅读 2020-07-18 10:51:36
    vue 中使用 layui 1. 安装 : 根据 layui 官网 介绍可以用命令行直接安装 . 我用 npm 安装后总会有报错 , 就没成功过一次 . 解决办法 : 去 layui 官网首页 下载文件包 . 2. 拖动 : 将下载的文件包解压后 , 把整个解压...

    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 遍 ,它就不报错了 .

    展开全文
  • layui vue 在一起用的坑 select

    千次阅读 2019-03-30 15:25:43
    问题是这样的, <div class="layui-btn-group"> <button class="layui-btn " @click="businessChange('bc01')" :class="business=='bc01'?'layui-btn-normal':'layui-btn-primary'...
  • 使用layUI 的表格控件,用 vue去绑定数据,在layui的分页控件调用了接口,反回了数据,然后赋值给 vue的变量; 前端页面不会渲染,各位,你们怎么处理的。
  • 27、如何让css只在当前组建中起作用 28、vue中引入组件的步骤 29、检举3个vue生命周期钩子函数 30、4种vue指令及用法 31、如何找到所有HTML select标签的选中项 32、js中使用的Push方法是什么 33、定义事件冒泡 34...
  • Vue中使用LayUI 使用webpack打包项目: 在主HTML页面中引入Layui的css文件和脚本文件 例如使用form模块,在当前Vue实例挂载的时候,引入模块 这里我用的时form表单的模块,因为我需要访问data中的数据,所以用的是...
  • vue中使用layui

    2020-08-07 21:50:10
    1.第一步:在对应的项目文件下CMD安装...link rel="stylesheet" href="../node_modules/_layui@0.0.1@layui/dist/layui.css"> <script src="../node_modules/_layui@0.0.1@layui/dist/layui.js"></script&
  • vue中如何使用layui

    2020-12-12 14:33:59
    如果vue项目根目录下没有index.html就在public文件夹下找(我的index.html在public文件夹下),找到index.html后在index.html的上面引入下载好的css和js(使用相对路径:例如./public/layui/layui.js)。并且必须将...
  • vue中如何使用layui

    千次阅读 2020-01-16 14:00:35
    vue中使用layui只能下载官方的包,然后引用js/css文件。 1.下载layui包 [> https://www.layui.com/](https://www.layui.com/)
  • 问题分析:layui的渲染和vue数据的渲染是不同步的,有可能layui先渲染完毕了,vue的数据还没有渲染完,这样就会导致一些空间比如select,checkbox等控件是没有的 解决方法:可以调用$nextTick这个方法,就可以保证vue...
  • layui与vue一起使用时,表单中的某个input...总结:只要layui与vue配合使用,做了双向绑定,不管是给什么类型的元素赋值,都需要按照layui的方式赋值,然后再给vue中的data赋值。只有双向赋值了,才能赋值成功 ..
  • layui中调用vue,出现未定义,加上window关键词就可以了 1、未使用window <div id="test01"> <input type="text" v-model="msg">{{msg}} <p> <button type="button" @click="a1...
  • 下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法。 原文地址:小时刻个人技术博客 >http://small.aiweimeng.top/index.php/archives/layuiForm.html 近期开发的项目中前端ui框架用的是...
  • 现在项目前端使用的是layui进行页面表格渲染接口数据,但在数据更新时页面刷新感强烈,所以想植入Vue的无感刷新。
  • 下载下来之后解压,把layui文件夹放入static文件夹 引入 在index.html文件引入 layui.css、layui.js 引入及使用代码:例子以日期组件为例子 <!DOCTYPE html> <html> <head> <meta ...
  • vue项目中使用layUI

    千次阅读 2019-04-09 11:14:38
    1,首先在官网下载对应的文件; 下载链接:https://www.layui.com/ ...2,把解压后的文件放到static目录 3,在html入口也引入相应的文件。 <link type="text/css" rel="stylesheet" href="./...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,014
精华内容 2,005
关键字:

layuivue中使用

vue 订阅