【技術博客】iview經常使用工具記錄

對於前端開發來講，美工彷佛是必不可少的工做。但並非每一個開發團隊都配備了美工人員（好比敏傑開發團隊），因此一套成熟的UI庫和開發頁面知道對於咱們這樣沒有美工人員的團隊就顯得很是必要。

而iview就是一套這樣的成熟UI庫，它幾乎包含了頁面基礎UI須要的全部組件。下文也會先介紹iview的基礎組件，而後在舉幾個iview炫酷的代碼示例。

iview概述

iview包含的元素有：佈局、導航、表單、消息提醒、圖表等組件。下面簡略說一下這些元素典型組件的使用方法和效果。

佈局

當拿到一個網頁的開發任務，前端如何佈局是一個讓人頭禿的問題，不過view提供了模板，這也是咱們採用的header+content+footer的佈局方式。

在上圖佈局中，header左側部分是前端界面常見的導航欄。

<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo"></div>
                    <div class="layout-nav">
                        <MenuItem name="1">
                            <Icon type="ios-navigate"></Icon>
                            Item 1
                            <!-- 添加事件觸發以後造成導航欄 -->
                        </MenuItem>
                        <!-- ... -->
                    </div>
                </Menu>
            </Header>
            <Content :style="{padding: '0 50px'}">
                <Breadcrumb :style="{margin: '20px 0'}">
                    <BreadcrumbItem>Home</BreadcrumbItem>
                    <!-- ... -->
                </Breadcrumb>
                    <div style="min-height: 200px;">
                        Content
                    </div>
            </Content>
            <Footer class="layout-footer-center">...</Footer>
        </Layout>
    </div>
</template>

除了頁面的總體佈局，<content>內容的分區，也是常見的前端需求。

好比下面文本框的排布，採用Row & Col代碼實現。

<Row :gutter="32">
        <Col span="10">
          <br>
          <h3>做者</h3>
          <br>
          <Row :gutter="50" style="margin-left: 20px">
            <Input placeholder="請輸入做者"></Input>
          </Row>
        </Col>
        <Col span="12">
          <br>
          <h3>連接(URL)</h3>
          <br>
          <Row :gutter="50" style="margin-left: 20px">
            <Input placeholder="請輸入網址(URL)">
              <span slot="prepend">http://</span>
            </Input>
          </Row>
        </Col>
      </Row>

導航

導航欄的功能在佈局一節中已經說明，這部分的主要說說分頁的實現。當一面的內容過多或者須要展現的內容過多時，就須要分頁的功能。並且分頁是須要先後端配合完成的，下面展現咱們文獻分頁展現的功能。

<div style="float: right; margin-top: 18px;">
        <Page
          :total="articleTotal"
          :current="page.current"
          :page-size="10"
          show-total show-elevator
          @on-change="changePage"
        >
        </Page>
      </div>
<script>      
    changePage(pageIndex) {
      this.page.current = pageIndex;
      this.$emit('reloadData', this.page.current);
      this.$Message.success(`Change to Page ${pageIndex}`);
    },
</script>

分頁的功能容易實現，可是須要後端對數據也設計分段，並且保證本頁路由跳轉返回時，依舊保留以前的頁面，須要用使用Router傳遞保存頁面參數。

表單

表單部分是大多數內容輸入須要涉及的內容，下圖是咱們用戶意見反饋的一個表單。該表單採用的是一種消息提醒的modal模塊，在modal的基礎上加入input和rate兩種表單，來得到用戶的評分。

<Modal
      v-model="UserReportModal"
      title="期待您的寶貴建議"
      @on-ok="okModal"
      @on-close="cancelModal"
      @on-cancel="cancelModal">
      <h3>您的聯繫方式(E-Mail)</h3>
      <Input v-model="UserEmail" placeholder="能夠不填哦" clearable style="width: 200px"/>
      <h3>您對咱們網站打多少分？</h3>
      <Rate allow-half v-model="UserRating"/>
      <h3>您對咱們網站的建議？</h3>
      <Input v-model="UserSuggest" type="textarea" placeholder="您的建議是咱們前進的動力"/>
    </Modal>

消息提醒

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

• message & notice：成功的消息，好比完成某個操做

• modal：比較嚴重的消息，好比前往索引不存在等

• tooltip & poptip：適合某個操做的補充說明

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

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

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

    <Modal
      v-model="modal"
      title="MODAL"
      :styles="{top: '20px'}"
      @on-cancel="cancelModal">
    </Modal>
this.modal = true;

<Tooltip content="Here is the prompt text">
        A balloon appears when the mouse passes over this text
</Tooltip>

<Poptip trigger="hover" title="Title" content="content">
        <Button>Hover</Button>
</Poptip>

圖表

圖表也是網頁開發中常見的兩種組織形式。咱們項目在文獻、隨筆管理中屢次用到了表格，下面介紹一下表格的應用。

首先在html內插入table的標籤，以後肯定columns的值，同時也要肯定傳入的數據值。

<Table row-key="id"
           :columns="columns"
           :data="tableData"
           border
           ref="selection">
    </Table>
<script>
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',
        },
      ],
    }
  }
};
</script>

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按鈕，來達到切換整個頁面的效果，也是很是炫酷的~

• 切換到圖界面：
  

• 切換到表界面：
  

  代碼以下：

<i-switch
        size="large"
        @on-change="onChangeViewStyle">
        <span slot="open">圖</span>
        <span slot="close">表</span>
      </i-switch>
    <div v-if="viewStyle==='card'">
      <!-- card -->
    </div>
    <div v-else>
      <Table
        stripe
        :columns="columns"
        :data="tableData">
      </Table>
    </div>
    
<script>
export default {
  data() {
    return {
      viewStyle: 'card',
    },
  },
  methods: {
    onChangeViewStyle() {
      if (this.viewStyle === 'card') {
        this.viewStyle = 'table';
      } else {
        this.viewStyle = 'card';
      }
      this.$Notice.success({ title: '圖表轉換成功' });
    },
  }
}
</script>