2021-06-15

                                         上周学习1

1. layui按钮

   向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

用法：           

    <button class="layui-btn">一个标准的按钮</button>

<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

   主题按钮： 

原始 class="layui-btn layui-btn-primary"

    默认 class="layui-btn"

    百搭 class="layui-btn layui-btn-normal"

    暖色 class="layui-btn layui-btn-warm"

    警告 class="layui-btn layui-btn-danger"

禁用 class="layui-btn layui-btn-disabled"

 

效果：

圆角按钮：

    原始 class="layui-btn layui-btn-radius layui-btn-primary"

    默认 class="layui-btn layui-btn-radius"

    百搭 class="layui-btn layui-btn-radius layui-btn-normal"

    暖色 class="layui-btn layui-btn-radius layui-btn-warm"

    警告 class="layui-btn layui-btn-radius layui-btn-danger"

  禁用 class="layui-btn layui-btn-radius layui-btn-disabled"

  效果：

 

其实这两种按钮都是差不多的，就是多加了一个“”layui-btn-radius“这样的圆角代码，当然还有其他样式的按钮，例如：图标按钮、按钮组.......

2.表单

  在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

  依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）。

代码我就不写有点多截图给你们看吧，当然只是一部分，其他的都是差不多的

效果：

layui.use('form', function(){
    var form = layui.form;

    //监听提交
    form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
    });
    });

当然，缺少了这里的代码也是不行的哦

3进度条

  进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。

依赖加载组件：element

显示进度比文本

  代码：

<div class="layui-progress" lay-showPercent="true">

        <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>

    </div>



    <div class="layui-progress" lay-showPercent="yes">

        <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>

    </div>



    <div class="layui-progress layui-progress-big" lay-showPercent="yes">

        <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>

</div>

效果：

通过对父级元素设置属性 lay-showPercent="yes" 来开启进度比的文本显示，支持：普通数字、百分数、分数（layui 2.1.7 新增）

 

注意：默认情况下不会显示百分比文本，如果你想开启，对属性lay-showPercent设置任意值即可，如：yes。但如果不想显示，千万别设置no或者false，直接剔除该属性即可。