iview學習筆記

時間 2019-11-09

標籤 iview 學習筆記简体版

原文原文鏈接

iview 配置

全局配置

Vue.use(iView, {
    size: 'large',
    transfer: 'true' 
})
複製代碼

size能夠配置全局的button的大小
transfer則是配置select等的下拉懸浮是基於全局定位仍是父盒子定位。做用是，讓overflow 的時候，不受盒子的影響。

自定義主題

npm i less@2.7.3 --save-devjavascript

npm i less-loader --save-devcss

// coustom.less
@import '~iview/src/styles/index.less';
@primary-color: pink;
複製代碼

多語言配置

使用一種語言

import locale from 'iview/dist/locale/en-US'

Vue.use(iView, {
    size: 'large',
    transfer: 'true',
    locale
})

複製代碼

切換多語言

// main.js
import VueI18n from 'vue-i18n'
import zh from 'iview/dist/locale/zh-CN'
import en from 'iview/dist/locale/en-US'

Vue.config.productionTip = false

Vue.use(VueI18n)
// 下面是覆蓋Vue的locale 防止報錯
Vue.locale = () => {}

const messages = {
  en: Object.assign({message: 'hello'}, en),
  zh: Object.assign({message: '你好'}, zh)
}
const i18n = new VueI18n({
  locale: 'zh',
  messages
})

new Vue({
  render: h => h(App),
  i18n
}).$mount('#app')

// 使用,在vue中以下：

{{$t("message")}}

複製代碼

iview-loader 的使用

統一 iView 標籤書寫規範，全部標籤均可以使用首字母大寫的形式，包括 Vue 限制的兩個標籤 Switch 和 Circlehtml

如下設置基於vuecli3.0

// vue.config.js
module.exports = {
    // 默認設置: https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-service/lib/config/base.js
    chainWebpack: config => {
    // 使用 iView Loader
        config.module
            .rule('vue')
            .test(/\.vue$/)
            .use('iview-loader')
            .loader('iview-loader')
            .tap(() => {
                return {
                    prefix: false
                }
            })
            .end();
    }
};
複製代碼

導航路由鑑權篇

3.0導航菜單跳轉方式

<Menu>
    <MenuItem to="/home" name="home">
      Home
    </MenuItem>
    <MenuItem to="/about" target="_blank" replace>
      Home
    </MenuItem>
  </Menu>
複製代碼

to="/home" 跳轉 target="_blank" 新窗口打開 replace 不保留歷史 name 菜單高亮前端

根據當前路由選擇對應菜單

<Menu :active-name="activeName">
    <MenuItem to="/" name="/home">
      Home
    </MenuItem>
    <MenuItem to="/about" name="/about">
      About
    </MenuItem>
 </Menu>
<script> export default { data() { return { activeName: this.$route.path } }, watch: { $route(val, old) { this.activeName = this.$route.path } } } </script>
複製代碼

activeName 根據router動態配置。vue

在路由級別對頁面作鑑權

// router
{
  path: '/admin',
  name: 'admin',
  meta: {
    type: 'login'
  },
  component: () => import(/* webpackChunkName: "about" */ './views/admin.vue')
}
// main.js

router.beforeEach((to, from, next) => {
  const type = to.meta.type;
  if (type === 'login') {
    if (window.localStorage.getItem('login')) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})
複製代碼

能夠根據路由裏面的meta標籤來進行鑑權。java

根據不一樣的平臺動態路由不一樣的組件

// route.js

const ua = window.navigator.userAgent;
let isMobile = false;

if (ua.indexOf('iPhone') >=0 ) isMobile = true;
if (ua.indexOf('Android') >=0 ) isMobile = true;
if (ua.indexOf('iPad') >=0 ) isMobile = true;

const path = isMobile ? '/mobile' : ''


{
  path: '/admin',
  name: 'admin',
  meta: {
    type: 'login'
  },
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import(/* webpackChunkName: "about" */ './views' + path + '/admin.vue')
},
複製代碼

grid 佈局

能夠解決大部分的佈局問題webpack

基本佈局

<div id="app">
    <div style="height: 50px; position: fixed; top: 0; background: red; width: 100%;z-index: 10;"></div>
    <Row :gutter="16">
        <Col v-for="n in 20" span="1">
            <Card :title="n">
                {{n}}列
            </Card>
        </Col>
        <Col :span="4">
            <Card>
                <div style="height: 200px"></div>
            </Card>
            <Affix :offset-top="50">
                <Card>
                    <div style="height: 200px"></div>
                </Card>
            </Affix>
        </Col>
    </Row>
</div>

複製代碼

垂直居中

<Row type="flex" justify-content="center" align-item="center"></Row>

複製代碼

左右流出空白效果

<Row>
    <Col :span="4" :offset-left="1"></Col>
    <Col :span="18"></Col>
</Row>
複製代碼

設置默認佔位

<Row>
    <Col :span="4" :offset="1"></Col>
    <div Style="height: 1px; width:100%;"></div>
</Row>
複製代碼

響應式

{
    xs: '480px',
    sm: '576px',
    md: '768px',
    lg: '992px',
    xl: '1200px',
    xxl: '1600px'
}
複製代碼

<Row>
    <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 6, offset: 1}"></Col>
    <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 16, offset: 0}"></Col>
</Row>

複製代碼

Layout

基本佈局方式1

基本佈局方式2

本節實例以下:

devArtical是一個獨立的Layout組件
4個頁面分別對應4個菜單 App/Manage/Push/Dev ,每一個組件內部使用devArtical佈局。
App.vue 是根文件
Main.js 主入口文件，全局註冊devArtival組件

具體代碼以下:ios

mian.js 全局註冊

// main.js
...
import devArtical from './components/dev-artical'
Vue.component('dev-artical', devArtical)
...
複製代碼

App.vue router-view展現

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
複製代碼

view下的4個頁面引用

<template>
    <div>
        <dev-artical>
            this is manage
        </dev-artical>
    </div>
</template>
複製代碼

dev-artical 是代碼最多的，因此放在最後。

首先是Lauout部分git

<Layout>
    <Header></Header>
    <Layout></Layout>
</Layout>
複製代碼

而後是Header部分github

<Header class="header">
    <Row>
        <Col :span="4" offset="1">
            <img src="../assets/logo.png" class="logo" alt="">
        </Col>
        <Col :span="14">
            <Menu mode="horizontal" :activeName="activeName">
                <MenuItem name="/app" to="/app">應用分析</MenuItem>
                // 其他菜單
            </Menu>
        </Col>
        <Col :span="4">
            <Row>
                <Col :span="8">
                    <Dropdown>
                        <Avatar src="https://dev-file.iviewui.com/avatar_default/avatar"></Avatar>
                        <DropdownMenu slot="list">
                            <DropdownItem>
                                個人主頁
                            </DropdownItem>
                            <DropdownItem>
                                個人設置
                                <Badge status="error"></Badge>
                            </DropdownItem>
                            <DropdownItem divided>
                                退出登陸
                            </DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </Col>
                <Col :span="8">
                    <Dropdown>
                        <Badge :count="2" :offset="[20, 4]">
                            <Icon type="md-notifications-outline" size="24" />
                        </Badge>
                        <Tabs slot="list" value="notification">
                            <TabPane label="通知" name="notification">
                                <div class="notification">通知內容</div>
                            </TabPane>
                            <TabPane label="關注" name="follow">
                                <div class="notification">通知內容</div>
                            </TabPane>
                            <TabPane label="標籤2" name="system">
                                <div class="notification">系統通知</div>
                            </TabPane>
                        </Tabs>
                    </Dropdown>
                </Col>
                <Col :span="8">
                    <Icon @click="value1=true" type="ios-color-palette-outline" size="24"/>
                </Col>
            </Row>
        </Col>
    </Row>
</Header>
複製代碼

.header {
    position: fixed;
    width: 100%;
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    top: 0;
    left: 0;
    z-index: 100;
}
.logo {
    height: 50px;
    margin-top: 5px;
}
.notification {
    text-align: center;
    height: 200px;
}
.ivu-menu-horizontal.ivu-menu-light:after {
    display: none;
}
.sider {
    position: fixed;
    height: 100%;
    left: 0;
    overflow: auto;
    z-index: 1;
}
.sider-menu {
    margin-top: 60px;
}
.sider-hide .ivu-menu-item span {
    display: none;
}
.content {
    margin-left: 240px;
    margin-top: 60px;
    padding: 16px;
    transition: 0.2s all ease-in-out;
}
.content-expand {
    margin-left: 64px;
}
複製代碼

export default {
    data() {
        return {
            activeName: this.$route.path,
            value1: false,
            isCollapsed: false
        }
    },
    created() {
        this.activeName = this.$route.path;
    }
}
複製代碼