2024年最新前端LayUI框架快速上手详解(二),斗鱼c++面试

2401_84434331 2024-10-04 11:03:02 阅读 89

总结一下

面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。

万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

首先去 layer 独立版本官网下载组件包。

在这里插入图片描述

下载完成后解压,将 <code>layer.js 和 layer.css 拷贝到我们的项目中

引入资源

开始使用

1.1.2、使用模块化🔥

引入资源

在 script 中使用 layui.use() 加载模块

依赖模块:layer

1.2、基础参数


1.2.1、type 基本层类型

类型 Number , 默认为0

layer 提供了5 种层类型。可传入的值有

0 ➡ 信息框,默认

1 ➡ 页面层

2 ➡ iframe层

3 ➡ 加载层

4 ➡ tips层

若采用 layer.open({type:1}) 方式调用,则 type 为必填项(信息框除外)

1.2.2、title标题

类型:String/Array/Boolean,默认 ‘信息’

title 支持三种类型的值

若传入的是普通的字符串,如:title:'我是标题' ,那么只会改变标题文本;

若需要自定义标题区域样式,title:['文本','font-size: 18px'],数组第二项可以写任意css 样式

若不想显示标题栏,title: false

1.2.3、area宽高

类型: String/Array,默认为auto

在默认状态下,layer是宽高都自适应的

但当你只想定义宽度时,你可以 area: '500px',高度仍然是自适应的

当你宽高都要定义时,你可以 area: ['500px', '300px']

1.2.4、btn按钮

类型:String/Array,默认 ‘确认’

信息框(type = 0)模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。

当您只想自定义一个按钮时,你可以 btn: '我知道了',当你要定义两个按钮时,你可以btn: ['yes', 'no']

当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推

在这里插入图片描述

1.2.5、time自动关闭所需毫秒

类型:Number,默认为0

默认不会关闭。当你想关闭时,可以 <code>time:5000 ,即代表 5 s 后自动关闭

1.2.6、content内容

类型:String/DOM/Array,默认 : " "

content 可传入的值是灵活多变的,不仅可以传入普通的 html 内容,还可以指定DOM,更可以随着 type 的不同而不同

页面层 ,就是信息提示

iframe 弹出来的是页面,例如百度页面

tips 就是一个信息提示小框


内容1

内容2

内容3

内容4

在这里插入图片描述

1.2.7、icon图标

类型:Number,默认:-1(信息框) / 0(加载层)

信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入_0-6_

如果是加载层,可以传入_0-2_

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

我们的信息框还可以参与互动响应,会有多个选项可选:

在这里插入图片描述

1.3、核心方法


1.3.1、layer.open(options)

原始核心方法

创建任何类型的弹层都会返回一个当前层索引,上述的 options 即是基础参数

1.3.2、layer.alert()

普通信息框

1.3.3、layer.msg()

提示框

默认是 3s 关闭

1.3.4、layer.load()

加载层

加载层默认是不会自动关闭的

2、日期与时间选择

===========================================================================

日期与时间选择官方文档:https://www.layui.com/doc/modules/laydate.html

和 layer 一样,你可以在 layui 中使用 layDate,也可直接使用 layDate 独立版

| 场景 | 用前准备 | 调用方式 |

| — | — | — |

| 1. 在 layui 模块中使用 | 下载 layui 后,引入_layui.css_和_layui.js_即可 | 通过*layui.use(‘laydate’, callback)*加载模块后,再调用方法 |

| 2. 作为独立组件使用 | 去 layDate 独立版本官网下载组件包,引入 laydate.js 即可 | 直接调用方法使用 |

我们使用模块化使用

引入资源

在 script 中使用 layui.use() 加载模块

依赖模块:laydate

在这里插入图片描述

2.1、基础参数


2.1.0、基础参数选项

通过核心方法:laydate.render(options) 来设置基础参数,

2.1.1、elem绑定元素

类型:String/DOM ,默认值:无

必填项,用于执行绑定日期渲染的元素,值一般为选择器,或DOM对象

2.1.2、type控件选择类型

类型:String ,默认值:date

用于单独提供不同的选择器类型,可选值如下表

| type可选值 | 名称 | 用途 |

| — | — | — |

| year | 年选择器 | 只提供年列表选择 |

| month | 年月选择器 | 只提供年、月选择 |

| date | 日期选择器 | 可选择:年、月、日。type默认值,一般可不填 |

| time | 时间选择器 | 只提供时、分、秒选择 |

| datetime | 日期时间选择器 | 可选择:年、月、日、时、分、秒 |

2.1.3、format自定义格式

类型:String,默认值:yyyy-MM-dd

通过日期时间各自的格式符和长度,来设定一个你所需要的日期格式。layDate 支持的格式如下:

| 格式符 | 说明 |

| — | — |

| yyyy | 年份,至少四位数。如果不足四位,则前面补零 |

| y | 年份,不限制位数,即不管年份多少位,前面均不补零 |

| MM | 月份,至少两位数。如果不足两位,则前面补零。 |

| M | 月份,允许一位数。 |

| dd | 日期,至少两位数。如果不足两位,则前面补零。 |

| d | 日期,允许一位数。 |

| HH | 小时,至少两位数。如果不足两位,则前面补零。 |

| H | 小时,允许一位数。 |

| mm | 分钟,至少两位数。如果不足两位,则前面补零。 |

| m | 分钟,允许一位数。 |

| ss | 秒数,至少两位数。如果不足两位,则前面补零。 |

| s | 秒数,允许一位数。 |

通过上述不同的格式符组合成一段日期时间字符串,可任意排版,如下所示

| 格式 | 示例值 |

| — | — |

| yyyy-MM-dd HH:mm:ss | 2017-08-18 20:08:08 |

| yyyy年MM月dd日 HH时mm分ss秒 | 2017年08月18日 20时08分08秒 |

| yyyyMMdd | 20170818 |

| dd/MM/yyyy | 18/08/2017 |

| yyyy年M月 | 2017年8月 |

| M月d日 | 8月18日 |

| 北京时间:HH点mm分 | 北京时间:20点08分 |

| yyyy年的M月某天晚上,大概H点 | 2017年的8月某天晚上,大概20点 |

在这里插入图片描述

2.1.4、value初始值

类型:String,默认值:new Date()

支持传入符合format参数设定的日期格式字符,或者 new Date()

2.1.5、lang语言

类型:String,默认:cn

内置了两种语言版本:cn(中文版)、en(国际版,即英文版)。

2.1.6、theme主题

类型:String ,默认值:default

内置了多种主题,theme的可选值有:default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)

2.1.7、calendar公历节日

类型:Boolean,默认值:false

内置了一些我国通用的公历重要节日,通过设置 true 来开启。国际版不会显示

3、分页

======================================================================

分页官方文档:https://www.layui.com/doc/modules/laypage.html

模块加载名称:<code>laypage

laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染

在这里插入图片描述

3.1、基础参数


3.1.1、基础参数选项

通过核心方法:laypage.render(options) 来设置基础参数

3.1.2、elem绑定元素

类型:String/Object,比填项

elem 指向存放分页的容器,值可以是 容器 ID、DOM对象

<code>elem: 'id' 注意:这里不能加 #

elem: document.getElementById('id')

3.1.3、count数据总数

类型:Number,必填项

数据总数,一般通过服务端得到

count: 100

在这里插入图片描述

3.1.4、limit每页显示条数

类型:Number,默认值 10

laypage将会借助 count 和 limit 计算出分页数。

在这里插入图片描述

3.1.5、layout自定义排版

类型:Array,默认值:[‘prev’, ‘page’, ‘next’]

自定义排版,可选值有:

count :总条目输出区域

limit:条目选项区域

prev:上一页区域

page:分页区域

next:下一页区域

refresh:页面刷新区域(layui 2.3.0新增)

skip:快捷跳页区域

在这里插入图片描述

3.1.6、limits每页条数的选择项

类型:Array,默认值:[10,20,30,40,50]

如果 layout 参数开启了 limit,则会出现每页条数的select下拉选择框

在这里插入图片描述

3.1.7、groups连续出现的页码个数

类型:Number,默认值为5

连续出现的页面个数,就是分页区域省略号…之前显示的页面个数

在这里插入图片描述

3.2、jump切换分页的回调


当分页被切换时触发,函数返回两个参数:obj(当前分页的所有选项值)、first(是否首次,一般用于初始加载的判断)

在这里插入图片描述

4、数据表格

========================================================================

支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。

模块加载名称:<code>table

引入资源

在页面放置一个元素,然后通过 table.render() 方法指定该容器

在这里插入图片描述

注意:上面有一个数据接口 url,通常是从服务器获取。我们这里先本地模拟一些json数据传入

{

code”: 0,

“msg”: “”,

“count”: 50,

“data”: [{

“id”: 10000,

“username”: “user-0”,

“sex”: “女”,

“city”: “城市-0”,

“sign”: “签名-0”

},

{

“id”: 10001,

“username”: “user-1”,

“sex”: “男”,

“city”: “城市-1”,

“sign”: “签名-1”

},

{

“id”: 10002,

“username”: “user-2”,

“sex”: “女”,

“city”: “城市-2”,

“sign”: “签名-2”

},

{

“id”: 10003,

“username”: “user-3”,

“sex”: “女”,

“city”: “城市-3”,

“sign”: “签名-3”

},

{

“id”: 10004,

“username”: “user-4”,

“sex”: “男”,

“city”: “城市-4”,

“sign”: “签名-4”

}

]

}

4.1、三种初始化渲染方式


| | 方式 | 机制 | 适用场景 |

| — | — | — | — |

| 01. | 方法渲染 | 用JS方法的配置完成渲染 | (推荐)无需写过多的 HTML,在 JS 中指定原始元素,再设定各项参数即可。 |

| 02. | 自动渲染 | HTML配置,自动渲染 | 无需写过多 JS,可专注于 HTML 表头部分 |

| 03. | 转换静态表格 | 转化一段已有的表格元素 | 无需配置数据接口,在JS中指定表格元素,并简单地给表头加上自定义属性即可 |

4.1.1、方法渲染🔥

在这里插入图片描述

4.1.2、自动渲染

所谓的自动渲染,即:在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需写初始的渲染方法。我们需要关注的是以下三点

带有 <code>class="layui-table"code> 的 <table> 标签

对标签设置属性 lay-data=" "code> 用于配置一些基础参数

<th> 标签中设置属性 lay-data=" "code> 用于配置表头信息。

ID 用户名 性别 城市 签名 积分 评分 职业 财富

在这里插入图片描述

4.2、基础参数

结束

一次完整的面试流程就是这样啦,小编综合了腾讯的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析,分享给小伙伴们,有没有需要的小伙伴们都去领取!

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。