深入解析layeralert

一、字體顏色

layeralert 提供了多種字體顏色供選擇，可以根據頁面風格和需求進行選擇。下面是一個使用 layeralert，字體顏色為紅色的例子：

layer.alert('Hello World', {
  icon: 0,
  skin: 'layui-layer-molv',
  title: "彈窗標題",
  anim: Math.ceil(Math.random() * 6),
  shadeClose: true,
  closeBtn: 1,
  btn: ['確認']
});

在代碼中，通過 `skin` 屬性設置了樣式名為 `layui-layer-molv`，該樣式名對應的顏色為淺灰色。除了樣式名之外，也可以直接設置顏色值，如下所示：

layer.alert('Hello World', {
  icon: 0,
  title: "彈窗標題",
  anim: Math.ceil(Math.random() * 6),
  shadeClose: true,
  closeBtn: 1,
  btn: ['確認'],
  style: 'color:#FF5722;'
});

在代碼中，通過 `style` 屬性直接設置字體顏色為紅色。

二、提示類型

layeralert 支持多種提示類型，包括警示、提示、提問、加載等。下面是一個使用 layeralert，類型為提示的例子：

layer.alert('恭喜你，操作成功！', {
  icon: 1,
  title: "提示",
  anim: Math.ceil(Math.random() * 6),
  shadeClose: true,
  closeBtn: 1,
  btn: ['確認']
});

在代碼中，通過 `icon` 屬性設置類型為 1，該類型對應的圖標為綠色勾勾，表示成功。其他類型的取值範圍為 0-6，分別表示不同的圖標。

三、配置項

layeralert 提供了多項配置，可以進行個性化設置。下面是一個例子，展示了如何進行個性化配置：

layer.alert('你確定要刪除該文件嗎？', {
  icon: 2,
  skin: 'layui-layer-lan',
  title: "警告",
  anim: Math.ceil(Math.random() * 6),
  offset: '100px',
  shadeClose: true,
  closeBtn: 1,
  btn: ['確定', '取消'],
  yes: function(){
    // 刪除文件操作
    layer.msg('刪除成功！', {icon: 1});
  }, 
  btn2: function(){
    // 取消操作
    layer.msg('取消成功！', {icon: 2});
  }
});

在代碼中，通過 `offset` 屬性設置彈窗位置距離頂部的距離為 100px，通過 `yes` 和 `btn2` 屬性分別指定了點擊確認和取消按鈕後所需執行的操作。此外，還可以通過 `area` 屬性設置彈窗的大小、`time` 屬性設置彈窗自動關閉的時間等。

四、彈窗樣式

layeralert 的彈窗樣式可以進行個性化設置，包括邊框樣式、陰影等。下面是一個例子，展示了如何進行樣式設置：

layer.alert('Hello World', {
  icon: 0,
  title: "彈窗標題",
  anim: Math.ceil(Math.random() * 6),
  shadeClose: true,
  closeBtn: 1,
  btn: ['確認'],
  area: ['300px', '200px'],
  skin: 'layui-layer-lan',
  shade: [0.8, '#393D49'],
  btnAlign: 'r',
  move: false,
  resize: false,
  skin: 'layui-layer-molv',
  border: [5, 0.3, '#666']
});

在代碼中，通過 `area` 屬性設置彈窗大小為 300px * 200px，通過 `shade` 屬性設置彈窗背景陰影，通過 `btnAlign` 屬性設置按鈕位置等等。

五、異步加載

layeralert 可以進行異步加載，可以在彈出窗口之後再進行數據加載。下面是一個例子，展示了如何進行異步加載：

layer.alert(null, {

closeBtn: 0,

title: false,

area: 'auto',

type:1,

skin: 'layui-layer-nobg',

time: 10000,

anim:5,

shadeClose: true,

content: function(){

var content = '數據加載中，請稍後...
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/272114.html