版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq3399013670/article/details/89785196
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 [email protected] --save-dev
npm install [email protected] --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-,例如 、