layui使用心得


首先先說一下input的各個(gè)屬性:

class="layui-input"-------將input定義為layui樣式,

name="finishdate"-------規(guī)定了input的名稱,只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值,

lay-verify="required"-------表單驗(yàn)證(在js中書寫form.verify()方法對自定義的標(biāo)簽值進(jìn)行校驗(yàn) ),

placeholder------input的填充

autocomplete------屬性規(guī)定輸入字段是否應(yīng)該啟用自動(dòng)完成功能(當(dāng)用戶在字段開始鍵入時(shí),瀏覽器基于之前鍵入過的值,應(yīng)該顯示出在字段中填寫的選項(xiàng)),

再說一下彈出層layer:

在做項(xiàng)目時(shí)我把一個(gè)input的表單放在layer里面顯示,然后說一下layer各個(gè)參數(shù)的用法:

1.type: ? 類型:number,默認(rèn)為0

?layer提供了5種層類型??蓚魅氲闹涤校?i>0(信息框,默認(rèn))1(頁面層)2(iframe層)3(加載層)4(tips層)。 若你采用layer.open({type: 1})方式調(diào)用,則type為必填項(xiàng)(信息框除外)


2.title: ?? 類型:String/Array/Boolean,默認(rèn):'信息'

title支持三種類型的值,若你傳入的是普通的字符串,如title :'我是標(biāo)題',那么只會(huì)改變標(biāo)題文本;若你還需要自定義標(biāo)題區(qū)域樣式,那么你可以title: ['文本', 'font-size:18px;'],數(shù)組第二項(xiàng)可以寫任意css樣式;如果你不想顯示標(biāo)題欄,你可以title: false。


3.content: ? 類型:String/DOM/Array,默認(rèn):''

content可傳入的值是靈活多變的,不僅可以傳入普通的html內(nèi)容,還可以指定DOM,更可以隨著type的不同而不同。


4.area: ??類型:String/Array,默認(rèn):'auto'

默認(rèn)狀態(tài)下,layer彈出層的寬高是自適應(yīng)的,但當(dāng)只想定義寬度時(shí),你可以area: '500px',高度仍然是自適應(yīng)的。當(dāng)寬高都要定義時(shí),你可以area: ['500px', '300px']

5.btn: ??類型:String/Array,默認(rèn):'確認(rèn)'

信息框模式時(shí),btn默認(rèn)是一個(gè)確認(rèn)按鈕,其它層類型則默認(rèn)不顯示,加載層和tips層則無效。當(dāng)您只想自定義一個(gè)按鈕時(shí),你可以btn: '我知道了',當(dāng)你要定義兩個(gè)按鈕時(shí),你可以btn: ['yes', 'no']。當(dāng)然,你也可以定義更多按鈕,比如:btn: ['按鈕1', '按鈕2', '按鈕3', …],按鈕1和按鈕2的回調(diào)分別是yes和cancel,而從按鈕3開始,則回調(diào)為btn3: function(){},以此類推。


6.btnAlign - 按鈕排列

你可以快捷定義按鈕的排列位置,btnAlign的默認(rèn)值為r,即右對齊。該參數(shù)可支持的賦值如下:

btnAlign: 'l' 按鈕左對齊

btnAlign: 'c'? 按鈕居中對齊

btnAlign: 'r'? 按鈕右對齊。默認(rèn)值,不用設(shè)置


7.maxmin:最大最小化

該參數(shù)值對type:1type:2有效。默認(rèn)不顯示最大小化按鈕。需要顯示配置maxmin: true即可


8.fixed - 固定

類型:Boolean,默認(rèn):true

即鼠標(biāo)滾動(dòng)時(shí),層是否固定在可視區(qū)域。如果不想,設(shè)置fixed: false即可


9.resize - 是否允許拉伸

類型:Boolean,默認(rèn):true

默認(rèn)情況下,你可以在彈層右下角拖動(dòng)來拉伸尺寸。如果對指定的彈層屏蔽該功能,設(shè)置 false即可。該參數(shù)對loading、tips層無效



layui--table格式:

詳見layui-table的相關(guān)問題

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,555評論 19 139
  • 用剛剛升級好的iOS10 開發(fā)調(diào)試,發(fā)現(xiàn)程序在某個(gè)頁面突然閃退,頓時(shí)有點(diǎn)懵逼了 這可是公司四五年的老工程了! 于...
    小_菜_鳥閱讀 1,115評論 0 0
  • 補(bǔ)2月3日:感恩,有真的美的圖,感恩讓我看到了鄭州的月亮。 感恩大家給姐姐過生日,祝福姐姐身體健康,幸??鞓?! 補(bǔ)...
    愛月亮的魚兒愛閱讀 241評論 0 0
  • 下午接小妞時(shí),遇到口才班在推銷課程,100元送四節(jié)課再送一套冰淇淋玩具,小妞不管他是什么,玩具送過來就拿住不...
    拾二微童話閱讀 232評論 1 1
  • 情愁 暗度歲月惜時(shí)節(jié)幾憶流年終殘年一局終是傷一句終是夢夢里別時(shí)又依依終是故人離月終會(huì)缺只剩一人等這離別雨無人理獨(dú)剩...
    該昵稱重復(fù)PLUS閱讀 147評論 0 0

友情鏈接更多精彩內(nèi)容