天天看點

Layui 彈出層元件——layer

     layer是作為layui【經典子產品化前端架構】的一個彈層子產品,由于其使用者基數較大,是以把layer作為獨立元件來維護。

基礎參數:

  基礎參數主要指調用方法時用到的配置項,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的content和time即是基礎參數,以鍵值形式存在,基礎參數可合理應用于任何層類型中,我們不需要所有都去配置,大多數都是可選的。而其中的layer.open、layer.msg就是内置方法。

1、type - 基本層類型

<dl><dd></dd></dl>

類型:number,預設:0

layer提供了5種層類型。可傳入的值有:0(資訊框,預設),1(頁面層),2(iframe層),3(加載層),4(tips層)。 若采用的是 layer.open({type: 1}) 方式調用,則type為必填項(資訊框除外)

2、title - 标題

類型:string/array/boolean,預設:'資訊'

title支援三種類型的值,

若傳入的是普通的字元串,如title :'我是标題',那麼隻會改變标題文本;

若還需要自定義标題區域樣式,那麼可以寫title: ['文本', 'font-size:18px;'],數組第二項可以寫任意css樣式;

若不想顯示标題欄,可以t寫 title: false

3、content - 内容

       類型:string/dom/array,預設:''

       content可傳入的值是靈活多變的,不僅可以傳入普通的html内容,還可以指定dom,更可以随着type的不同而不同。比如:

4、area - 寬高

類型:string/array,預設:'auto'

在預設狀态下,layer是寬高都自适應的,但當你隻想定義寬度時,可以area: '500px',高度仍然是自适應的。當你寬高都要定義時,可以area: ['500px', '300px']

5、maxwidth - 最大寬度

類型:,預設:360

請注意:隻有當area: 'auto'時,maxwidth的設定才有效。