VueUI -- iView4.0简单使用
一、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>
未完待续。。。