编程 Javascript

解决layui的使用以及针对select、radio等表单组件不显示的问题

Posted in Javascript onSeptember 05, 2019

layui是国内一款界面比较整洁大方的ui框架，里面封装了很多前端开发常用的组件，通常我们直接复制代码过去就可以实现效果，可以提高我们的开发效率。

使用步骤：

1、下载layui：https://www.layui.com

2、将layui文件夹复制到自己的项目里：

解决layui的使用以及针对select、radio等表单组件不显示的问题

3、在html页面引入相关的css和js:

<link rel="stylesheet" type="text/css" href="/layui/css/layui.css" rel="external nofollow" media="all"> //路径仅供参考
<script type="text/javascript" src="/layui/layui.js"></script> //路径仅供参考

4、我们除了直接复制组件代码过来使用外，也可以参考他们的开发文档，了解更多更详细的使用方法：

相关开发文档：https://www.layui.com/doc

form表单select、radio组件不显示的解决方法：

这里简单的复制了一段框架的form表单代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>layui</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" media="all">
</head>
<body >

<form class="layui-form" style="margin:100px auto;width: 400px">
 <div class="layui-form-item">
 <label class="layui-form-label">输入框</label>
 <div class="layui-input-block">
  <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
 </div>
 </div>
 <div class="layui-form-item">
 <label class="layui-form-label">下拉选择框</label>
 <div class="layui-input-block">
  <select name="interest" lay-filter="aihao">
  <option value="0">写作</option>
  <option value="1">阅读</option>
  </select>
 </div>
 </div>
 <div class="layui-form-item">
 <div class="layui-input-block">
  <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
 </div>
 </div>
</form>
<script src="layui/layui.js" charset="utf-8"></script>
</body>
</html>

但是运行的时候，select下拉框不能正常显示：

解决layui的使用以及针对select、radio等表单组件不显示的问题

这里写出正确的解决方法，大家自行检查自己的代码：

1、在select等组件上记得要加上 lay-filter="***"，用于在js中做渲染；

<select name="interest" lay-filter="aihao">

2、对form表单的组件进行渲染：

<script>
 layui.use('form', function(){
 var form = layui.form;
 form.render('select','aihao');
 //各种基于事件的操作，下面会有进一步介绍
 //form.render('组件名','lay-filter名')
 });
</script>

这样，就没有什么问题了：

解决layui的使用以及针对select、radio等表单组件不显示的问题

以上这篇解决layui的使用以及针对select、radio等表单组件不显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

png

解决layui的使用以及针对select、radio等表单组件不显示的问题

- Author -

Ariel_ckr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript 圆角div的实现代码

Oct 15 Javascript

取得元素的左和上偏移量的方法

Sep 17 Javascript

node.js中的fs.readdirSync方法使用说明

Dec 17 Javascript

使用javascript实现Iframe自适应高度

Dec 24 Javascript

jQuery实现下拉菜单（内容为时间）的实时更新及图表的随动更新的方法

Jul 07 Javascript

原生js实现秒表计时器功能

Feb 16 Javascript

微信小程序 ecshop地址三级联动实现实例代码

Feb 28 Javascript

ES6新特性之数组、Math和扩展操作符用法示例

Apr 01 Javascript

javascript中floor使用方法总结

Feb 02 Javascript

解决vue跨域axios异步通信问题

Apr 17 Javascript

微信小程序如何实现点击图片放大功能

Jan 21 Javascript

Javascript中的解构赋值语法详解

Apr 02 Javascript

layui的面包屑或者表单不显示的解决方法

Sep 05 #Javascript

JavaScript 截取字符串代码实例

Sep 05 #Javascript

a标签调用js的方法总结

Sep 05 #Javascript

VsCode与Node.js知识点详解

Sep 05 #Javascript

Vue.js如何使用Socket.IO的示例代码

Sep 05 #Javascript

vue路由守卫及路由守卫无限循环问题详析

Sep 05 #Javascript

关于JS解构的5种有趣用法

Sep 05 #Javascript