一、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"> 【小案例：（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>
二、组件 -- 基础
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> <Button type="primary">Primary</Button> <Button type="dashed">Dashed</Button> <Button type="text">Text</Button> <Button type="info">Info</Button> <Button type="success">Success</Button> <Button type="warning">Warning</Button> <Button type="error">Error</Button> <br/><br/><br/> <p>通过 ghost 可以将背景色置为透明，通常用于有色背景上</p> <Button ghost>Default</Button> <Button type="primary" ghost>Primary</Button> <Button type="dashed" ghost>Dashed</Button> <Button type="text" ghost>Text</Button> <Button type="info" ghost>Info</Button> <Button type="success" ghost>Success</Button> <Button type="warning" ghost>Warning</Button> <Button type="error" ghost>Error</Button> <br/><br/><br/> <P>icon 可以设置图标、shape 可以设置按钮的图形,在 Button 内部使用 Icon 可以自定义图标的位置</P> <Button type="primary" shape="circle" icon="ios-search"></Button> <Button type="primary" icon="ios-search">Search</Button> <Button type="primary" shape="circle"> Search <Icon type="ios-search"></Icon> </Button> <Button type="primary">Circle</Button> <br/><br/><br/> <p>size 可以用来设置尺寸，large、default、small</p> <Button type="success">Success</Button> <Button type="success" size="large">success</Button> <Button type="success" size="default">success</Button> <Button type="success" size="small">success</Button> <br/><br/><br/> <p>long 可以用来填充宽度，宽度100%</p> <Button type="success" size="large" long>success</Button> <Button type="success" size="large" long style="width: 600px;">success</Button> <br/><br/><br/> <p>loading 可以使按钮处于加载中的样式。disabled 使按钮不可用</p> <Button type="success" loading>success</Button> <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> <Button type="success">success</Button> </ButtonGroup> <ButtonGroup shape="circle" size="small" vertical> <Button type="success">success</Button> <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> <Button to="https://www.baidu.com" replace>No history</Button> <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>