對(duì)于前端開發(fā)來(lái)說(shuō)，美工似乎是必不可少的工作。但并不是每個(gè)開發(fā)團(tuán)隊(duì)都配備了美工人員(比如敏杰開發(fā)團(tuán)隊(duì))，所以一套成熟的UI庫(kù)和開發(fā)頁(yè)面知道對(duì)于我們這樣沒有美工人員的團(tuán)隊(duì)就顯得非常必要。

而iview就是一套這樣的成熟UI庫(kù)，它幾乎包含了頁(yè)面基礎(chǔ)UI需要的所有組件。下文也會(huì)先介紹iview的基礎(chǔ)組件，然后在舉幾個(gè)iview炫酷的代碼示例。

iview概述

iview包含的元素有：布局、導(dǎo)航、表單、消息提醒、圖表等組件。下面簡(jiǎn)略說(shuō)一下這些元素典型組件的使用方法和效果。

布局

當(dāng)拿到一個(gè)網(wǎng)頁(yè)的開發(fā)任務(wù)，前端如何布局是一個(gè)讓人頭禿的問題，不過(guò)view提供了模板，這也是我們采用的header+content+footer的布局方式。

在上圖布局中，header左側(cè)部分是前端界面常見的導(dǎo)航欄。

Item 1

Home

Content

...

除了頁(yè)面的整體布局，內(nèi)容的分區(qū)，也是常見的前端需求。

比如下面文本框的排布，采用Row & Col代碼實(shí)現(xiàn)。

作者

鏈接(URL)

http://

導(dǎo)航

導(dǎo)航欄的功能在布局一節(jié)中已經(jīng)說(shuō)明，這部分的主要說(shuō)說(shuō)分頁(yè)的實(shí)現(xiàn)。當(dāng)一面的內(nèi)容過(guò)多或者需要展示的內(nèi)容過(guò)多時(shí)，就需要分頁(yè)的功能。而且分頁(yè)是需要前后端配合完成的，下面展示我們文獻(xiàn)分頁(yè)展示的功能。

:total="articleTotal"

:current="page.current"

:page-size="10"

show-total show-elevator

@on-change="changePage"

>

changePage(pageIndex) {

this.page.current = pageIndex;

this.$emit('reloadData', this.page.current);

this.$Message.success(`Change to Page ${pageIndex}`);

},

分頁(yè)的功能容易實(shí)現(xiàn)，但是需要后端對(duì)數(shù)據(jù)也設(shè)計(jì)分段，而且保證本頁(yè)路由跳轉(zhuǎn)返回時(shí)，依舊保留之前的頁(yè)面，需要用使用Router傳遞保存頁(yè)面參數(shù)。

表單

表單部分是大多數(shù)內(nèi)容輸入需要涉及的內(nèi)容，下圖是我們用戶意見反饋的一個(gè)表單。該表單采用的是一種消息提醒的modal模塊，在modal的基礎(chǔ)上加入input和rate兩種表單，來(lái)獲得用戶的評(píng)分。

v-model="UserReportModal"

title="期待您的寶貴建議"

@on-ok="okModal"

@on-close="cancelModal"

@on-cancel="cancelModal">

您的聯(lián)系方式(E-Mail)

您對(duì)我們網(wǎng)站打多少分？

您對(duì)我們網(wǎng)站的建議？

消息提醒

iview中有多種消息提醒的模板，比如：

message & notice：成功的消息，比如完成某個(gè)操作

modal：比較嚴(yán)重的消息，比如前往索引不存在等

tooltip & poptip：適合某個(gè)操作的補(bǔ)充說(shuō)明

下面的代碼也枚舉我們使用消息提醒的一些方式

this.$Message.success(`success`);

this.$Notice.success({ title: 'success' });

v-model="modal"

title="MODAL"

:styles="{top: '20px'}"

@on-cancel="cancelModal">

this.modal = true;

A balloon appears when the mouse passes over this text

Hover

圖表

圖表也是網(wǎng)頁(yè)開發(fā)中常見的兩種組織形式。我們項(xiàng)目在文獻(xiàn)、隨筆管理中多次用到了表格，下面介紹一下表格的應(yīng)用。

首先在html內(nèi)插入table的標(biāo)簽，之后確定columns的值，同時(shí)也要確定傳入的數(shù)據(jù)值。

:columns="columns"

:data="tableData"

border

ref="selection">

export default {

props: {

tableData: {

type: Array,

required: true,

},

},

data() {

return {

columns: [

{

type: 'expand',

width: 50,

render: (h, params) => h(EssayTableExpand, {

props: {

row: params.row,

},

}),

},

{

type: 'selection',

width: 60,

align: 'center',

},

{

title: 'Title',

key: 'title',

},

],

}

}

};

iview組件組合

Render

render提供了在JavaScript代碼中書寫html標(biāo)簽的功能，比如上圖在table中內(nèi)嵌button觸發(fā)操作的功能，就是由下面render函數(shù)提供。render函數(shù)的寫法，也由標(biāo)簽、屬性、顯示內(nèi)容三個(gè)部分組成。

render: (h, params) => h('div', [

h('Button', { // 標(biāo)簽

props: { // 屬性

icon: 'md-document', size: 'small', type: 'text',

},

style: { marginRight: '5px'},

on: {

click: () => {

this.viewEssay(params.index);

},

},

'查看隨筆'), // 顯示內(nèi)容

},

},

頁(yè)面切換

通過(guò)switch按鈕，來(lái)達(dá)到切換整個(gè)頁(yè)面的效果，也是非常炫酷的~

切換到圖界面：

切換到表界面：

代碼如下：

size="large"

@on-change="onChangeViewStyle">

圖

表

stripe

:columns="columns"

:data="tableData">

export default {

data() {

return {

viewStyle: 'card',

},

},

methods: {

onChangeViewStyle() {

if (this.viewStyle === 'card') {

this.viewStyle = 'table';

} else {

this.viewStyle = 'card';

}

this.$Notice.success({ title: '圖表轉(zhuǎn)換成功' });

},

}

}

總結(jié)

以上是生活随笔為你收集整理的iview图表_【技术博客】iview常用工具记录的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。