VueUI -- iView4.0簡單使用
1、iView（View UI）
一、簡介
官網：https://www.iviewui.com/
倉庫：https://github.com/view-design/ViewUI
iView 與 View UI 本質上是一個東西，隨着版本的升級，iView （4.0）更名爲 View UI。是一套基於Vue.js 的開源 UI 組件庫。javascript
二、安裝、使用
（1）使用 npm 安裝（項目中如何使用，命令行運行）css
npm install view-design --save
使用 vue-cli3.0 建立項目，能夠參考：https://www.cnblogs.com/l-y-h/p/11241503.html。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 中使用，直接運行）vue
【使用 <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>
2、組件 -- 基礎
一、顏色（Color）
詳見： https://www.iviewui.com/components/colorjava
二、字體（Font）
詳見：https://www.iviewui.com/components/fontnode
三、按鈕（Button）
詳見：https://www.iviewui.com/components/buttonios
【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>
四、圖標（Icon）
詳見：https://www.iviewui.com/components/icongit
【渲染前：】 <Icon type="ios-search" /> 【渲染後：】 <i class="ivu-icon ivu-icon-ios-search"></i>
3、組件 -- 佈局
一、柵格系統（Grid）
詳見：https://www.iviewui.com/components/gridgithub
（1）使用柵格系統進行網頁佈局，可使頁面排版更加美觀、溫馨。vue-router
（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>
二、佈局（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>
三、列表（List）
詳見：https://www.iviewui.com/components/list
（1）基礎的列表展現，可承載文字、列表、圖片、段落，經常使用於後臺數據展現頁面。
（2）小案例分析
【App.vue】 <template> <div style="width: 900px;"> <h3>1、使用 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>2、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>3、使用 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>
四、卡片（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>
截圖看的不明顯，能夠複製代碼自行比較。
五、摺疊面板（Collapse）
詳見：https://www.iviewui.com/components/collapse
（1）能夠顯示、隱藏內容
（2）小案例分析
【App.vue】 <template> <div style="width: 800px;"> <h3>1、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>2、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>
六、面板切割、拖動效果（Split）
詳見：https://www.iviewui.com/components/split
（1）可將一片區域，分割爲能夠拖拽調整寬度或高度的兩部分區域。
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px; background-color:#BBBBCC"> <h3>1、左右分割</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>2、上下分割</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>3、組合分割</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>
七、分割線（Divider）
詳見：https://www.iviewui.com/components/divider
（1）區份內容的分割線。
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px; background-color: #BBBBCC;"> <h3>1、type="vertical" 用於設置垂直分割線</h3> Text <Divider type="vertical" /> <a href="#">Link</a> <Divider type="vertical" /> <a href="#">Link</a> <br><br><br> <h3>2、默認水平分割，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>
八、單元格（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>
4、組件 -- 導航
一、導航菜單（Menu）
詳見：https://www.iviewui.com/components/menu
（1）爲頁面和功能提供導航的菜單列表，經常使用於網站頂部和左側。
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px;background: #f8f8f9"> <h3>1、經過 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>2、使用 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>3、使用 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>
二、標籤頁（Tabs）
詳見：https://www.iviewui.com/components/tabs
（1）選項卡切換組件，經常使用於平級區域大塊內容的的收納和展示。
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px; background-color:#F5F5FF"> <h3>1、使用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>2、使用 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>3、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>4、使用 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>
三、下拉菜單（Dropdown）
詳見：https://www.iviewui.com/components/dropdown
（1）展現一組摺疊的下拉菜單。用起來相似於 摺疊面板（Collapse）
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px; background-color:#F5F5FF"> <h3>1、下拉菜單基本使用，需 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>2、使用 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>3、下拉菜單能夠嵌套，使用 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>
四、分頁（Page）
詳見：https://www.iviewui.com/components/page
（1）當數據量較多時，使用分頁能夠快速進行數據切換。
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px;"> <h3>1、total 定義數據的總數，(page-size默認爲10，即頁面上10條數據爲1頁)</h3> <Page :total="100" /> <br> <h3>2、show-sizer 可用於切換每頁顯示的數量, 可使用 @on-page-size-change 去返回切換後的值</h3> <Page :total="100" show-sizer @on-page-size-change="showPageSize"/> <br> <h3>3、show-elevator 可用於跳轉到某一頁, 可使用 @on-change 去返回切換後的頁碼</h3> <Page :total="100" show-sizer show-elevator @on-change="showPage"/> <br> <h3>4、show-total 可用於顯示總條數, size 用於設置分頁的大小</h3> <Page :total="100" show-sizer show-elevator show-total size="small"/> <br> <h3>5、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>
五、麪包屑（Breadcrumb ）
詳見：https://www.iviewui.com/components/breadcrumb
（1）顯示網站的層級結構，告知用戶當前所在位置，以及在須要向上級導航時使用。
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px; background-color:#F8F8FF"> <h3>1、默認以 '/' 分割</h3> <Breadcrumb> <BreadcrumbItem to="https://www.baidu.com">Home</BreadcrumbItem> <BreadcrumbItem to="https://www.baidu.com">Components</BreadcrumbItem> <BreadcrumbItem>Breadcrumb</BreadcrumbItem> </Breadcrumb> <br> <h3>2、自定義分割線</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>
六、步驟條（Steps）
詳見：https://www.iviewui.com/components/steps
（1）拆分某項流程的步驟，引導用戶按流程完成任務。
（2）小案例分析
【App.vue】 <template> <div style="width: 800px; background-color:#F8F8FF"> <h3>1、根據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>2、size 能夠設置大小</h3> <Steps :current="2" size="small"> <Step title="已完成"></Step> <Step title="已完成"></Step> <Step title="待進行"></Step> <Step title="待進行"></Step> </Steps> <br> <h3>3、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>4、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>
5、表單
一、輸入框（Input）
詳見：https://www.iviewui.com/components/input
（1）基本表單組件，支持 input 和 textarea，並在原生控件基礎上進行了功能擴展，能夠組合使用。
（2）小案例分析
【App.vue】 <template> <div style="width: 800px; background-color:#F8F8FF"> <h3>1、可使用 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>2、使用 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>3、使用密碼框(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>4、能夠經過 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>5、可使用 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>
二、開關（Switch）
詳見：https://www.iviewui.com/components/switch
（1）在兩種狀態間切換時用到的開關選擇器。
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px;"> <h3>1、基本用法，狀態切換時會觸發事件（@on-change）。<br> 使用 v-model 雙向綁定數據。<br> 設置屬性 before-change 並返回 Promise，能夠阻止切換。<br> 使用 size 能夠設置開關的大小 <br> 使用 slot 能夠自定義文字 <br> 使用 disabled 能夠禁用某個開關 <br> 使用 loading 能夠出現加載中的樣式 <br> 使用 true-color 和 false-color 能夠設置開關樣式 <br> </h3> <i-switch v-model="switch1" @on-change="change" :before-change="handleBeforeChange"/> <br> <i-switch v-model="switch2" @on-change="change" size="small" /> <br> <i-switch @on-change="change" disabled/> <br> <i-switch v-model="switch3" @on-change="change" loading /> <br> <i-switch size="large" true-color="#13ce66" false-color="#ff4949"> <span slot="open">開啓</span> <span slot="close">關閉</span> </i-switch> </div> </template> <script> export default { data() { return { switch1: false, switch2: false, switch3: true } }, methods: { change(status) { this.$Message.info('開關狀態：' + status) }, handleBeforeChange() { return new Promise((resolve) => { this.$Modal.confirm({ title: '切換確認', content: '您確認要切換開關狀態嗎？', onOk: () => { resolve() } }) }) } } } </script>
三、表格（Table）
詳見：https://www.iviewui.com/components/table
（1）主要用於展現大量結構化數據。支持排序、篩選、分頁、自定義操做、導出 csv 等複雜功能。
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px;"> <h3>1、基本用法，columns 定義表格的列，data 定義表格每行數據。<br> stripe 定義斑馬紋（表格會間隔顯示不一樣顏色，用於區分不一樣行數據。<br> border 定義表格的邊框.<br> highlight-row 能夠選中某條數據，調用 clearCurrentRow 方法能夠清除選中的數據.<br> @on-current-change 能夠返回上一條與當前選擇的數據。<br> 在 column 中能夠定義一列，並定義 type="index"，用於自動生成序號。<br> 在 column 中能夠定義一列，並定義 type="selection"，用於自動生成多選框。經過 selectAll 能夠設置全選、取消全選<br> </h3> <Button @click="showIndex">顯示序列號</Button> <Button @click="showCheckBox">顯示多選框</Button> <Table :columns="column === true ? columns1 : columns2" :data="data1" stripe border highlight-row ref="currentRowTable" @on-current-change="changeData"></Table> <Button @click="handleClearCurrentRow">清除選中狀態</Button> <Button @click="handleSelectAll(true)">全選</Button> <Button @click="handleSelectAll(false)">取消全選</Button> <br><br> <h3>2、自定義模板 在 columns 的某列聲明 slot 後，就能夠在 Table 的 slot 中使用 slot-scope。 slot-scope 的參數有 3 個：當前行數據 row，當前列數據 column，當前行序號 index。 <br> 經過設置屬性 loading 可讓表格處於加載中狀態，在異步請求數據、分頁時建議使用。 </h3> <Table border :columns="columns3" :data="data1" :loading="loading"> <template slot-scope="{ row }" slot="name"> <strong>{{ row.name }}</strong> </template> <template slot-scope="{ row, index }" slot="action"> <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button> <Button type="error" size="small" @click="remove(index)">Delete</Button> </template> </Table> Change Loading Status <i-switch v-model="loading"></i-switch> </div> </template> <script> export default { data() { return { loading: false, column: true, columns1: [{ type: 'index', width: 80, align: 'center' }, { title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }, { title: 'Address', key: 'address' }, { title: 'Date', key: 'date' } ], columns2: [{ type: 'selection', width: 80, align: 'center' }, { title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }, { title: 'Address', key: 'address' }, { title: 'Date', key: 'date' } ], columns3: [{ type: 'index', width: 80, align: 'center' }, { title: 'Name', slot: 'name' }, { title: 'Age', key: 'age' }, { title: 'Address', key: 'address' }, { title: 'Date', key: 'date' }, { title: 'Action', slot: 'action', width: 150, align: 'center' } ], data1: [{ name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' }, { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' }, { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' }, { name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' } ] } }, methods: { handleClearCurrentRow() { this.column = false this.$refs.currentRowTable.clearCurrentRow(); }, handleSelectAll(status) { this.column = false this.$refs.currentRowTable.selectAll(status); }, changeData(currentRow, oldCurrentRow) { console.log(oldCurrentRow) console.log(currentRow) }, showIndex() { this.column = true }, showCheckBox() { this.column = false }, show(index) { this.$Modal.info({ title: 'User Info', content: `Name：${this.data1[index].name}<br>Age：${this.data1[index].age}<br>Address：${this.data1[index].address}` }) }, remove(index) { this.data1.splice(index, 1); } } } </script>
（3）表格實用小案例（表格 + 分頁）：
自定義模板、能夠分頁、分頁後索引值能夠跟着修改。
【App.vue】 <template> <div style="width: 1000px;"> <div style="margin: 10px"> Display border <i-switch v-model="showBorder" style="margin-right: 5px"></i-switch> Display stripe <i-switch v-model="showStripe" style="margin-right: 5px"></i-switch> Display index <i-switch v-model="showIndex" style="margin-right: 5px"></i-switch> Display multi choice <i-switch v-model="showCheckbox" style="margin-right: 5px"></i-switch> Display header <i-switch v-model="showHeader" style="margin-right: 5px"></i-switch> Table scrolling <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch> <br> <br> Table size <Radio-group v-model="tableSize" type="button"> <Radio label="large">large</Radio> <Radio label="default">medium(default)</Radio> <Radio label="small">small</Radio> </Radio-group> </div> <Table :data="data2" :columns="tableColumns1" :stripe="showStripe" :border="showBorder" :showHeader="showHeader" :size="tableSize" :height="fixedHeader ? 250 : ''"> <template slot-scope="{ row }" slot="name"> <strong>{{ row.name }}</strong> </template> <template slot-scope="{ row, index }" slot="action"> <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button> <Button type="error" size="small" @click="remove(index)">Delete</Button> </template> </Table> <div style="margin: 10px;overflow: hidden"> <div style="float: right;"> <!-- current 設置當前選中頁 --> <Page :total="data1.length" :current="currentPage" @on-change="changePage"></Page> </div> </div> </div> </template> <script> export default { data() { return { // 當前頁碼 currentPage: 1, // 每頁數據的條數 pageSize: 10, // 表格的列 tableColumns1: [{ // 分頁時，若要出現自動索引，設置type = "index2"，並使用 render 來返回索引值 type: 'index2', width: 80, align: 'center', render: (h, params) => { return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1); } },{ title: 'Name', slot: 'name' }, { title: 'Age', key: 'age', sortable: true }, { title: 'Address', key: 'address' }, { title: 'Date', key: 'date', sortable: true }, { title: 'Action', slot: 'action', width: 150, align: 'center' } ], // 表格的源數據 data1: [{ name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' }, { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' }, { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' }, { name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' }, { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' }, { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' }, { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' }, { name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' }, { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' }, { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' }, { name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' } ], // 表格每頁的數據 data2: [], // 表格邊框是否顯示 showBorder: false, // 表格斑馬紋是否顯示 showStripe: false, // 表格頭是否顯示 showHeader: true, // 表格索引是否顯示 showIndex: true, // 表格多選框是否顯示 showCheckbox: false, // 表格滾動條是否開啓 fixedHeader: false, // 改變表格大小 tableSize: 'default' } }, methods: { changePage(index) { // 改變當前的頁碼，並獲取當前頁碼所擁有的數據 this.currentPage = index this.data2 = this.data1.slice((index - 1) * this.pageSize, index * this.pageSize); }, show(index) { // 彈出一個模態框，用於展現某條數據的信息（``是ES6的模板字符串） this.$Modal.info({ title: 'User Info', content: `Name：${this.data2[index].name}<br>Age：${this.data2[index].age}<br>Address：${this.data2[index].address}` }) }, remove(index) { // 刪除某條數據（刪除源數據） this.data1.splice((this.currentPage-1) * 10 + index, 1) } }, watch: { showIndex(newVal) { if (newVal) { // 爲true時，在首部增長一個索引列 this.tableColumns1.unshift({ // 分頁時，若要出現自動索引，設置type = "index2"，並使用 render 來返回索引值 type: 'index2', width: 80, align: 'center', render: (h, params) => { return h('span', params.index + (this.currentPage - 1) * this.pageSize + 1); } }) } else { // 爲false時，若首部存在索引列，則移除該列 this.tableColumns1.forEach((item, index) => { if (item.type === 'index2') { this.tableColumns1.splice(index, 1) } }) } }, showCheckbox(newVal) { if (newVal) { // 爲 true 時，在首部增長一多選框列， this.tableColumns1.unshift({ type: 'selection', width: 60, align: 'center' }) } else { // 爲false時，若存在多選框列，則移除該列 this.tableColumns1.forEach((item, index) => { if (item.type === 'selection') { this.tableColumns1.splice(index, 1) } }) } }, data1() { // 當列表數據改變時（好比刪除某數據），觸發一次刷新列表的操做 this.changePage(this.currentPage) } }, mounted() { // 頁面加載時，觸發第一次刷新列表的操做 this.changePage(this.currentPage) } } </script>
6、視圖
一、警告提示（Alert）
詳見：https://www.iviewui.com/components/alert
（1）靜態地呈現一些警告信息，可手動關閉。
（2）小案例分析：
【App.vue】 <template> <div style="width: 600px;"> <h3>1、使用 type 能夠定義警告框的類型（默認爲 info）。<br> 使用 slot="desc" 能夠添加自定義內容。<br> 使用 show-icon 能夠顯示圖標（使用 slot="icon" 能夠自定義圖標）。<br> 使用 closable 能夠關閉警告框(可以使用 on-close 監控關閉事件) </h3> <Alert>An info prompt</Alert> <Alert type="info" closable @on-close="close">A default prompt</Alert> <Alert type="success">A success prompt</Alert> <Alert type="warning" show-icon>A warning prompt</Alert> <Alert type="warning" show-icon> <Icon type="ios-nuclear" slot="icon" /> A warning prompt</Alert> <Alert type="error"> An error prompt <span slot="desc"> <Icon type="md-information-circle" />Custom error description copywriting. </span> </Alert> </div> </template> <script> export default { methods: { close() { alert("Hello") } } } </script>
二、全局提示（Message）
詳見：https://www.iviewui.com/components/message
（1）輕量級的信息反饋組件，在頂部居中顯示，並自動消失。有多種不一樣的提示狀態可選擇。
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px;"> <h3>1、基本提示，默認在1.5秒後消失。能夠提示不一樣的狀態（不一樣顏色）。</h3> <Button @click="info">Display info prompt</Button> <Button @click="success">Display success prompt</Button> <Button @click="warning">Display warning prompt</Button> <Button @click="error">Display error prompt</Button> <br><br> <h3>2、能夠設置背景色(background).</h3> <Button @click="background('info')">顯示普通提示</Button> <Button @click="background('success')">顯示成功提示</Button> <Button @click="background('warning')">顯示警告提示</Button> <Button @click="background('error')">顯示錯誤提示</Button> <br><br> <h3>3、能夠設置加載中樣式，並定時取消（loading）。<br> 能夠設置關閉樣式，主動關閉（closable） </h3> <Button @click="loading">Display loading...</Button> <Button @click="closable">Display closable...</Button> </div> </template> <script> export default { methods: { info() { this.$Message.info('This is a info tip') }, success() { this.$Message.success('This is a success tip') }, warning() { this.$Message.warning('This is a warning tip') }, error() { this.$Message.error('This is an error tip') }, background(type) { this.$Message[type]({ background: true, content: 'This is a ' + type + ' tip' }) }, loading() { // 兩種延時關閉方法 // 第一種，使用定時器關閉（毫秒爲單位） // const msg = this.$Message.loading({ // content: 'Loading...', // duration: 0 // }) // setTimeout(msg, 1000) // 第二種，自定義關閉時間（秒爲單位） const msg = this.$Message.loading({ content: 'Loading...', duration: 1 }) }, closable() { this.$Message.info({ content: 'Tips for manual closing', duration: 10, closable: true }) } } } </script>
三、通知提醒（Notice）
詳見：https://www.iviewui.com/components/notice
（1）在界面右上角顯示可關閉的全局通知，經常使用於：系統主動推送、通知內容帶有描述信息。
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px;"> <h3>1、基本用法，默認在 4.5秒後關閉。若是 desc 參數爲空或不填，則自動應用僅標題模式下的樣式。</h3> <Button type="primary" @click="open(false)">Open notice</Button> <Button @click="open(true)">Open notice(only title)</Button> <h3>2、能夠設置不一樣的類型（帶圖標、不帶圖標）。可使用 duration 定時（爲0時則爲不定時）</h3> <Button @click="info(true)">Info</Button> <Button @click="success(true)">Success</Button> <Button @click="warning(true)">Warning</Button> <Button @click="error(true)">Error</Button> <Button type="primary" @click="time">Open notice</Button> </div> </template> <script> export default { methods: { open(nodesc) { this.$Notice.open({ title: 'Notification title', desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. ' }) }, info(nodesc) { this.$Notice.info({ title: 'Notification title', desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. ' }) }, success(nodesc) { this.$Notice.success({ title: 'Notification title', desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. ' }) }, warning(nodesc) { this.$Notice.warning({ title: 'Notification title', desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. ' }) }, error(nodesc) { this.$Notice.error({ title: 'Notification title', desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. ' }) }, time() { this.$Notice.open({ title: 'Notification title', desc: 'This notification does not automatically close, and you need to click the close button to close.', duration: 1 }) } } } </script>
四、抽屜（Drawer）
詳見：https://www.iviewui.com/components/drawer
（1）抽屜從父窗體邊緣滑入，覆蓋住部分父窗體內容。用戶在抽屜內操做時沒必要離開當前任務，操做完成後，能夠平滑地回到到原任務。
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px;"> <h3>1、基礎抽屜，點擊觸發按鈕抽屜從右滑出，點擊遮罩區關閉（mask-closable 爲false時，點擊遮罩區不可關閉）。</h3> <Button @click="value1 = true" type="primary">Basic Drawer From Right</Button> <Drawer title="Basic Drawer From Right" :closable="true" :mask-closable="false" v-model="value1"> <p>Some contents...</p> <p>Some contents...</p> <p>Some contents...</p> </Drawer> <br><br> <h3>2、使用 placement 能夠設置抽屜出現的位置。當 closable = true 時，能夠在右上角顯示關閉按鈕. <br> mask 爲 false 時，不顯示遮罩層. </h3> <Button @click="value2 = true" type="primary">Basic Drawer From Left</Button> <Drawer title="Basic Drawer From Left" placement="left" :closable="true" :mask="false" v-model="value2"> <p>Some contents...</p> <p>Some contents...</p> <p>Some contents...</p> </Drawer> </div> </template> <script> export default { data() { return { value1: false, value2: false } } } </script>
五、對話框（Modal）
詳見：https://www.iviewui.com/components/modal
（1）模態對話框，在浮層中顯示，引導用戶進行相關操做。
（2）小案例分析
【App.vue】 <template> <div style="width: 800px;"> <h3>1、基本用法。使用 v-model 能夠雙向綁定。on-ok、on-cancel 能夠監聽肯定與關閉事件。按ESC至關於觸發 on-cancel事件</h3> <Button type="primary" @click="modal1 = true">Display dialog box</Button> <Modal v-model="modal1" title="Common Modal dialog box title" @on-ok="ok" @on-cancel="cancel"> <p>Content of dialog</p> <p>Content of dialog</p> <p>Content of dialog</p> </Modal> <br><br> <h3>2、添加 loading 樣式（:loading="true"）。 使用 closable = "false" 能夠禁用右上角關閉按鈕。<br> 使用 :mask-closable="false" 能夠禁用 點擊遮罩層關閉<br> 使用 draggable 可使對話框拖動，此時會主動關閉遮罩層</h3> <Button type="primary" @click="modal2 = true">Display dialog box</Button> <Modal v-model="modal2" title="Title" :loading="loading" :closable="false" draggable :mask-closable="false" @on-ok="asyncOK"> <p>After you click ok, the dialog box will close in 2 seconds.</p> </Modal> <br><br> <h3>3、能夠直接調用封裝好的實例方法</h3> <Button @click="instance('info')">Info</Button> <Button @click="instance('success')">Success</Button> <Button @click="instance('warning')">Warning</Button> <Button @click="instance('error')">Error</Button> <Button @click="instance('confirm')">Confirm</Button> </div> </template> <script> export default { data() { return { modal1: false, modal2: false, loading: true } }, methods: { ok() { this.$Message.info('Clicked ok'); }, cancel() { this.$Message.info('Clicked cancel'); }, asyncOK() { setTimeout(() => { this.modal2 = false; }, 2000); }, instance(type) { const title = 'Title'; const content = '<p>Content of dialog</p><p>Content of dialog</p>'; switch (type) { case 'info': this.$Modal.info({ title: title, content: content }) break case 'success': this.$Modal.success({ title: title, content: content }) break case 'warning': this.$Modal.warning({ title: title, content: content }) break case 'error': this.$Modal.error({ title: title, content: content }) break case 'confirm': this.$Modal.confirm({ title: 'Title', content: '<p>Content of dialog</p><p>Content of dialog</p>', onOk: () => { this.$Message.info('Clicked ok') }, onCancel: () => { this.$Message.info('Clicked cancel') }, okText: 'OK', cancelText: 'Cancel' }) } } } } </script>
未完待續。。。
相關文章
- 1. vue的安裝及vueui的使用
- 2. 簡單使用
- 3. Mockito-簡單使用使用
- 4. bootstrap4簡單使用和入門01-簡單表單的使用
- 5. vscode 使用簡單簡紹
- 6. Spring簡單使用簡介
- 7. Coredata 單表簡單使用
- 8. 基於VueUI框架對比 element VS iview
- 9. Kafka簡單使用
- 10. git簡單使用
- 更多相關文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • Docker 容器使用 - Docker教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • Composer 安裝與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue的安裝及vueui的使用
- 2. 簡單使用
- 3. Mockito-簡單使用使用
- 4. bootstrap4簡單使用和入門01-簡單表單的使用
- 5. vscode 使用簡單簡紹
- 6. Spring簡單使用簡介
- 7. Coredata 單表簡單使用
- 8. 基於VueUI框架對比 element VS iview
- 9. Kafka簡單使用
- 10. git簡單使用