是伍尚金哇_v

Angular与Layui框架集成使用(优化)

电脑版发表于:2021/1/15 17:52

在使用后很多入坑

全局引入所有模块

  • Layui的所有模块可以全部一次性加载
  • 所有模块可通过layui/lay/modules,这里可以看到Layui的所有模块
  • 引入所有模块

使用layui

  • 在组件里只需要layui全局变量即可,因为所有的模块可以通过layui.出来
    component.ts
  • 在使用时只需要通过layui.出来即可
    component.ts
  1. private renderlayui():void{
  2. //弹窗
  3. layui.layer("我弹出来了");
  4. //数据表格
  5. layui.table.render({....});
  6. //表单
  7. ....
  8. }

使用jQuery

  • 在Angular使用jQuery。可通过npm install --save jquery来安装,但是如果是使用Layui的话就不需要额外的安装,layui已经自带jQuery模块,在全局引入模块的时候就可以引入了
    在使用的时候可以像普通的使用jQuery一样使用
    component.ts
  1. private renderlayui():void{
  2. //id选择器
  3. layui.$("#idselect").html();
  4. }

弹窗里弹出表单

  • 如果你是通过一个layer.open({type:1,content:'自定义html内容'});方式,在弹窗里放置表单的话,需要在弹窗结束后记得render一下form,要不然表达会无法使用;这个官网也有说明
    component.ts
  1. /**点击按钮弹窗显示表单 */
  2. public OpenLayerShowForm(): void {
  3. layui.layer.open({
  4. type: 1,
  5. area: ['800px', '500px'],
  6. content: layui.$("#layerForm").html()
  7. });
  8. layui.form.render();
  9. }

加载问题

可能是腊鱼i加载速度的原因,导致在初始化的时候好多组件会慢一步,需要settimeout一下,要不然会出现无法渲染的现象,这个问题得进一步看看
component.ts

  1. ngOnInit(): void {
  2. setTimeout(() => {
  3. layui.form.render();
  4. }, 1000);
  5. }
关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
猜你喜欢
    1. 1
    2. 2
    3. 3
    / 3