精华内容
下载资源
问答
  • 下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法。近期开发的项目中前端ui框架用的是Layui,数据渲染使用vue去渲染,当我用vue渲染表单控件的数据时,会出现控件被禁用的情况,例如:select下拉等,...

    下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法。

    近期开发的项目中前端ui框架用的是Layui,数据渲染使用vue去渲染,当我用vue渲染表单控件的数据时,

    会出现控件被禁用的情况,例如:select下拉等,于是去看文档,按照文档说的写了,结果然并卵,( ̄▽ ̄)"。

    搞了半天都没搞好。然后在百度搜索了vue的相关文档后菜解决了问题。

    首先觉一个例子,如下面的一段代码:

    var newVue({

    el:"#app",

    data:{

    items:null},

    mounted:function() {this.details();//这是layui的方法

    form.render();

    },

    methods:{

    details:function(){var _self = this;

    $.ajax获取数据成功后进行表单重载

    form.render();

    }

    }

    });

    上述代码按理来说应该没什么问题啊,但是vue渲染数据成功后layui的表单控件就是不能用,why?(;′⌒`)。

    然后百度啊,谷歌啊,各种搜索引擎,终于解决了问题,O(∩_∩)O。看下面,

    Vue updated生命周期函数:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

    无论是组件本身的数据变更,还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更,都会触发虚拟 DOM 重新渲染和打补丁,并在之后调用 updated。

    然后只需要在vue的updated里面重新再去走一下layui的表单重载就行了。

    代码:

    updated:function(){

    layui.use(['form'], function(){

    form.render();

    }

    }

    就这样OK,完美解决。

    展开全文
  • 就简单的使用layui进行开发了。1、layui的js、css引入跳过。2、layui的js开头定义:首先统一的js语法开头layui.use();要用到什么组件自己添加,下面的示例是用到了jquery、ajax、form表单等组件;但ajax的写法有很多...

    最近开发中在做项目的后台管理系统。用的guns框架,框架自带的js是layui。自己写页面也不好换模板。就简单的使用layui进行开发了。

    1、layui的js、css引入跳过。

    2、layui的js开头定义:

    首先统一的js语法开头layui.use();要用到什么组件自己添加,下面的示例是用到了jquery、ajax、form表单等组件;但ajax的写法有很多种可以自己写熟悉的语法格式,不强制使用它封装的ax。

    layui.use(['form', 'admin', 'ax'], function () {var $ = layui.jquery;    var $ax = layui.ax;    var form = layui.form;

    var admin = layui.admin;

    });

    3、layui的表格生成,包括分页:

    我使用的表格是在html页面,先定义表格,然后再js 初始化各个行

    html代码:

    class="layui-table" id="channelListTable"
    lay-filter="channelListTable">

    js代码:

    1)、首先定义表格的全局变量:

    var ChannelList = {tableId: "channelListTable"};

    2)、访问后台路径,渲染表格(这里可以定义表格的大小,注意有个initColumn方法)

    var tableResult = table.render({elem: '#' + ChannelList.tableId,    url: Feng.ctxPath + '/ChannelList/list',    page: true,    height: "full-158",    cellMinWidth: 100,    cols: ChannelList.initColumn()
    });

    3)、通过刚刚定义的表格的全局变量初始化行,也就是ChannelList.initColumn方法

    ChannelList.initColumn = function () {    return [[
    {type: 'checkbox'}, {field: 'cId', sort: true, title: '设备id'}, {field: 'cName', sort: true, title: '设备'},

    {field: 'gdName', sort: true, title: '设备'}

            ]]

    这里对应的就是表格里的各个字段,field与后台的实体类命名相同即可。

    总结:这种表格生成方法蠢得一批。完全用的html与js。框架自动生成表格。分页在后台用的LayuiPageInfo类封装,页面的分页也是和表格一起生成,这种自动生成方式在后面的开发中给我带来了很大的痛苦。如果需求变更,在页面中的样式有变更。表格的样式调整起来会非常麻烦,想到了以前jsp的好。现在虽然jsp的使用率正在降低但是其他的模板引擎正在兴起。最近也正好在学习thymeleaf。过几天再写一个thymeleaf的学习笔记。

    4、layui的特色,render方法:

    在没有学过layui的情况下,来使用它遇到好多坑 ,最坑的应该就是render方法了,layui的组件,无论什么组件写完后都需要render一下,举个例子:

    在页面加载完成后需要在form表单里动态生成一个select组件。生成代码后就需要render下表单,生成的数据才会显示。否则a3bd510afe9f83733ea7eb614b362183.pnga3bd510afe9f83733ea7eb614b362183.png。具体方法看截图

    0429fb0821726de70db2ca9d94e03fd8.png

    form.render('select');渲染select框

    同样的意思form.render('checkbox');渲染多选框

    5、form表单的验证,这个用起来还是挺方便的:

    话不多说,直接举例

    html代码:

    class="layui-input-block">

    id="username" name="username" type="text" class="layui-input"

    lay-verify="required|username" required/>

    注意lay-verify。

    js代码:

    form.verify({username:function(value){var flag;        $.ajax({url:Feng.ctxPath +'/subUserList/checkUsername',            data:{"username":value},            dataType:"json",            async:false,            success:function (data) {if(data.flag == false || data.flag == 'false'){
    flag =data.flag; }
    },error:function (data) {alert("名效"+data); }
    }); if(flag==false){return "名已存在"; }
    },
    });

    其中required代表必填项。

    OK,暂时写那么多,以后遇到坑继续填上,其实作为一个外行前端,对前端这些框架不太懂,也不太想把时间花在页面上,前端的各种框架,jquery最基础的,又有各种如bootstrap,layui,easyui,还有我没接触过的vue。术业有专攻,我选择java

    展开全文
  • 根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui1.第一个坑:vue项目中使用npm安装引入...

    根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui

    1.第一个坑:vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式,知道的可以留言探讨)

    在官网中我们可以看到他提到支持npm安装,但是当我们安装成功后,在main.js中引入时却报并不能找到该模块的错。

    所以,我们先下载文件包,然后在html文件中用link和script标签的方式引入

    2.第二个坑:下载的文件包必须放在static文件中

    我尝试了把下载的文件夹放在与html文件的同级目录下和放在src目录下或者放在assets目录下,均报layui没有定义的错误

    3.正确的使用姿势:

    我们把文件放在static文件下,然后在html文件下引入,这样就可以在任意的组件中使用到layui这个对象了,这样我们就可以正确的使用layui里面的各种ui组件了

    pm

    body,html{

    margin:0;

    padding:1;

    }

    要使用的组件:

    export default{

    data(){

    return {

    }

    },

    mounted(){

    layui.use('element', function(){

    var element = layui.element

    })

    },

    methods:{

    }

    }

    以上是个人使用时的一些经验总结,如各位有更好的建议或者本人有错误之处都可以反馈出来,希望能帮到大家,谢谢

    以上所述是小编给大家介绍的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感觉真的是比较不好用二、为啥不好用呢,在现如今的页面动态渲染的情况的,layui这种基于原生js的模式让代码编写变得很臃肿, 可能一个功能的开发我用其vue框架很简便就实现了,但是使用这个就要用很...
  • vue 中使用 layui

    2020-07-18 10:51:36
    vue 中使用 layui 1. 安装 : 根据 layui 官网 介绍可以用命令行直接安装 . 我用 npm 安装后总会有报错 , 就没成功过一次 . 解决办法 : 去 layui 官网首页 下载文件包 . 2. 拖动 : 将下载的文件包解压后 , 把整个解压...
  • vue中使用layui弹框layui-layer1.在vue中引入layui-layer2.引入jquery3,使用4.运行 1.在vue中引入layui-layer npm i --save layui-layer 2.引入jquery <script src=...
  • vue中使用layui

    2020-03-18 15:28:25
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" /> <script src="https://www.layuicdn.com/layui/layui.js">...这里 我在index.html 直接加载了...
  • vue中如何使用layui

    千次阅读 2020-01-16 14:00:35
    vue中使用layui只能下载官方的包,然后引用js/css文件。 1.下载layui包 [> https://www.layui.com/](https://www.layui.com/)
  • 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 使用webpack打包项目: 在主HTML页面中引入Layui的css文件和脚本文件 例如使用form模块,在当前Vue实例挂载的时候,引入模块 这里我用的时form表单的模块,因为我需要访问data中的数据,所以用的是...
  • 因为在vue文件通过import加载,不知道为什么打包后会找不到js,所以通过这种方法引入在index.html引入文件目录需要放在static目录下// 使用方式laydate.render({elem: "#test1",// type: "datetime",value: that...
  • 下面简单介绍在vue中使用 layui框架中的form.render()无效解决办法。 原文地址:小时刻个人技术博客 >http://small.aiweimeng.top/index.php/archives/layuiForm.html 近期开发的项目中前端ui框架用的是...
  • layui与vue一起使用时,表单中的某个input...总结:只要layui与vue配合使用,做了双向绑定,不管是给什么类型的元素赋值,都需要按照layui的方式赋值,然后再给vue中的data赋值。只有双向赋值了,才能赋值成功 ..
  • 详解如何在vue项目中使用layui框架及采坑根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用...
  • 如果在layui的相关节点中加了vue判断条件,那么layui给表单初始赋值的操作会失效。 下面红框里面的是错误的,如果去掉v-if="user!=null"那么即可用layui的初始赋值。 配合下面绿框看 ...
  • vue中如何使用layui

    2019-07-23 11:45:25
    根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui 1.第一个坑:vue项目中使用npm安装...
  • 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)。并且必须将...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 171
精华内容 68
关键字:

layuivue中使用

vue 订阅