本書結(jié)合Vue和OpenLayers,由淺入深、循序漸進地介紹Element的常用組件用法。本書共8章,首先介紹Element+Vue+OpenLayers開發(fā)環(huán)境的配置;然后結(jié)合Vue和OpenLayers對Element的常用組件進行詳細的介紹,包括基本組件、表單組件、數(shù)據(jù)組件、通知組件、導(dǎo)航組件以及其他組件;最后以開發(fā)一個簡單的智慧校園系統(tǒng)為例,進行Element+Vue+OpenLayers的項目實戰(zhàn)。
郭明強,男,重慶人,信息工程系副教授,從事網(wǎng)絡(luò)地理信息系統(tǒng)和高性能空間計算的研究和教學(xué)工作。2007年獲中國地質(zhì)大學(xué)(武漢)計算機科學(xué)與技術(shù)學(xué)士學(xué)位;2013年獲中國地質(zhì)大學(xué)(武漢)地圖制圖學(xué)與地理信息工程博士學(xué)位。
目 錄
第1章 開發(fā)環(huán)境的配置 (1)
1.1 使用npm配置開發(fā)環(huán)境 (1)
1.1.1 Vue的安裝 (1)
1.1.2 Element的安裝 (6)
1.1.3 OpenLayers的安裝 (6)
1.2 采用直接引用的方式配置開發(fā)環(huán)境 (7)
1.2.1 下載Vue文件 (7)
1.2.2 下載Element文件 (8)
1.2.3 下載OpenLayers文件 (10)
1.3 第一個Element+Vue+OpenLayers示例 (11)
1.4 多語言切換 (12)
1.5 自定義主題樣式切換 (14)
1.6 組件過渡動畫 (15)
第2章 基本組件 (19)
2.1 Element的布局 (19)
2.1.1 基礎(chǔ)布局 (19)
2.1.2 分欄間隔 (20)
2.1.3 混合布局 (21)
2.1.4 分欄偏移 (23)
2.1.5 對齊方式 (24)
2.2 Element的布局容器 (26)
2.3 Element的色彩 (29)
2.4 Element的字體 (32)
2.5 Element的邊框 (35)
2.6 Element的圖標 (38)
2.7 Element的按鈕 (40)
2.7.1 按鈕的樣式定義 (40)
2.7.2 按鈕的事件綁定 (42)
2.8 Element的文字鏈接 (44)
2.9 思考與練習(xí)題 (46)
第3章 表單組件 (47)
3.1 單選框(Radio) (47)
3.2 多選框(Checkbox) (49)
3.3 輸入框(Input) (52)
3.4 計數(shù)器(InputNumber) (56)
3.5 選擇器(Select) (57)
3.6 級聯(lián)選擇器(Cascader) (61)
3.7 開關(guān)(Switch) (64)
3.8 滑塊(Slider) (66)
3.9 時間選擇器(TimePicker) (69)
3.10 日期選擇器(DatePic) (73)
3.11 日期時間選擇器(DateTimePicker) (76)
3.12 上傳(Upload) (78)
3.13 評分(Rate) (86)
3.14 顏色選擇器(ColorPicker) (88)
3.15 穿梭框(Transfer) (89)
3.16 表單(Form) (95)
3.17 思考與練習(xí)題 (110)
第4章 數(shù)據(jù)組件 (111)
4.1 表格(Table) (111)
4.2 標簽(Tag) (143)
4.3 進度條(Progress) (146)
4.4 樹形(Tree)組件 (148)
4.5 分頁(Pagination) (158)
4.6 標注(Badge) (159)
4.7 頭像(Avatar) (162)
4.8 思考與練習(xí)題 (164)
第5章 通知組件 (165)
5.1 警告(Alert) (165)
5.2 加載(Loading) (167)
5.3 消息提示(Message) (172)
5.4 彈框(MessageBox) (175)
5.5 通知(Notification) (185)
5.6 思考與練習(xí)題 (191)
第6章 導(dǎo)航組件 (193)
6.1 導(dǎo)航菜單(NavMenu) (193)
6.2 標簽頁(Tabs) (198)
6.3 面包屑(Breadcrumb) (202)
6.4 頁頭(PageHeader) (204)
6.5 下拉菜單(Dropdown) (205)
6.6 步驟條(Steps) (208)
6.7 思考與練習(xí)題 (211)
第7章 其他組件 (213)
7.1 對話框(Dialog) (213)
7.2 文字提示(Tooltip) (217)
7.3 彈出框(Popover) (219)
7.4 卡片(Card) (221)
7.5 走馬燈(Carousel) (223)
7.6 折疊面板(Collapse) (225)
7.7 時間線(Timeline) (228)
7.8 分割線(Divider) (230)
7.9 日歷(Calendar) (231)
7.10 圖片(Image) (233)
7.11 無限滾動(InfiniteScroll) (235)
7.12 抽屜(Drawer) (236)
7.13 思考與練習(xí)題 (240)
第8章 Element+Vue+OpenLayers項目實戰(zhàn) (241)
8.1 智慧校園系統(tǒng)的需求分析 (241)
8.2 智慧校園系統(tǒng)的設(shè)計 (241)
8.2.1 開發(fā)環(huán)境 (241)
8.2.2 數(shù)據(jù)結(jié)構(gòu)設(shè)計 (241)
8.2.3 系統(tǒng)功能設(shè)計 (247)
8.3 智慧校園系統(tǒng)的功能實現(xiàn) (247)
8.3.1 地圖基本功能 (248)
8.3.2 道路設(shè)施查詢 (249)
8.3.3 運動休閑查詢 (250)
8.3.4 教學(xué)設(shè)施查詢 (251)
8.3.5 餐飲服務(wù)查詢 (252)
8.3.6 辦公樓查詢 (252)
8.3.7 學(xué)生宿舍查詢 (253)