整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML（超文本標(biāo)記語(yǔ)言）中的元素可以分為兩類：塊級(jí)元素和內(nèi)聯(lián)元素。塊級(jí)元素會(huì)自動(dòng)占據(jù)一行，并且可以設(shè)置寬度和高度。內(nèi)聯(lián)元素不會(huì)自動(dòng)占據(jù)一行，而是根據(jù)文本內(nèi)容的長(zhǎng)度自動(dòng)調(diào)整寬度。塊級(jí)元素可以包含其他元素，包括文本、圖像、鏈接等。內(nèi)聯(lián)元素通常不包含其他元素。
以下是一些常見(jiàn)的塊級(jí)元素：
這些塊級(jí)元素可以通過(guò)設(shè)置 CSS 樣式屬性來(lái)實(shí)現(xiàn)不同的布局和樣式效果，例如設(shè)置背景顏色、邊框、字體、大小、顏色等。同時(shí)，塊級(jí)元素還可以通過(guò)設(shè)置 CSS 定位屬性來(lái)實(shí)現(xiàn)定位和浮動(dòng)效果，例如設(shè)置position: relative;、float: left;
以下是一些常見(jiàn)的內(nèi)聯(lián)元素：
這些內(nèi)聯(lián)元素可以通過(guò)設(shè)置 CSS 樣式屬性來(lái)實(shí)現(xiàn)不同的樣式效果，例如設(shè)置字體、顏色、大小等。同時(shí)，內(nèi)聯(lián)元素還可以通過(guò)設(shè)置 CSS 定位屬性來(lái)實(shí)現(xiàn)定位和浮動(dòng)效果，例如設(shè)置position: relative;、float: left。
默認(rèn)情況下，<img> 元素是內(nèi)聯(lián)元素，它會(huì)根據(jù)文本的流動(dòng)方式進(jìn)行布局。這意味著如果在一行中放置了多個(gè) <img> 元素，它們會(huì)在一行中排列，并且不會(huì)自動(dòng)換行。
但是，如果將 <img> 元素的 display 屬性設(shè)置為 block，那么它就會(huì)成為塊元素。塊元素會(huì)占據(jù)一行，并且可以設(shè)置寬度和高度。在這種情況下，多個(gè) <img> 元素會(huì)自動(dòng)換行，并且可以通過(guò)設(shè)置 margin 屬性來(lái)調(diào)整它們之間的間距。
html
<img src="image.jpg" alt="圖片描述" style="display: block;">
在上面的示例中，<img> 元素的 display 屬性被設(shè)置為 block，這會(huì)使它成為一個(gè)塊元素。你可以根據(jù)需要調(diào)整圖片的寬度和高度，以及 margin 屬性來(lái)控制圖片之間的間距。
2年前做了一個(gè)基于element-ui的layout組件發(fā)布到npm package上去，廣受大家的歡迎，下載量每周頗升。這個(gè)組件的好處在于開(kāi)發(fā)者不用寫(xiě)太多html代碼和邏輯，只要通過(guò)配置json的方式就能馬上生成后臺(tái)，包括菜單欄和導(dǎo)航面包屑等一鍵生成，還能根據(jù)不同的需求做定制化后臺(tái)界面，就像拼積木一樣，讓用戶只專注于內(nèi)容核心代碼的開(kāi)發(fā)。現(xiàn)在還沒(méi)做大范圍的推廣，如果我覺(jué)得它做得足夠好，我一定會(huì)放到npm上推薦給各位讀者使用哈。當(dāng)初為了解答網(wǎng)友的疑問(wèn)，我還專門(mén)建立了該組件的官網(wǎng)。logo看起來(lái)有沒(méi)有很熟悉？哈哈哈，它其實(shí)就是element-ui的logo進(jìn)行改造的，意義就是告訴使用者，這是element-ui功能的組合加強(qiáng)版。
為了迎合公司的OKR，我提出了對(duì)表單表格組件的封裝。為什么我會(huì)有這個(gè)想法？其實(shí)這個(gè)組件我很早就想做了，只是以前做的是基于UI層面的，近期我接手了公司的一個(gè)項(xiàng)目叫童畫(huà)，每天做的事情感覺(jué)就是復(fù)制粘貼，修改部分不同的功能和字段名稱。組件的意義在于可以在遇到同一類設(shè)計(jì)場(chǎng)景時(shí)，可以復(fù)用，從而減少設(shè)計(jì)的時(shí)間和形成產(chǎn)品的統(tǒng)一性。傳統(tǒng)的搜索表單不就是這樣嗎？上面是表單搜索字段，中間是搜索結(jié)果的表格，下面是搜索結(jié)果的分頁(yè)。把表單和表格組合起來(lái)的好處在于很多搜索字段都是基于表格組件的某些字段，那我根據(jù)search字段進(jìn)行篩選不就可以了么，很久之前，我們總是在吐槽產(chǎn)品經(jīng)理總是喜歡截圖現(xiàn)有功能，然后做字段修改，搞成原型扔給前端。如果前端也能像他這樣簡(jiǎn)單，那該多好呀，類似這樣的想法油然而生。剛開(kāi)始我只是為了方便我的工作，沒(méi)想到領(lǐng)導(dǎo)卻重視了起來(lái)，想把這個(gè)組件推廣給公司其他十幾個(gè)前端同事使用，于是乎，我便認(rèn)真開(kāi)搞了起來(lái)。有理論還不行，得有場(chǎng)景實(shí)踐，剛好公司的項(xiàng)目童畫(huà)有很多場(chǎng)景，我根據(jù)它里面的場(chǎng)景，做了很多功能的封裝和兼容。
寫(xiě)到這里，有人會(huì)說(shuō)了，這不就是CRUD組件嗎？有這想法的話，說(shuō)明你還太年輕和小看這個(gè)組件的功能了。傳統(tǒng)的CRUD組件靈活性不是很高，這個(gè)組件的好處是配置即可用，不用考慮其他搜索，翻頁(yè)，清空等各種邏輯，讓組件達(dá)到高度復(fù)用，封裝了場(chǎng)景的插槽類型，但為了防止翻車，我還是預(yù)留了變態(tài)需求的插槽。字段的使用更多采用elementUI的命名方式，讓使用者減少學(xué)習(xí)成本。這樣做的好處是什么呢？首先，前端再也不用寫(xiě)頁(yè)面了，其次，對(duì)于比較規(guī)矩的搜索表單頁(yè)面，完全可以通過(guò)請(qǐng)求接口的形式交給后端來(lái)配置呈現(xiàn)頁(yè)面即可，根本沒(méi)有前端什么事了，前端的工作可以解放出來(lái)做更復(fù)雜的功能開(kāi)發(fā)。
為了使用方便，我把它做成了組件并放到了公司的私服上，接下來(lái)的工作就是寫(xiě)文檔啦，以下是部分文檔的編寫(xiě)，因?yàn)闀r(shí)間問(wèn)題，沒(méi)來(lái)得及好好檢查，各位看官將就看一下就行啦。
export default {
options: {
request: {
api: '/student/web/student/enroll/list',
method: 'GET',
paramMap: {
index: 'pageIndex',
limit: 'pageSize'
},
resultMapping: {
total: 'total',
data: 'pageData'
}
},
size: '', // medium/mini/small, 默認(rèn)medium
labelWidth: 90,
submitBtn: true, // 搜索按鈕，默認(rèn)true，非必填
submitText: '查詢', // 搜索按鈕的文字，默認(rèn)查詢，非必填
clearBtn: true, // 清除按鈕，默認(rèn)true
clearSize: 'mini', // medium/mini/small, 默認(rèn)medium
clearText: '清除', // 清除按鈕的文字，默認(rèn)清除，非必填
column: [
{
slotType: 'selection'
},
{
prop: 'keyword',
label: '學(xué)員/家長(zhǎng)',
search: true,
hide: true
},
{
prop: 'studentName',
label: '學(xué)員'
},
{
prop: 'telephone',
label: '家長(zhǎng)手機(jī)號(hào)',
width: 130
},
{
prop: 'type',
label: '報(bào)名類型',
width: 90,
search: true,
type: 'select',
slot: true,
slotType: 'text',
slotArray: [{
label: '新報(bào)',
value: 1
},
{
label: '續(xù)報(bào)',
value: 2
}],
dicData: [{
label: '新報(bào)',
value: 1
},
{
label: '續(xù)報(bào)',
value: 2
}]
},
{
prop: 'courseFee',
label: '繳費(fèi)金額',
slot: true,
slotType: 'regEx',
regEx: '￥{{courseFee/100}}'
},
{
prop: 'payType',
label: '支付方式',
search: true,
type: 'select',
width: 100,
dicData: [
{
label: '微信',
value: '微信'
},
{
label: '支付寶',
value: '支付寶'
},
{
label: '銀行卡轉(zhuǎn)賬',
value: '銀行卡轉(zhuǎn)賬'
},
{
label: '其它',
value: '其它'
}
]
},
{
prop: 'courseCount',
label: '報(bào)名課時(shí)'
},
{
prop: 'followTeacher',
label: '跟進(jìn)人'
},
{
prop: 'createTime',
label: '報(bào)名時(shí)間',
param: 'beginTime,endTime',
format: 'yyyy 年 MM 月 dd 日',
valueFormat: 'timestamp',
search: true,
width: 160,
type: 'daterange'
},
{
prop: 'auditor',
label: '報(bào)名老師',
search: true,
param: 'teacherId', // 修正請(qǐng)求參數(shù)名
type: 'select',
dicData: [],
dicUrl: '/org/web/org/user/list/teacher',
dicMap: {
label: 'userName',
value: 'id'
}
},
{
prop: 'status',
label: '報(bào)名狀態(tài)',
slot: true,
slotType: 'tag',
width: 110,
slotArray: [{
type: 'warning',
label: '待審核',
value: 1
},
{
type: 'danger',
label: '審核不通過(guò)',
value: 3
},
{
type: 'success',
label: '審核通過(guò)',
value: 2
}],
dicUrl: ''
},
{
prop: 'operation',
label: '操作',
width: 80,
slot: true,
slotType: 'operation',
slotArray: [
{
label: '去審核',
value: 'handle',
filter: ({status}) => {
return status === 1
}
}
]
}
]
}
}生成的頁(yè)面
最后，感謝同事世丞在字段命名上給了很多建議，同時(shí)也感謝領(lǐng)導(dǎo)給了很多刁難的意見(jiàn)，讓這個(gè)組件的功能越發(fā)強(qiáng)大，也讓開(kāi)發(fā)者使用更方便，達(dá)到配置即可使用的地步。當(dāng)然了，組件還需要更多場(chǎng)景的訓(xùn)練才能真正實(shí)現(xiàn)各種功能的兼容。后期我希望可以盡快放到layout官網(wǎng)上，供大家使用。
一個(gè)會(huì)美工與后端PHP/nodejs的全棧工程師
更多學(xué)習(xí)內(nèi)容歡迎關(guān)注
微信公眾號(hào) ：程序員周先生
lt;!DOCTYPE html>
<html>
<head>
<title>我的網(wǎng)頁(yè)</title>
</head>
<body>
<h1>歡迎來(lái)到我的網(wǎng)頁(yè)</h1>
<p>這是一個(gè)簡(jiǎn)單的 HTML 網(wǎng)頁(yè)設(shè)計(jì)。</p>
<img src="https://picsum.photos/200" alt="隨機(jī)圖片">
<ul>
<li>項(xiàng)目 1</li>
<li>項(xiàng)目 2</li>
<li>項(xiàng)目 3</li>
</ul>
</body>
</html>
在這個(gè)例子中，我們創(chuàng)建了一個(gè)簡(jiǎn)單的 HTML 網(wǎng)頁(yè)，其中包括以下元素：
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
