一、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 ></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 > <Layout> <Header> <Menu mode="horizontal" theme="dark" active-name="1"> <div ></div> <div > <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 > <Split v-model="split1"> <div slot="left" > Left Pane </div> <div slot="right" > Right Pane </div> </Split> </div> <br> <h3>二、上下分割</h3> <div > <Split v-model="split2" mode="vertical"> <div slot="top" > Top Pane </div> <div slot="bottom" > Bottom Pane </div> </Split> </div> <br> <h3>三、組合分割</h3> <div > <Split v-model="split3"> <div slot="left" > Left Pane <div > <Split v-model="split4" mode="vertical"> <div slot="top" > Top Pane </div> <div slot="bottom" > Bottom Pane </div> </Split> </div> </div> <div slot="right" > 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="https://www.cnblogs.com/l-y-h/p/#">Link</a> <Divider type="vertical" /> <a href="https://www.cnblogs.com/l-y-h/p/#">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="https://www.cnblogs.com/l-y-h/p/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="https://www.cnblogs.com/l-y-h/p/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>
2、開關（Switch）
詳見：https://www.iviewui.com/components/switch
（1）在兩種狀態間切換時用到的開關選擇器，
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px;"> <h3>一、基本用法，狀態切換時會觸發事件（@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>
3、表格（Table）
詳見：https://www.iviewui.com/components/table
（1）主要用于展示大量結構化資料，支持排序、篩選、分頁、自定義操作、匯出 csv 等復雜功能，
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px;"> <h3>一、基本用法，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="https://www.cnblogs.com/l-y-h/p/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>二、自定義模板 在 columns 的某列宣告 slot 后，就可以在 Table 的 slot 中使用 slot-scope， slot-scope 的引數有 3 個：當前行資料 row，當前列資料 column，當前行序號 index， <br> 通過設定屬性 loading 可以讓表格處于加載中狀態，在異步請求資料、分頁時建議使用， </h3> <Table border :columns="columns3" :data="https://www.cnblogs.com/l-y-h/p/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="https://www.cnblogs.com/l-y-h/p/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>
六、視圖
1、警告提示（Alert）
詳見：https://www.iviewui.com/components/alert
（1）靜態地呈現一些警告資訊，可手動關閉，
（2）小案例分析：
【App.vue】 <template> <div style="width: 600px;"> <h3>一、使用 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>
2、全域提示（Message）
詳見：https://www.iviewui.com/components/message
（1）輕量級的資訊反饋組件，在頂部居中顯示，并自動消失，有多種不同的提示狀態可選擇，
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px;"> <h3>一、基本提示，默認在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>二、可以設定背景色(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>三、可以設定加載中樣式，并定時取消（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>
3、通知提醒（Notice）
詳見：https://www.iviewui.com/components/notice
（1）在界面右上角顯示可關閉的全域通知，常用于：系統主動推送、通知內容帶有描述資訊，
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px;"> <h3>一、基本用法，默認在 4.5秒后關閉，如果 desc 引數為慷訓不填，則自動應用僅標題模式下的樣式，</h3> <Button type="primary" @click="open(false)">Open notice</Button> <Button @click="open(true)">Open notice(only title)</Button> <h3>二、可以設定不同的型別（帶圖示、不帶圖示），可以使用 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>
4、抽屜（Drawer）
詳見：https://www.iviewui.com/components/drawer
（1）抽屜從父表單邊緣滑入，覆寫住部分父表單內容，用戶在抽屜內操作時不必離開當前任務，操作完成后，可以平滑地回到到原任務，
（2）小案例分析：
【App.vue】 <template> <div style="width: 800px;"> <h3>一、基礎抽屜，點擊觸發按鈕抽屜從右滑出，點擊遮罩區關閉（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>二、使用 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>
5、對話框（Modal）
詳見：https://www.iviewui.com/components/modal
（1）模態對話框，在浮層中顯示，引導用戶進行相關操作，
（2）小案例分析
【App.vue】 <template> <div style="width: 800px;"> <h3>一、基本用法，使用 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>二、添加 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>三、可以直接呼叫封裝好的實體方法</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>
未完待續，，，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/165106.html
標籤：JavaScript
上一篇：JS---DOM---為元素系結事件的引入，為元素系結多個代碼，兼容代碼
下一篇：JavaScript1 基礎