layuiinput详解

layuiinput是一款基于 layui 框架，提供了文本输入框组件及相关的常用功能及样式的插件。本文将从使用、功能、代码分析三个方面进行讲解。

一、使用

使用layuiinput非常简单。在引入layui的css和js文件后，只需要引入layuiinput的css和js文件即可。

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<link rel="stylesheet" href="layuiinput/layuiinput.css">
<script src="layuiinput/layuiinput.js"></script>

然后在需要使用的位置，使用如下代码即可：

<div class="layui-input"><input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"></div>

其中，class=”layui-input” 是指调用layui框架的input样式。class=”layui-input”是指调用layuiinput的样式。

二、功能

1. 基本功能

layuiinput提供了文本输入框的基本功能，包括文本输入、错误提示、必填项等基本功能。

下面是一个示例，其中“名称”和“描述”是必填项，如果不填写则会有错误提示。

<div class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">名称</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
    </div>
  </div>

   <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-block">
      <textarea name="desc" required lay-verify="required" placeholder="请输入描述" class="layui-textarea"></textarea>
    </div>
  </div>
</div>

<script>
layui.use('form', function(){
  var form = layui.form;
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

2. 多种类型

除了基本的文本类型，layuiinput还支持多种类型，包括密码框、多行文本框、选择框、复选框、单选框和文件上传框等。

下面是一个示例，包括了密码框、多行文本框、选择框、复选框、单选框和文件上传框等。

<div class="layui-input">
  <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-textarea">
  <textarea name="desc" required lay-verify="required" placeholder="请输入描述" class="layui-textarea"></textarea>
</div>
<div class="layui-input">
  <select name="interest" required lay-verify="required">
    <option value="">请选择</option>
    <option value="game">游戏</option>
    <option value="book">读书</option>
    <option value="movie">电影</option>
  </select>
</div>
<div class="layui-input">
  <input type="checkbox" name="like1[write]" title="写作" checked>
  <input type="checkbox" name="like1[read]" title="阅读">
  <input type="checkbox" name="like1[dai]" title="发呆">
</div>
<div class="layui-input">
  <input type="radio" name="sex" value="男" title="男" checked>
  <input type="radio" name="sex" value="女" title="女">
</div>
<div class="layui-input">
  <button type="button" class="layui-btn" id="test1"><i class="layui-icon"></i>上传图片</button>
</div>

<script>
//选择框
layui.use('form', function(){
  var form = layui.form;
  form.render();
});

//文件上传
layui.use('upload', function(){
  var upload = layui.upload;
  var uploadInst = upload.render({
    elem: '#test1',
    url: '/upload/',
    done: function(res){
      console.log(res)
    },
    error: function(){
      //请求异常回调
    }
  });
});
</script>

3. 外显效果

layuiinput提供了多种样式，包括常规样式、行内样式、列表样式等，外显效果非常美观大气。

下面是一个示例，展示了layuiinput不同样式的焕然一新的外观。

<div class="layui-input-inline">
  <input type="text" name="phone" required lay-verify="phone" placeholder="请输入手机" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
  <input type="text" name="city" required lay-verify="required" placeholder="请输入城市" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
  <input type="text" name="email" required lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
</div>

<div class="layui-form-item">
  <label class="layui-form-label">省份</label>
  <div class="layui-input-block">
    <input type="radio" name="province" value="0" title="广东" checked>
    <input type="radio" name="province" value="1" title="广西">
    <input type="radio" name="province" value="2" title="湖南">
  </div>
</div>

<div class="layui-form-item">
  <label class="layui-form-label">个人描述</label>
  <div class="layui-input-block">
    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
  </div>
</div>

<script>
layui.use('form', function(){
  var form = layui.form;
  form.render();
});
</script>

三、代码分析

layuiinput提供了多种代码方案，代码非常简洁易懂。下面是常规示例的js代码。

<script>
layui.use('form', function(){
  var form = layui.form;
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

需要注意的是，引入layuiinput组件后，还需要引入layui组件，因为layuiinput是基于layui构建的。同时，需要根据实际情况修改代码中的class标签和id标签。

小结

本文对layuiinput做了详细的介绍，包括使用、功能和代码分析等方面。在实际使用中，只需要引入layuiinput的css和js文件，并按照示例代码进行即可。