欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

VueUI -- iView4.0简单使用

程序员文章站 2023-02-05 21:53:47
一、iView（View UI） 1、简介 官网：https://www.iviewui.com/ 仓库：https://github.com/view-design/ViewUI iView 与 View UI 本质上是一个东西，随着版本的升级，iView （4.0）改名为 View UI。是一套 ......

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

VueUI -- iView4.0简单使用

 

 

 VueUI -- iView4.0简单使用

 

 

 

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


【小案例：（index.html）】
<!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>

VueUI -- iView4.0简单使用

 

 

 VueUI -- iView4.0简单使用

 

 

 

二、组件 -- 基础

1、颜色（color）

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

VueUI -- iView4.0简单使用

 

 

 

2、字体（font）

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

VueUI -- iView4.0简单使用

 

 

3、按钮（button）

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

VueUI -- iView4.0简单使用

 

 

 

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

VueUI -- iView4.0简单使用

 

 

 

4、图标（icon）

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

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

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

VueUI -- iView4.0简单使用

 

 

 

三、组件 -- 布局

1、栅格系統（grid）

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

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

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

VueUI -- iView4.0简单使用

 

 

 

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

VueUI -- iView4.0简单使用

 

 

 

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>

VueUI -- iView4.0简单使用

 

 

 

3、列表（list）

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

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

VueUI -- iView4.0简单使用

 

 

 VueUI -- iView4.0简单使用

 

 

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

VueUI -- iView4.0简单使用

 

 

 

4、卡片（card）

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

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

VueUI -- iView4.0简单使用

 

 

 

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

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

VueUI -- iView4.0简单使用

 

 

 

5、折叠面板（collapse）

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

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

VueUI -- iView4.0简单使用

 

 

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

VueUI -- iView4.0简单使用

 

 

 

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

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

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

VueUI -- iView4.0简单使用

 

 

 

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

VueUI -- iView4.0简单使用

 

 

7、分割线（divider）

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

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

VueUI -- iView4.0简单使用

 

 

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

VueUI -- iView4.0简单使用

 

 

 

8、单元格（cell）

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

（1）常用于菜单列表

VueUI -- iView4.0简单使用

 

 

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

VueUI -- iView4.0简单使用

 

 

 

四、组件 -- 导航

1、导航菜单（menu）

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

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

VueUI -- iView4.0简单使用

 

 

 VueUI -- iView4.0简单使用

 

 

 

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

 

VueUI -- iView4.0简单使用

 

 

 

2、标签页（tabs）

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

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

VueUI -- iView4.0简单使用

 

 

 VueUI -- iView4.0简单使用

 

 

 

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

VueUI -- iView4.0简单使用

 

 

3、下拉菜单（dropdown）

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

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

VueUI -- iView4.0简单使用

 

 

 VueUI -- iView4.0简单使用

 

 

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

VueUI -- iView4.0简单使用

 

 

 

4、分页（page）

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

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

VueUI -- iView4.0简单使用

 

 

 VueUI -- iView4.0简单使用

 

 

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

VueUI -- iView4.0简单使用

 

 

 

5、面包屑（breadcrumb ）

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

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

VueUI -- iView4.0简单使用

 

 

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

VueUI -- iView4.0简单使用

 

 

6、步骤条（steps）

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

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

VueUI -- iView4.0简单使用

 

 

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

VueUI -- iView4.0简单使用

 

 

五、表单

1、输入框（input）

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

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

VueUI -- iView4.0简单使用

 

 VueUI -- iView4.0简单使用

 

 

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

VueUI -- iView4.0简单使用

 

 未完待续。。。

 

上一篇： 卢伟冰官宣：红米K30全球首发高通骁龙765G处理器

下一篇： 小米10官宣！全球首发骁龙865

推荐阅读