ivue_全局配置

1、全局配置

全局配置
使用 iView 3 时，可以进行全局配置组件的一些属性。

组件会优先使用 prop 设置的属性，如果未设置，再使用全局配置。

• transfer：所有带浮层的组件，是否将浮层放置在 body 内，默认为不设置，详见各组件默认的 transfer 值。可选值为 true 或 false。
• size：所有带有 size 属性的组件的尺寸，默认为不设置，详见各组件默认的 size 值。可选值为 default、small 或 large

用法如下：

Vue.use(iView, {
    transfer: true,
    size: 'large',
    select: {
        arrow: 'md-arrow-dropdown',
        arrowSize: 20
    }
});

2、定制主题

定制主题
iView 的样式是基于 Less 进行开发的，默认以前缀 .ivu- 作为命名空间，并且定义了一套样式变量，定制主题，就是编辑这个变量列表

• 安装less及less-loader

npm install less@2.7.3 --save-dev
npm install less-loader@4.0.6 --save-dev

import Vue from 'vue'
import iView from 'iview'

Vue.use(iView,{
    size: 'large',
       transfer: true,
       select: {
           arrow: 'md-arrow-dropdown',
           arrowSize: 20
       }
   })
   
   // import 'iview/dist/styles/iview.css'
   
   // 自定义主题
   import '../my-theme/custom.less'
   

新建my-theme目录，custom.less文件，然后设置自定义样式，覆盖默认配置即可。

@import "~iview/src/styles/index.less";

// Color
@primary-color: #8c0776;

3、国际化

国际化

安装插件

cnpm install vue-i18n --save

main.js

// 引入以下三个包
import  VueI18n from 'vue-i18n'
import en from 'iview/dist/locale/en-US';
import zh from 'iview/dist/locale/zh-CN';

// 使用语言包及初始化
Vue.use(VueI18n);
Vue.locale = () => {};
// 业务代码
const messages = {
  en: Object.assign({ message: 'hello' }, en),
  zh: Object.assign({ message: '你好' }, zh)
};
// 默认使用的语言包
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en',  // set locale
  messages  // set locale messages
});

// 挂载
new Vue({
  render: h => h(App),
  i18n  // 缩写：i18n:i18n
}).$mount('#app')

App.vue 使用，$t(“message”)对应上面的业务代码即可

<template>
  <div id="app" style="margin: 200px">
      <span>{{ $t("message") }}</span>
  </div>
</template>

4、iView Loader

iView Loader
统一 iView 标签书写规范，所有标签都可以使用首字母大写的形式，包括 Vue 限制的两个标签 Switch 和 Circle

安装，首先通过 npm 安装 iview-loader

npm install iview-loader --save-dev

配置 webpack，改写平时 vue-loader 的配置，形如：

module: {
    rules: [
        {
            test: /\.vue$/,
            use: [
                {
                    loader: 'vue-loader',
                    options: {
                        
                    }
                },
                {
                    loader: 'iview-loader',
                    options: {
                        prefix: false // 是否开启书写的前缀
                    }
                }
            ]
        }
    ]
}

可以直接写 和 这两个标签；
参数 prefix 设置为 true 后，所有 iView 组件标签名都可以使用前缀 i-，例如 、