iview图表_【技术博客】iview常用工具记录
對于前端開發來說，美工似乎是必不可少的工作。但并不是每個開發團隊都配備了美工人員(比如敏杰開發團隊)，所以一套成熟的UI庫和開發頁面知道對于我們這樣沒有美工人員的團隊就顯得非常必要。
而iview就是一套這樣的成熟UI庫，它幾乎包含了頁面基礎UI需要的所有組件。下文也會先介紹iview的基礎組件，然后在舉幾個iview炫酷的代碼示例。
iview概述
iview包含的元素有：布局、導航、表單、消息提醒、圖表等組件。下面簡略說一下這些元素典型組件的使用方法和效果。
布局
當拿到一個網頁的開發任務，前端如何布局是一個讓人頭禿的問題，不過view提供了模板，這也是我們采用的header+content+footer的布局方式。
在上圖布局中，header左側部分是前端界面常見的導航欄。
Item 1
Home
Content
...
除了頁面的整體布局，內容的分區，也是常見的前端需求。
比如下面文本框的排布，采用Row & Col代碼實現。
作者
鏈接(URL)
http://
導航
導航欄的功能在布局一節中已經說明，這部分的主要說說分頁的實現。當一面的內容過多或者需要展示的內容過多時，就需要分頁的功能。而且分頁是需要前后端配合完成的，下面展示我們文獻分頁展示的功能。
: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}`);
},
分頁的功能容易實現，但是需要后端對數據也設計分段，而且保證本頁路由跳轉返回時，依舊保留之前的頁面，需要用使用Router傳遞保存頁面參數。
表單
表單部分是大多數內容輸入需要涉及的內容，下圖是我們用戶意見反饋的一個表單。該表單采用的是一種消息提醒的modal模塊，在modal的基礎上加入input和rate兩種表單，來獲得用戶的評分。
v-model="UserReportModal"
title="期待您的寶貴建議"
@on-ok="okModal"
@on-close="cancelModal"
@on-cancel="cancelModal">
您的聯系方式(E-Mail)
您對我們網站打多少分？
您對我們網站的建議？
消息提醒
iview中有多種消息提醒的模板，比如：
message & notice：成功的消息，比如完成某個操作
modal：比較嚴重的消息，比如前往索引不存在等
tooltip & poptip：適合某個操作的補充說明
下面的代碼也枚舉我們使用消息提醒的一些方式
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
圖表
圖表也是網頁開發中常見的兩種組織形式。我們項目在文獻、隨筆管理中多次用到了表格，下面介紹一下表格的應用。
首先在html內插入table的標簽，之后確定columns的值，同時也要確定傳入的數據值。
: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標簽的功能，比如上圖在table中內嵌button觸發操作的功能，就是由下面render函數提供。render函數的寫法，也由標簽、屬性、顯示內容三個部分組成。
render: (h, params) => h('div', [
h('Button', { // 標簽
props: { // 屬性
icon: 'md-document', size: 'small', type: 'text',
},
style: { marginRight: '5px'},
on: {
click: () => {
this.viewEssay(params.index);
},
},
'查看隨筆'), // 顯示內容
},
},
頁面切換
通過switch按鈕，來達到切換整個頁面的效果，也是非常炫酷的~
切換到圖界面：
切換到表界面：
代碼如下：
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: '圖表轉換成功' });
},
}
}
總結
以上是生活随笔為你收集整理的iview图表_【技术博客】iview常用工具记录的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 煅赭石的功效与作用点
- 下一篇： 什么叫大地高_涨得高不是不买的理由，更不