当前位置： 移动技术网 > IT编程>开发语言>JavaScript > VueUI -- iView4.0简单使用

VueUI -- iView4.0简单使用

2019年12月07日  | 移动技术网IT编程  | 我要评论

一、iview（view ui）

1、简介

　　官网：https://www.iviewui.com/
　　仓库：https://github.com/view-design/viewui
　　iview 与 view ui 本质上是一个东西，随着版本的升级，iview （4.0）改名为 view ui。是一套基于vue.js 的开源 ui 组件库。

2、安装、使用

（1）使用 npm 安装（项目中如何使用，命令行运行）

npm install view-design --save

　　使用 vue-cli3.0 创建项目，可以参考：https://www.cnblogs.com/l-y-h/p/11241503.html。

【小案例：在项目的 main.js 中引入】
【main.js】
import vue from 'vue'
import app from './app.vue'
// step1: 引入 viewui
import viewui from 'view-design'
// step2: 引入 css 
import 'view-design/dist/styles/iview.css'

vue.config.productiontip = false
// step3:声明使用 viewui
vue.use(viewui)

new vue({
  render: h => h(app),
}).$mount('#app')



【修改app.vue】
<template>
    <div>
        <i-button @click="show">click me!</i-button>
        <modal v-model="visible" title="welcome">welcome to viewui</modal>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                visible: false
            }
        },
        methods: {
            show() {
                this.visible = true
            }
        }
    }
</script>

<style>

</style>

 

 

 

 

 

 

（2）不使用 npm 安装（单 html 中使用，直接运行）

【使用 <script> 标签引入 js 文件】
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>

【使用 <link> 标签引入 css 文件】
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">


【小案例：（）】
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>viewui example</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
    <i-button @click="show">click me!</i-button>
    <modal v-model="visible" title="welcome">welcome to viewui</modal>
</div>
<script>
    new vue({
        el: '#app',
        data: {
            visible: false
        },
        methods: {
            show: function () {
                this.visible = true
            }
        }
    })
  </script>
</body>
</html>

 

 

 

 

 

 

二、组件 -- 基础

1、颜色（color）

　　详见： https://www.iviewui.com/components/color

 

 

 

2、字体（font）

　　详见：https://www.iviewui.com/components/font

 

 

3、按钮（button）

　　详见：https://www.iviewui.com/components/button

 

 

 

【app.vue】
<template>
    <div>
        <p>通过 type 来设置不同样式的按钮</p>
        <button>default</button>&nbsp;
        <button type="primary">primary</button>&nbsp;
        <button type="dashed">dashed</button>&nbsp;
        <button type="text">text</button>&nbsp;
        <button type="info">info</button>&nbsp;
        <button type="success">success</button>&nbsp;
        <button type="warning">warning</button>&nbsp;
        <button type="error">error</button>
        <br/><br/><br/>
        
        <p>通过 ghost 可以将背景色置为透明，通常用于有色背景上</p>
        <button ghost>default</button>&nbsp;
        <button type="primary" ghost>primary</button>&nbsp;
        <button type="dashed" ghost>dashed</button>&nbsp;
        <button type="text" ghost>text</button>&nbsp;
        <button type="info" ghost>info</button>&nbsp;
        <button type="success" ghost>success</button>&nbsp;
        <button type="warning" ghost>warning</button>&nbsp;
        <button type="error" ghost>error</button>
        <br/><br/><br/>
        
        <p>icon 可以设置图标、shape 可以设置按钮的图形,在 button 内部使用 icon 可以自定义图标的位置</p>
        <button type="primary" shape="circle" icon="ios-search"></button>&nbsp;
        <button type="primary" icon="ios-search">search</button>&nbsp;
        <button type="primary" shape="circle">
            search&nbsp;<icon type="ios-search"></icon>
        </button>&nbsp;
        <button type="primary">circle</button>
        <br/><br/><br/>
        
        <p>size 可以用来设置尺寸，large、default、small</p>
        <button type="success">success</button>&nbsp;
        <button type="success" size="large">success</button>&nbsp;
        <button type="success" size="default">success</button>&nbsp;
        <button type="success" size="small">success</button>
        <br/><br/><br/>
        
        <p>long 可以用来填充宽度，宽度100%</p>
        <button type="success" size="large" long>success</button>&nbsp;
        <button type="success" size="large" long style="width: 600px;">success</button>
        <br/><br/><br/>
        
        <p>loading 可以使按钮处于加载中的样式。disabled 使按钮不可用</p>
        <button type="success" loading>success</button>&nbsp;
        <button type="success" disabled>success</button>
        <br/><br/><br/>
        
        <p>使用 buttongroup 可以实现多个按钮组合的效果,shape 改变图形、size 改变大小、 vertical 使按钮组垂直显示</p>
        <buttongroup shape="circle" size="small">
            <button type="success">success</button>&nbsp;
            <button type="success">success</button>
        </buttongroup>
        <buttongroup shape="circle" size="small" vertical>
            <button type="success">success</button>&nbsp;
            <button type="success">success</button>
        </buttongroup>
        <br/><br/><br/>
        
        <p>to 可以实现链接跳转，支持 vue-router 对象，replace 则不会向浏览器 history 中记录， target 等同于 a 标签</p>
        <button to="https://www.baidu.com">normal</button>&nbsp;
        <button to="https://www.baidu.com" replace>no history</button>&nbsp;
        <button to="https://www.baidu.com" target="_blank">new window</button>
    </div>
</template>

<script>
    export default {
    }
</script>

<style>

</style>

 

 

 

4、图标（icon）

　　详见：https://www.iviewui.com/components/icon

【渲染前：】
<icon type="ios-search" />

【渲染后：】
<i class="ivu-icon ivu-icon-ios-search"></i>

 

 

 

三、组件 -- 布局

1、栅格系統（grid）

　　详见：https://www.iviewui.com/components/grid

（1）使用栅格系统进行网页布局，可以使页面排版更加美观、舒适。

（2）采用 24 栅格系统。分为 row（行）和 col （列），其中 col  24 等分，可以使用 span 来控制。

 

 

 

【app.vue】

<template>
    <div style="width: 800px;">
        <h5>基本使用、水平布局</h5>
        <row>
            <i-col span="4"><div style="background: #219161;">col-4</div></i-col>
            <i-col span="8"><div style="background: #19469d">col-8</div></i-col>
            <i-col span="12"><div style="background: #880000">col-12</div></i-col>
        </row>
        <row>
            <i-col span="4" style="background: #219161;">col-4</i-col>
            <i-col span="4" style="background: #19469d">col-8</i-col>
            <i-col span="12" style="background: #880000">col-12</i-col>
        </row>
        <br/>
        
        <h5>区块间隔, 使用 :gutter 可以设置区块间隔，flex 可以改变 栅格顺序(与 order 连用)</h5>
        <row :gutter="16">
            <i-col span="4" order="3"><div style="background: #219161;">col-4</div></i-col>
            <i-col span="8" order="2"><div style="background: #19469d">col-8</div></i-col>
            <i-col span="12" order="1"><div style="background: #880000">col-12</div></i-col>
        </row>
        <row :gutter="16" type="flex">
            <i-col span="4" order="3"><div style="background: #219161;">col-4</div></i-col>
            <i-col span="8" order="2"><div style="background: #19469d">col-8</div></i-col>
            <i-col span="12" order="1"><div style="background: #880000">col-12</div></i-col>
        </row>
        <br/>
        
        <h5>push="x" 向右移 x 格， pull="x" 向左移 x 格， offset="x" 向右偏移 x 格</h5>
        <row>
            <i-col span="18" push="6"><div style="background: #219161;">push-6</div></i-col>
            <i-col span="6" pull="18"><div style="background: #880000;">pull-18</div></i-col>
        </row>
        <row>
            <i-col span="8" offset="2"><div style="background: #219161;">push-6</div></i-col>
            <i-col span="10" offset="4"><div style="background: #880000;">pull-18</div></i-col>
        </row>
        <br/>
        
        <h5>justify:flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between</h5>
        <p>子元素向左排列</p>
        <row type="flex" justify="start" style="background-color: #999999">
            <i-col span="4"><div style="background: #219161;">col-4</div></i-col>
            <i-col span="4"><div style="background: #19469d;">col-4</div></i-col>
            <i-col span="4"><div style="background: #880000;">col-4</div></i-col>
            <i-col span="4"><div style="background: #00a000">col-4</div></i-col>
        </row>
        <p>子元素向右排列</p>
        <row type="flex" justify="end" style="background-color: #999999">
            <i-col span="4"><div style="background: #219161;">col-4</div></i-col>
            <i-col span="4"><div style="background: #19469d;">col-4</div></i-col>
            <i-col span="4"><div style="background: #880000;">col-4</div></i-col>
            <i-col span="4"><div style="background: #00a000">col-4</div></i-col>
        </row>
        <p>子元素向居中排列</p>
        <row type="flex" justify="center" style="background-color: #999999">
            <i-col span="4"><div style="background: #219161;">col-4</div></i-col>
            <i-col span="4"><div style="background: #19469d;">col-4</div></i-col>
            <i-col span="4"><div style="background: #880000;">col-4</div></i-col>
            <i-col span="4"><div style="background: #00a000">col-4</div></i-col>
        </row>
        <p>子元素等宽排列</p>
        <row type="flex" justify="space-around" style="background-color: #999999">
            <i-col span="4"><div style="background: #219161;">col-4</div></i-col>
            <i-col span="4"><div style="background: #19469d;">col-4</div></i-col>
            <i-col span="4"><div style="background: #880000;">col-4</div></i-col>
            <i-col span="4"><div style="background: #00a000">col-4</div></i-col>
        </row>
        <p>子元素分散排列</p>
        <row type="flex" justify="space-between" style="background-color: #999999">
            <i-col span="4"><div style="background: #219161;">col-4</div></i-col>
            <i-col span="4"><div style="background: #19469d;">col-4</div></i-col>
            <i-col span="4"><div style="background: #880000;">col-4</div></i-col>
            <i-col span="4"><div style="background: #00a000">col-4</div></i-col>
        </row>
        <br/>
        
        <h5>align:flex 布局下的垂直对齐方式，可选值为top、middle、bottom</h5>
        <p>子元素顶部对齐</p>
        <row type="flex" justify="center" align="top" style="background-color: #999999">
            <i-col span="4"><div style="background: #219161; height: 40px;">col-4</div></i-col>
            <i-col span="4"><div style="background: #19469d; height: 30px;">col-4</div></i-col>
            <i-col span="4"><div style="background: #880000; height: 20px;">col-4</div></i-col>
            <i-col span="4"><div style="background: #00a000; height: 35px;">col-4</div></i-col>
        </row>
        <p>子元素居中对齐</p>
        <row type="flex" justify="center" align="middle" style="background-color: #999999">
            <i-col span="4"><div style="background: #219161; height: 40px;">col-4</div></i-col>
            <i-col span="4"><div style="background: #19469d; height: 30px;">col-4</div></i-col>
            <i-col span="4"><div style="background: #880000; height: 20px;">col-4</div></i-col>
            <i-col span="4"><div style="background: #00a000; height: 35px;">col-4</div></i-col>
        </row>
        <p>子元素底部对齐</p>
        <row type="flex" justify="center" align="bottom" style="background-color: #999999">
            <i-col span="4"><div style="background: #219161; height: 40px;">col-4</div></i-col>
            <i-col span="4"><div style="background: #19469d; height: 30px;">col-4</div></i-col>
            <i-col span="4"><div style="background: #880000; height: 20px;">col-4</div></i-col>
            <i-col span="4"><div style="background: #00a000; height: 35px;">col-4</div></i-col>
        </row>
    </div>
</template>

<script>
    export default {}
</script>

<style>

</style>

 

 

 

2、布局（layout）

　　详见：https://www.iviewui.com/components/layout

常用组件：header、sider、content、footer、 layout

（1）layout：布局容器，内部可嵌套 header、sider、content、footer、 layout。可放在任意父容器中。

（2）header：顶部布局，自带默认样式，只能放在 layout 中。

（3）sider：侧边栏布局，自带默认样式，只能放在 layout 中。

（4）content：内容主体布局，自带默认样式，只能放在 layout 中。

（5）footer：底部布局，自带默认样式，只能放在 layout 中。

【app.vue】

<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>
                        <menuitem name="2">
                            <icon type="ios-keypad"></icon>
                            item 2
                        </menuitem>
                        <menuitem name="3">
                            <icon type="ios-analytics"></icon>
                            item 3
                        </menuitem>
                        <menuitem name="4">
                            <icon type="ios-paper"></icon>
                            item 4
                        </menuitem>
                    </div>
                </menu>
            </header>
            <layout>
                <!-- hide-trigger，隐藏默认触发器 -->
                <sider hide-trigger :style="{background: '#fff'}">
                    <menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                        <submenu name="1">
                            <!-- 使用 slot 自定义触发器 -->
                            <template slot="title">
                                <icon type="ios-navigate"></icon>
                                item 1
                            </template>
                            <menuitem name="1-1">option 1</menuitem>
                            <menuitem name="1-2">option 2</menuitem>
                            <menuitem name="1-3">option 3</menuitem>
                        </submenu>
                        <submenu name="2">
                            <template slot="title">
                                <icon type="ios-keypad"></icon>
                                item 2
                            </template>
                            <menuitem name="2-1">option 1</menuitem>
                            <menuitem name="2-2">option 2</menuitem>
                        </submenu>
                        <submenu name="3">
                            <template slot="title">
                                <icon type="ios-analytics"></icon>
                                item 3
                            </template>
                            <menuitem name="3-1">option 1</menuitem>
                            <menuitem name="3-2">option 2</menuitem>
                        </submenu>
                    </menu>
                </sider>
                <layout :style="{padding: '0 24px 24px'}">
                    <breadcrumb :style="{margin: '24px 0'}">
                        <breadcrumbitem>home</breadcrumbitem>
                        <breadcrumbitem>components</breadcrumbitem>
                        <breadcrumbitem>layout</breadcrumbitem>
                    </breadcrumb>
                    <content :style="{padding: '24px', minheight: '280px', background: '#fff'}">
                        content
                    </content>
                </layout>
            </layout>
        </layout>
    </div>
</template>
<script>
    export default {
        
    }
</script>
<style scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    width: 800px;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
</style>

 

 

 

3、列表（list）

　　详见：https://www.iviewui.com/components/list

（1）基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

 

 

 

 

 

 （2）小案例分析

【app.vue】
<template>
    <div style="width: 900px;">
        <h3>一、使用 header 可以定义列表的头部， footer 可以定义列表的底部, size 可以定义列表的大小， border 定义列表的边界</h3>
        <strong>default size:</strong>
        <list header="header" footer="footer" border>
            <listitem>this is a piece of text.</listitem>
        </list>
        <strong>small size:</strong>
        <list border size="small">
            <listitem>this is a piece of text.</listitem>
        </list>
        <strong>large size:</strong>
        <list border size="large">
            <listitem>this is a piece of text.</listitem>
        </list>
        <br>

        <h3>二、listitemmeta 中使用 avatar 可以定义图标， title 定义标题， description 定义内容</h3>
        <list>
            <listitem>
                <listitemmeta avatar="https://dev-file.iviewui.com/userinfopdvn9gkwyihr24spgc319vxy8qnicqj4/avatar" title="this is title" description="this is description, this is description." />
                <template slot="action">
                    <li>
                        <a href="">edit</a>
                    </li>
                    <li>
                        <a href="">more</a>
                    </li>
                </template>
            </listitem>
        </list>
        <list>
            <listitem>
                <listitemmeta avatar="https://dev-file.iviewui.com/userinfopdvn9gkwyihr24spgc319vxy8qnicqj4/avatar" title="this is title" description="this is description, this is description." />
                <template slot="action">
                    <li>
                        <icon type="ios-star-outline" /> 123
                    </li>
                    <li>
                        <icon type="ios-thumbs-up-outline" /> 234
                    </li>
                    <li>
                        <icon type="ios-chatbubbles-outline" /> 345
                    </li>
                </template>
                <template slot="extra">
                    <img src="https://dev-file.iviewui.com/5wxhcqmuyraumcgsveyvxhr5jmvs7dph/large" style="width: 280px">
                </template>
            </listitem>
        </list>
        
        <h3>三、使用 item-layout="vertical" 可以使列表垂直</h3>
        <list item-layout="vertical">
            <listitem>
                <listitemmeta avatar="https://dev-file.iviewui.com/userinfopdvn9gkwyihr24spgc319vxy8qnicqj4/avatar" title="this is title" description="this is description, this is description." />
                <template slot="action">
                    <li>
                        <a href="">edit</a>
                    </li>
                    <li>
                        <a href="">more</a>
                    </li>
                </template>
            </listitem>
        </list>

        <list item-layout="vertical">
            <listitem>
                <listitemmeta avatar="https://dev-file.iviewui.com/userinfopdvn9gkwyihr24spgc319vxy8qnicqj4/avatar" title="this is title" description="this is description, this is description." />
                <template slot="action">
                    <li>
                        <icon type="ios-star-outline" /> 123
                    </li>
                    <li>
                        <icon type="ios-thumbs-up-outline" /> 234
                    </li>
                    <li>
                        <icon type="ios-chatbubbles-outline" /> 345
                    </li>
                </template>
                <template slot="extra">
                    <img src="https://dev-file.iviewui.com/5wxhcqmuyraumcgsveyvxhr5jmvs7dph/large" style="width: 280px">
                </template>
            </listitem>
        </list>
    </div>
</template>
<script>
    export default {

    }
</script>
<style>
</style>

 

 

 

4、卡片（card）

　　详见：https://www.iviewui.com/components/card

（1）基础容器，用来显示文字、列表、图文等内容，也可以配合其它组件一起使用。

 

 

 

（2）小案例分析：

【app.vue】

<template>
    <div style="width: 800px;">
        <row style="background:#eee;padding:20px">
            <i-col span="5">
                <p>默认卡片效果</p>
                <card>
                    <p slot="title">default</p>
                    <p>content of card</p>
                    <p>content of card</p>
                    <p>content of card</p>
                </card>
            </i-col>
            <i-col span="5" offset="1">
                <p>不显示边框</p>
                <card :bordered="false">
                    <p slot="title">bordered</p>
                    <p>content of card</p>
                    <p>content of card</p>
                    <p>content of card</p>
                </card>
            </i-col>
            <i-col span="5" offset="1">
                <p>shadow显示卡片阴影</p>
                <card shadow>
                    <p slot="title">shadow</p>
                    <p>shadow存在时，dis-hover、bordered无效</p>
                </card>
            </i-col>
            <i-col span="5" offset="1">
                <p>禁用鼠标悬停显示阴影</p>
                <card dis-hover>
                    <p slot="title">dis-hover</p>
                    <p>content of card</p>
                    <p>content of card</p>
                    <p>content of card</p>
                </card>
            </i-col>
        </row>
    </div>
</template>
<script>
    export default {

    }
</script>

截图看的不明显，可以复制代码自行比较。

 

 

 

5、折叠面板（collapse）

　　详见：https://www.iviewui.com/components/collapse

（1）可以显示、隐藏内容

 

 

 （2）小案例分析

【app.vue】

<template>
    <div style="width: 800px;">
        <h3>一、v-model 绑定的是 当前索引值，指向选择的某个面板，与 panel 的 name 相对应</h3>
        <collapse v-model="value1">
            <panel name="1">
                java
                <p slot="content">j a v a</p>
            </panel>
            <panel name="2">
                python
                <p slot="content">p y t h o n</p>
            </panel>
            <panel name="3">
                javascript
                <p slot="content">j a v a s c r i p t</p>
            </panel>
        </collapse>
        <br/>
        
        <h3>二、accordion 只允许展开一个面板,面板可以嵌套</h3>
        <collapse v-model="value2" accordion>
            <panel name="1">
                java
                <p slot="content">j a v a</p>
            </panel>
            <panel name="2">
                python
                <p slot="content">p y t h o n</p>
            </panel>
            <panel name="3">
                javascript
                <collapse slot="content" v-model="value3">
                    <panel name="1">
                        vue
                        <p slot="content">v u e</p>
                    </panel>
                    <panel name="2">
                        jquery
                        <p slot="content">j q u e r y</p>
                    </panel>
                    <panel name="3">
                        react
                        <p slot="content">r e a c t</p>
                    </panel>
                </collapse>
            </panel>
        </collapse>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                value1: '2',
                value2: '1',
                value3: '3'
            }
        }
    }
</script>

 

 

 

6、面板切割、拖动效果（split）

　　详见：https://www.iviewui.com/components/split

（1）可将一片区域，分割为可以拖拽调整宽度或高度的两部分区域。

 

 

 

（2）小案例分析：

【app.vue】

<template>
    <div style="width: 800px; background-color:#bbbbcc">
        <h3>一、左右分割</h3>
        <div class="demo-split">
            <split v-model="split1">
                <div slot="left" class="demo-split-pane">
                    left pane
                </div>
                <div slot="right" class="demo-split-pane">
                    right pane
                </div>
            </split>
        </div>
        <br>

        <h3>二、上下分割</h3>
        <div class="demo-split">
            <split v-model="split2" mode="vertical">
                <div slot="top" class="demo-split-pane">
                    top pane
                </div>
                <div slot="bottom" class="demo-split-pane">
                    bottom pane
                </div>
            </split>
        </div>
        <br>

        <h3>三、组合分割</h3>
        <div class="demo-split">
            <split v-model="split3">
                <div slot="left" class="demo-split-pane">
                    left pane
                    <div class="demo-split2">
                        <split v-model="split4" mode="vertical">
                            <div slot="top" class="demo-split-pane">
                                top pane
                            </div>
                            <div slot="bottom" class="demo-split-pane">
                                bottom pane
                            </div>
                        </split>
                    </div>
                </div>
                <div slot="right" class="demo-split-pane">
                    right pane
                </div>
            </split>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                split1: 0.5,
                split2: 0.3,
                split3: 0.7,
                split4: 0.4
            }
        },
    }
</script>
<style>
    .demo-split {
        height: 250px;
        border: 1px solid #dcdee2;
    }
    
    .demo-split2 {
        height: 200px;
        border: 1px solid #dcdee2;
    }

    .demo-split-pane {
        padding: 10px;
    }
</style>

 

 

7、分割线（divider）

　　详见：https://www.iviewui.com/components/divider

（1）区分内容的分割线。

 

 

 （2）小案例分析：

【app.vue】

<template>
    <div style="width: 800px; background-color: #bbbbcc;">
        <h3>一、type="vertical" 用于设置垂直分割线</h3>
        text
        <divider type="vertical" />
        <a href="#">link</a>
        <divider type="vertical" />
        <a href="#">link</a>
        <br><br><br>

        <h3>二、默认水平分割，orientation 可以设置分割标题的位置，dashed 可以设置分割线是否为虚线</h3>
        <div>
            <divider orientation="left">java</divider>
            <p>system.out.println("hello world")</p>
            <divider orientation="right">javascript</divider>
            <p>console.log("hello world")</p>
            <divider orientation="center" dashed>php</divider>
            <p>echo("hello world")</p>
        </div>
    </div>
</template>
<script>
    export default {

    }
</script>

 

 

 

8、单元格（cell）

　　详见：https://www.iviewui.com/components/cell

（1）常用于菜单列表

 

 

 （2）小案例分析

【app.vue】
<template>
    <div style="padding: 10px;background: #f8f8f9">
        <h3>title 只展示标题，label 展示内容， extra 在右侧展示内容， to用于跳转链接（默认图标）</h3>
        <card title="options" icon="ios-options" :padding="0" shadow style="width: 300px;">
            <cellgroup>
                <cell title="only show titles" />
                <cell title="display label content" label="label content" />
                <cell title="display right content" extra="details" />
                <cell title="link" extra="details" to="https://www.baidu.com" />
                <cell title="open link in new window" to="https://www.baidu.com" target="_blank" />
                <cell title="disabled" disabled />
                <cell title="selected" selected />
                <cell title="with badge" to="https://www.baidu.com">
                    <badge :count="10" slot="extra" />
                </cell>
                <cell title="with switch">
                    <switch v-model="switchvalue" slot="extra" />
                </cell>
            </cellgroup>
        </card>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                switchvalue: true
            }
        },
    }
</script>

 

 

 

四、组件 -- 导航

1、导航菜单（menu）

　　详见：https://www.iviewui.com/components/menu

（1）为页面和功能提供导航的菜单列表，常用于网站顶部和左侧。

 

 

 

 

 

 

（2）小案例分析：

【app.vue】

<template>
    <div style="width: 800px;background: #f8f8f9">
        <h3>一、通过 theme 属性可以设置菜单主题（primary只对水平菜单栏生效）， mode="horizontal" 为水平菜单(默认为垂直菜单)</h3>
        <menu mode="horizontal" :theme="theme1" active-name="2">
            <menuitem name="1">
            <icon type="ios-paper" />
            java
            </menuitem>
            <menuitem name="2">
            <icon type="ios-people" />
            javascript
            </menuitem>
            <menuitem name="3">
            <icon type="ios-construct" />
            python
            </menuitem>
        </menu>
        <br>
        <p>change theme</p>
        <radiogroup v-model="theme1">
            <radio label="light"></radio>
            <radio label="dark"></radio>
            <radio label="primary"></radio>
        </radiogroup>
        <br><br>

        <i-col span="8">
            <h3>二、使用 submenu 可以定义二级菜单（可以嵌套），active-name 可以设置选中哪个 menuitem， 使用 open-names 可以选择展开哪几个submenu</h3>
            <menu :theme="theme1" active-name="1-2" open-names="['1', '2']">
                <submenu name="1">
                    <template slot="title">
                        <icon type="ios-paper" />
                        内容管理
                    </template>
                    <menuitem name="1-1">文章管理</menuitem>
                    <menuitem name="1-2">评论管理</menuitem>
                    <menuitem name="1-3">举报管理</menuitem>
                </submenu>
                <submenu name="2">
                    <template slot="title">
                        <icon type="ios-people" />
                        用户管理
                    </template>
                    <menuitem name="2-1">新增用户</menuitem>
                    <menuitem name="2-2">活跃用户</menuitem>
                    <submenu name="3">
                        <template slot="title">
                            <icon type="ios-people" />
                            用户管理
                        </template>
                        <menuitem name="2-1">新增用户</menuitem>
                        <menuitem name="2-2">活跃用户</menuitem>
                    </submenu>
                </submenu>
                <submenu name="4">
                    <template slot="title">
                        <icon type="ios-stats" />
                        统计分析
                    </template>
                    <menugroup title="使用">
                        <menuitem name="3-1">新增和启动</menuitem>
                        <menuitem name="3-2">活跃分析</menuitem>
                        <menuitem name="3-3">时段分析</menuitem>
                    </menugroup>
                    <menugroup title="留存">
                        <menuitem name="3-4">用户留存</menuitem>
                        <menuitem name="3-5">流失用户</menuitem>
                    </menugroup>
                </submenu>
            </menu>
        </i-col>
        
        <i-col span="8" offset="2">
            <h3>三、使用 accordion 则每次只展开一个菜单， 使用 menugroup 可以进行菜单分组</h3>
            <menu :theme="theme1" active-name="1-1" open-names="['1']" accordion>
                <submenu name="1">
                    <template slot="title">
                        <icon type="ios-paper" />
                        内容管理
                    </template>
                    <menuitem name="1-1">文章管理</menuitem>
                    <menuitem name="1-2">评论管理</menuitem>
                    <menuitem name="1-3">举报管理</menuitem>
                </submenu>
                <submenu name="2">
                    <template slot="title">
                        <icon type="ios-people" />
                        用户管理
                    </template>
                    <menuitem name="2-1">新增用户</menuitem>
                    <menuitem name="2-2">活跃用户</menuitem>
                </submenu>
                <submenu name="3">
                    <template slot="title">
                        <icon type="ios-stats" />
                        统计分析
                    </template>
                    <menugroup title="使用">
                        <menuitem name="3-1">新增和启动</menuitem>
                        <menuitem name="3-2">活跃分析</menuitem>
                        <menuitem name="3-3">时段分析</menuitem>
                    </menugroup>
                    <menugroup title="留存">
                        <menuitem name="3-4">用户留存</menuitem>
                        <menuitem name="3-5">流失用户</menuitem>
                    </menugroup>
                </submenu>
            </menu>
        </i-col>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                theme1: 'light'
            }
        }
    }
</script>

 

 

 

 

2、标签页（tabs）

　　详见：https://www.iviewui.com/components/tabs

（1）选项卡切换组件，常用于平级区域大块内容的的收纳和展现。

 

 

 

 

 

 

（2）小案例分析：

【app.vue】

<template>
    <div style="width: 800px; background-color:#f5f5ff">
        <h3>一、使用label 可以定义标签内容，使用icon可以定义标签图标，使用 value 可以选中某个标签（与标签的name属性绑定，默认为选中第一个）</h3>
        <tabs value="name2">
            <tabpane label="macos" icon="logo-apple" name="name1">macos</tabpane>
            <tabpane label="windows" icon="logo-windows" name="name2">windows</tabpane>
            <tabpane label="linux" icon="logo-tux" name="name3">linux</tabpane>
        </tabs>
        <br><br>

        <h3>二、使用 disabled 可以禁用某个标签，使用 size 可以设置标签显示大小（只在 type="line"时生效）</h3>
        <tabs value="name2" size="small">
            <tabpane label="macos" icon="logo-apple" name="name1">macos</tabpane>
            <tabpane label="windows" icon="logo-windows" name="name2">windows</tabpane>
            <tabpane label="linux" icon="logo-tux" name="name3" disabled>linux</tabpane>
        </tabs>
        <br><br>

        <h3>三、type="card" 将标签显示为卡片样式， 通过 closable 、@on-tab-remove 可以进行删除标签的操作（注意若标签 存在 name 属性时，此时删除后，可能存在数据未清空的情况）</h3>
        <tabs type="card" closable @on-tab-remove="handletabremove">
            <tabpane label="macos" icon="logo-apple" v-if="tab0">macos</tabpane>
            <tabpane label="windows" icon="logo-windows" v-if="tab1">windows</tabpane>
            <tabpane label="linux" icon="logo-tux" name="name3" v-if="tab2">linux</tabpane>
        </tabs>
        <br><br>

        <h3>四、使用 slot="extra" 可以在标签右侧自定义内容, :animated 可以设置标签切换时是否有动画效果</h3>
        <tabs :animated="false">
            <tabpane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</tabpane>
            <button @click="handletabsadd" size="small" slot="extra">增加</button>
        </tabs>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                tab0: true,
                tab1: true,
                tab2: true,
                tabs: 2
            }
        },
        methods: {
            handletabremove(name) {
                this['tab' + name] = false;
            },
            handletabsadd() {
                this.tabs++;
            }

        }
    }
</script>

 

 

3、下拉菜单（dropdown）

　　详见：https://www.iviewui.com/components/dropdown

（1）展示一组折叠的下拉菜单。用起来类似于 折叠面板（collapse）

 

 

 

 

 

 （2）小案例分析：

【app.vue】

<template>
    <div style="width: 800px; background-color:#f5f5ff">
        <h3>一、下拉菜单基本使用，需 dropdownmenu、dropdownitem、 slot="list"结合。disabled 可以禁用某个菜单，divided 显示分割线</h3>
        <dropdown style="margin-left: 20px">
            <button type="primary">
                鼠标悬浮打开
                <icon type="ios-arrow-down"></icon>
            </button>
            <dropdownmenu slot="list">
                <dropdownitem>java</dropdownitem>
                <dropdownitem>c++</dropdownitem>
                <dropdownitem disabled>python</dropdownitem>
                <dropdownitem>c</dropdownitem>
                <dropdownitem divided>javascript</dropdownitem>
            </dropdownmenu>
        </dropdown>

        <h3>二、使用 trigger 可以自定义展开方式（hover(默认，鼠标悬浮展开菜单)，click 鼠标左键点击展开，contextmenu 鼠标右键展开，custom 自定义展开效果）</h3>
        <i-col span="4">
            <dropdown trigger="click" style="margin-left: 20px">
                <button type="primary">
                    鼠标左键点击打开
                    <icon type="ios-arrow-down"></icon>
                </button>
                <dropdownmenu slot="list">
                    <dropdownitem>java</dropdownitem>
                    <dropdownitem>c++</dropdownitem>
                    <dropdownitem disabled>python</dropdownitem>
                    <dropdownitem>c</dropdownitem>
                    <dropdownitem divided>javascript</dropdownitem>
                </dropdownmenu>
            </dropdown>
        </i-col>
        <i-col span="4" offset="2">
            <dropdown trigger="contextmenu" style="margin-left: 20px">
                <button type="primary">
                    鼠标右键点击打开
                    <icon type="ios-arrow-down"></icon>
                </button>
                <dropdownmenu slot="list">
                    <dropdownitem>java</dropdownitem>
                    <dropdownitem>c++</dropdownitem>
                    <dropdownitem disabled>python</dropdownitem>
                    <dropdownitem>c</dropdownitem>
                    <dropdownitem divided>javascript</dropdownitem>
                </dropdownmenu>
            </dropdown>
        </i-col>
        <i-col span="4" offset="2">
            <dropdown trigger="custom" :visible="visible" style="margin-left: 20px">
                <button type="primary" @click="visible = !visible">
                    自定义事件展开
                    <icon type="ios-arrow-down"></icon>
                </button>
                <dropdownmenu slot="list">
                    <dropdownitem>java</dropdownitem>
                    <dropdownitem>c++</dropdownitem>
                    <dropdownitem disabled>python</dropdownitem>
                    <dropdownitem>c</dropdownitem>
                    <dropdownitem divided>javascript</dropdownitem>
                </dropdownmenu>
            </dropdown>
        </i-col>
        <br><br>

        <h3>三、下拉菜单可以嵌套，使用 placement 可以设置菜单展开的方向</h3>
        <dropdown style="margin-left: 20px">
            <button type="primary">
                下拉菜单嵌套
                <icon type="ios-arrow-down"></icon>
            </button>
            <dropdownmenu slot="list">
                <dropdownitem>java</dropdownitem>
                <dropdownitem>c++</dropdownitem>
                <dropdownitem disabled>python</dropdownitem>
                <dropdownitem>c</dropdownitem>
                <dropdown style="margin-left: 20px" placement="right-start">
                    <button type="primary">
                        设置菜单展开方向
                        <icon type="ios-arrow-forward"></icon>
                    </button>
                    <dropdownmenu slot="list">
                        <dropdownitem>java</dropdownitem>
                        <dropdownitem>c++</dropdownitem>
                        <dropdownitem disabled>python</dropdownitem>
                        <dropdownitem>c</dropdownitem>
                        <dropdownitem divided>javascript</dropdownitem>
                    </dropdownmenu>
                </dropdown>
                <dropdownitem divided>javascript</dropdownitem>
            </dropdownmenu>
        </dropdown>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                visible: false
            }
        }
    }
</script>

 

 

 

4、分页（page）

　　详见：https://www.iviewui.com/components/page

（1）当数据量较多时，使用分页可以快速进行数据切换。

 

 

 

 

 

 （2）小案例分析：

【app.vue】

<template>
    <div style="width: 800px;">
        <h3>一、total 定义数据的总数，(page-size默认为10，即页面上10条数据为1页)</h3>
        <page :total="100" />
        <br>
        
        <h3>二、show-sizer 可用于切换每页显示的数量, 可以使用 @on-page-size-change 去返回切换后的值</h3>
        <page :total="100" show-sizer @on-page-size-change="showpagesize"/>
        <br>
        
        <h3>三、show-elevator  可用于跳转到某一页, 可以使用 @on-change 去返回切换后的页码</h3>
        <page :total="100" show-sizer show-elevator @on-change="showpage"/>
        <br>
        
        <h3>四、show-total 可用于显示总条数, size 用于设置分页的大小</h3>
        <page :total="100" show-sizer show-elevator show-total size="small"/>
        <br>
        
        <h3>五、prev-text、next-text可用于替代两边的图标</h3>
        <page :total="100" show-sizer show-elevator show-total prev-text="previous" next-text="next"/>
        <br>
    </div>
</template>
<script>
    export default {
        methods: {
            showpagesize (index) {
                alert(index)
            },
            showpage (index) {
                alert(index)
            }
        }
    }
</script>

 

 

 

5、面包屑（breadcrumb ）

　　详见：https://www.iviewui.com/components/breadcrumb

（1）显示网站的层级结构，告知用户当前所在位置，以及在需要向上级导航时使用。

 

 

（2）小案例分析：

【app.vue】

<template>
    <div style="width: 800px; background-color:#f8f8ff">
        <h3>一、默认以 '/' 分割</h3>
        <breadcrumb>
            <breadcrumbitem to="https://www.baidu.com">home</breadcrumbitem>
            <breadcrumbitem to="https://www.baidu.com">components</breadcrumbitem>
            <breadcrumbitem>breadcrumb</breadcrumbitem>
        </breadcrumb>
        <br>
        
        <h3>二、自定义分割线</h3>
        <breadcrumb separator=">">
            <breadcrumbitem to="https://www.baidu.com">home</breadcrumbitem>
            <breadcrumbitem to="https://www.baidu.com">components</breadcrumbitem>
            <breadcrumbitem>breadcrumb</breadcrumbitem>
        </breadcrumb>
        <breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
            <breadcrumbitem to="https://www.baidu.com">home</breadcrumbitem>
            <breadcrumbitem to="https://www.baidu.com">components</breadcrumbitem>
            <breadcrumbitem>breadcrumb</breadcrumbitem>
        </breadcrumb>
    </div>
</template>
<script>
    export default {

    }
</script>
<style>
    .demo-breadcrumb-separator {
        color: #ff5500;
        padding: 0 5px;
    }
</style>

 

 

6、步骤条（steps）

　　详见：https://www.iviewui.com/components/steps

（1）拆分某项流程的步骤，引导用户按流程完成任务。

 

 

（2）小案例分析

【app.vue】

<template>
    <div style="width: 800px; background-color:#f8f8ff">
        <h3>一、根据current 自动判断各个步骤的状态(从 0 开始计数)</h3>
        <steps :current="1">
            <step title="已完成" content="这里是该步骤的描述信息"></step>
            <step title="进行中" content="这里是该步骤的描述信息"></step>
            <step title="待进行" content="这里是该步骤的描述信息"></step>
            <step title="待进行" content="这里是该步骤的描述信息"></step>
        </steps>
        <br>

        <h3>二、size 可以设置大小</h3>
        <steps :current="2" size="small">
            <step title="已完成"></step>
            <step title="已完成"></step>
            <step title="待进行"></step>
            <step title="待进行"></step>
        </steps>
        <br>

        <h3>三、icon 可以设置图标， status 可以设置执行某步骤的状态（wait、process、finish、error）</h3>
        <steps :current="1" status="error">
            <step title="注册" icon="ios-person"></step>
            <step title="上传头像" icon="ios-camera"></step>
            <step title="验证邮箱" icon="ios-mail"></step>
        </steps>
        <br>

        <h4>四、direction 可以设置为垂直的步骤条</h4>
        <p>当前正在进行第 {{ current + 1 }} 步</p>
        <steps :current="current" direction="vertical">
            <step title="步骤1"></step>
            <step title="步骤2"></step>
            <step title="步骤3"></step>
            <step title="步骤4"></step>
        </steps>
        <button type="primary" @click="next">next step</button>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                current: 0
            }
        },
        methods: {
            next () {
                if (this.current === 3) {
                    this.current = 0
                } else {
                    this.current++
                }
            }
        }
    }
</script>
<style>
    .demo-badge {
        width: 42px;
        height: 42px;
        background: #eee;
        border-radius: 6px;
        display: inline-block;
    }
</style>

 

 

五、表单

1、输入框（input）

　　详见：https://www.iviewui.com/components/input

（1）基本表单组件，支持 input 和 textarea，并在原生控件基础上进行了功能扩展，可以组合使用。

 

 

 

 

（2）小案例分析

【app.vue】

<template>
    <div style="width: 800px; background-color:#f8f8ff">
        <h3>一、可以使用 v-model 实现双向绑定， placeholder 可以定义提示内容， size 可以设置输入框大小</h3>
        <input v-model="value" placeholder="enter something..." style="width: 300px" size="large" />
        <input v-model="value" placeholder="enter something..." />
        <input v-model="value" placeholder="enter something..." style="width: 300px" size="small" />
        <br><br>

        <h3>二、使用 clearable 可以在输入框中显示清除按钮(输入框有值时). maxlength、show-word-limit 可以用于提示限制字符输入（会影响clearable）</h3>
        <input v-model="value" placeholder="enter something..." clearable />
        <input v-model="value" maxlength="10" show-word-limit placeholder="enter something..." />
        <input v-model="value" maxlength="100" show-word-limit type="textarea" placeholder="enter something..." />
        <br><br>

        <h3>三、使用密码框(type="password" password 可以隐藏、显示密码).
            使用 icon 可以定义图标，点击图标可以触发 on-click 事件.
            使用 search 可以设置搜索框样式, 可以结合 enter-button 使搜索图标变成 按钮的形式</h3>
        <input v-model="value" placeholder="enter something..." type="password" password />
        <input v-model="value" @on-click="iconclick" icon="ios-clock-outline" placeholder="enter something..." style="width: 200px" />
        <input v-model="value" search placeholder="enter something..." style="width: 200px" />
        <input v-model="value" search enter-button placeholder="enter something..." style="width: 200px" />
        <input v-model="value" search enter-button="search" placeholder="enter something..." style="width: 200px" />
        <br><br>

        <h3>四、可以通过 prefix 和 suffix 设置图标位置，直接使用 或者 使用slot同名引用</h3>
        <div>
            props：
            <input prefix="ios-contact" placeholder="enter name" style="width: auto" />
            <input suffix="ios-search" placeholder="enter text" style="width: auto" />
        </div>
        <div style="margin-top: 6px">
            slots：
            <i-input placeholder="enter name" style="width: auto">
                <icon type="ios-contact" slot="prefix" />
            </i-input>
            <i-input placeholder="enter text" style="width: auto">
                <icon type="ios-search" slot="suffix" />
            </i-input>
        </div>
        <br><br>
        
        <h3>五、可以使用 slot 引用 prepend， append 来设置前后样式</h3>
        <div>
            <i-input v-model="value">
                <span slot="prepend">http://</span>
                <span slot="append">.com</span>
            </i-input>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                value: 'helloworld'
            }
        },
        methods: {
            iconclick() {
                alert("hello")
            }
        }
    }
</script>
<style>
    .demo-badge {
        width: 42px;
        height: 42px;
        background: #eee;
        border-radius: 6px;
        display: inline-block;
    }
</style>

 

 未完待续。。。

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网