iView 常用组件

iView

iView 是一套基于 Vue.js 的 UI 组件库。

在一些场景下,使用 iView 对于项目的开发效率会有一定程度的提升,这里主要精简的列出一些开发中使用频率较高的组件。

引入

  • CDN

    1
    2
    3
    4
    5
    6
    <!-- import Vue.js -->
    <script src="//vuejs.org/js/vue.min.js"></script>
    <!-- import stylesheet -->
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <!-- import iView -->
    <script src="//unpkg.com/iview/dist/iview.min.js"></script>
  • NPM

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    //安装 
    npm install iview --save

    //引用
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import App from 'components/app.vue';
    import Routers from './router.js';
    import iView from 'iview';
    import 'iview/dist/styles/iview.css';

    Vue.use(VueRouter);
    Vue.use(iView);

    // The routing configuration
    const RouterConfig = {
    routes: Routers
    };
    const router = new VueRouter(RouterConfig);

    new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
    });
  • iView-admin

      iView-admin是iView生态中的成员之一,是一套采用前后端分离开发模式,基于Vue的后台管理系统前端解决方案。
      iView-admin2.0脱离1.x版本进行重构,换用Webpack4.0 + Vue-cli3.0作为基本开发环境。
      内置了开发后台管理系统常用的逻辑功能,和开箱即用的业务组件,旨在让开发者能够以最小的成本开发后台管理系统,降低开发量。
    

相关使用移步 iView-admin2.0

组件

1
2
3
4
5
<Breadcrumb>
<BreadcrumbItem to="/">Home</BreadcrumbItem>
<BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
<BreadcrumbItem>Breadcrumb</BreadcrumbItem>
</Breadcrumb>

Input

1
2
3
<Input v-model="inputValue" type="text" placeholder="please enter" />

<InputNumber v-model="inputValue" :min="0" :max="100" :step="5" placeholder="please enter" />

Select

1
2
3
<Select v-model="selectValue" disabled>
<Option v-for="item in listData" :value="item.value" :key="item.key">{{ item.value }</Option>
</Select>

Button

1
<Button type="primary" @click="startModel">Button</Button>

Table

1
<Table :data="tableData" :loading="isLoading" :columns="column" @on-selection-change="callback"></Table>

Page

1
2
3
4
5
6
7
8
9
10
<Page 
:total="totalCount"
:current.sync="current"
:page-size-opts="[10, 20]"
@on-change="changePage"
@on-page-size-change="changePageSize"
show-elevator
show-total
show-sizer>
</Page>

Message

1
2
3
4
5
6
7
8
9
10
11
12
//global config
this.$Message.config({
top: 100
})

//config for current component
this.$Message.info({
content: 'MESSAGE',
duration: 5
})

this.$Message.error('ERROR')

Model

1
2
3
4
5
6
7
<Modal  
v-model="title"
title="提示信息"
@on-ok="sureCallback"
@on-cancel="cancelCallback">
Content
</Modal>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<Menu :active-name="activeName" theme="light" width="200px" :open-names="openName" ref="side_menu">
<MenuItem name="one" to="">
<Icon type="ios-analytics"></Icon>
item1
</MenuItem>
<Submenu name="two">
<template slot="title">
<Icon type="ios-navigate"></Icon>
item2
</template>
<MenuItem name="one-two" to=""></MenuItem>
</Submenu>
</Menu>

export default {
mounted() {
this.$nextTick(() => {
//echo and expand selected menu
this.$refs.side_menu.updateOpened();
this.$refs.side_menu.updateActiveName();
});
}
}

布局

Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="layout">
<Layout>
<Header>

</Header>
<Layout>
<Sider hide-trigger :style="{background: '#fff'}">

</Sider>
<Layout :style="{padding: '0 24px 24px'}">
<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
Content
</Content>
</Layout>
</Layout>
</Layout>
</div>
作者

晓策

发布于

2019-02-15

更新于

2022-06-08

许可协议

评论