【技术博客】iview经常使用工具记录

时间 2020-08-10

标签技术博客 iview 经常使用工具记录繁體版

原文原文链接

对于前端开发来讲，美工彷佛是必不可少的工做。但并非每一个开发团队都配备了美工人员（好比敏杰开发团队），因此一套成熟的UI库和开发页面知道对于咱们这样没有美工人员的团队就显得很是必要。html

而iview就是一套这样的成熟UI库，它几乎包含了页面基础UI须要的全部组件。下文也会先介绍iview的基础组件，而后在举几个iview炫酷的代码示例。前端

iview概述

iview包含的元素有：布局、导航、表单、消息提醒、图表等组件。下面简略说一下这些元素典型组件的使用方法和效果。ios

布局

当拿到一个网页的开发任务，前端如何布局是一个让人头秃的问题，不过view提供了模板，这也是咱们采用的header+content+footer的布局方式。后端

在上图布局中，header左侧部分是前端界面常见的导航栏。app

<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>内容的分区，也是常见的前端需求。iview

好比下面文本框的排布，采用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两种表单，来得到用户的评分。ui

<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>