阅读 77
iview 4.X 指南

iview 4.X 指南

4.X 版本

  • package.json 中,添加新包 view-design

    "dependencies": {
        "view-design": "^4.0.0"
    }
    复制代码

    添加完后需要执行 npm install,或者直接通过 npm install view-design --save 安装新包。

  • Webpack 入口 main.js 中,把原先引用的 iview 替换为 view-design

    import Vue from 'vue';
    import ViewUI from 'view-design';
    
    // import style
    import 'view-design/dist/styles/iview.css';
    
    Vue.use(ViewUI);
    复制代码

    同理,如果是按需引用,任何使用 from 'iview' 的都要替换为 from 'view-design'

  • 如果您在项目中使用了 iview 内置的工具函数文件,比如 iview/src/utils/assist.js 等,都要进行包名替换来使用最新版本,如未使用,请忽略:

    // e.g.
    import { findComponentDownload } from 'view-design/src/utils/assist';
    
    import { on, off } from 'view-design/src/utils/dom';
    复制代码

NPM 安装

#

推荐使用 npm 来安装,享受生态圈和工具带来的便利,更好地和 webpack 配合使用,当然,我们也推荐使用 ES2015。

$ npm install view-design --save
复制代码

使用之前

#

高效的开发,离不开基础工程的搭建。在开始使用 View UI 之前,有必要先了解以下基础知识,我们也假设您已经写过 Vue,并掌握了下面的内容。

以下概念贯穿 View UI 前后,建议开发者花点时间来了解。

  • props 传递数据
  • slot 内容分发
  • events $emit @click 事件

你也可以通过 学习组件基础内容 来快速入门。

使用 Vue CLI 3

#

我们为最新的 Vue CLI 3 提供了相应的 View UI(iView)插件,如果你正在用 Vue CLI 3,可以直接在插件中搜索 iview,安装插件来使用。

使用推荐工程

#

我们也为您准备好了基础工程,以此为基础开发,可以为您省去大量配置和调试环境的时间。

推荐工程:view-ui-project

如果您使用了我们推荐的工程,可以略过下面的内容直接进入开发阶段,我们也推荐使用这套工程来构建您的项目。

如果您希望自己配置或使用其它工程,请继续往下阅读。

如果你未接触过 webpack,建议 学习 webpack 内容

引入 ViewUI

#

一般在 webpack 入口页面 main.js 中如下配置:

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(ViewUI);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});
复制代码

按需引用

#

借助插件 babel-plugin-import可以实现按需加载组件,减少文件体积。首先安装,并在文件 .babelrc 中配置:

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "view-design",
    "libraryDirectory": "src/components"
  }]]
}
复制代码

然后这样按需引入组件,就可以减小体积了:

import { Button, Table } from 'view-design';
Vue.component('Button', Button);
Vue.component('Table', Table);
复制代码

特别提醒

#

  • 按需引用仍然需要导入样式,即在 main.js 或根组件执行 import 'view-design/dist/styles/iview.css';

组件使用规范

#

使用:prop传递数据格式为 数字、布尔值或函数时,必须带:(兼容String除外,具体看组件文档),比如:

Correct usage:
<Page :current="1" :total="100"></Page>

Incorrect usage:
<Page current="1" total="100"></Page>
复制代码

在非 template/render 模式下(例如使用 CDN 引用时),组件名要分隔,例如 DatePicker 必须要写成 date-picker

以下组件,在非 template/render 模式下,需要加前缀 i-

  • Button: i-button
  • Col: i-col
  • Table: i-table
  • Input: i-input
  • Form: i-form
  • Menu: i-menu
  • Select: i-select
  • Option: i-option
  • Progress: i-progress
  • Time: i-time

以下组件,在所有模式下,必须加前缀 i-,除非使用 iview-loader

  • Switch: i-switch
  • Circle: i-circle

使用 ViewUI(iView)时,可以进行全局配置组件的一些属性。

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

  • transfer:所有带浮层的组件,是否将浮层放置在 body 内,默认为不设置,详见各组件默认的 transfer 值。可选值为 truefalse

  • size:所有带有 size 属性的组件的尺寸,默认为不设置,详见各组件默认的 size 值。可选值为 defaultsmalllarge

  • 4.0.0 capture:所有带下拉的组件是否开启 capture 模式,默认为 true。可选值为 truefalse

    capture 是浏览器的一种默认行为,如果开启,当可下拉的组件(例如 Select)处于展开状态时,点击外部操作不会立即响应,而是先收起下拉菜单,再次点击才会响应操作。

    如果不需要该特性,可以通过全局配置,将 capture 设置为 false。

  • select.arrow:Select 下拉箭头图标

  • select.customArrow:Select 自定义下拉箭头图标

  • select.arrowSize:Select 下拉箭头尺寸

  • cell.arrow:Cell 右侧箭头图标

  • cell.customArrow:Cell 自定义右侧箭头图标

  • cell.arrowSize:Cell 右侧箭头尺寸

  • menu.arrow:Menu 下拉箭头图标

  • menu.customArrow:Menu 自定义下拉箭头图标

  • menu.arrowSize:Menu 下拉箭头尺寸

  • tree.arrow:Tree 下拉箭头图标

  • tree.customArrow:Tree 自定义下拉箭头图标

  • tree.arrowSize:Tree 下拉箭头尺寸

  • cascader.arrow:Cascader 下拉箭头图标

  • cascader.customArrow:Cascader 自定义下拉箭头图标

  • cascader.arrowSize:Cascader 下拉箭头尺寸

  • cascader.itemArrow:Cascader 右侧箭头图标

  • cascader.customItemArrow:Cascader 自定义右侧箭头图标

  • cascader.itemArrowSize:Cascader 右侧箭头尺寸

  • colorPicker.arrow:ColorPicker 下拉箭头图标

  • colorPicker.customArrow:ColorPicker 自定义下拉箭头图标

  • colorPicker.arrowSize:ColorPicker 下拉箭头尺寸

  • datePicker.icon:DatePicker 日期图标

  • datePicker.customIcon:DatePicker 自定义日期图标

  • datePicker.iconSize:DatePicker 日期图标尺寸

  • timePicker.icon:TimePicker 时间图标

  • timePicker.customIcon:TimePicker 自定义时间图标

  • timePicker.iconSize:TimePicker 时间图标尺寸

  • tabs.closeIcon:Tabs 关闭图标

  • tabs.customCloseIcon:Tabs 自定义关闭图标

  • tabs.closeIconSize:Tabs 关闭图标尺寸

  • modal.maskClosable:Modal 的 maskClosable 属性

用法如下:

Vue.use(ViewUI, {
    transfer: true,
    size: 'large',
    capture: false,
    select: {
        arrow: 'md-arrow-dropdown',
        arrowSize: 20
    }
});
复制代码

在 Webpack 中使用

#

完整引入 iView

import Vue from 'vue';
import ViewUI from 'view-design';
import locale from 'view-design/dist/locale/en-US';

Vue.use(ViewUI, { locale });
复制代码

按需引入 iView

import Vue from 'vue';
// importing ViewUI on demand
import { locale, Page } from 'view-design';
import lang from 'view-design/dist/locale/en-US';

// configure language
locale(lang);

// import components
Vue.component('Page', Page);
复制代码

兼容 vue-i18n@6.x+

import Vue from 'vue';
import ViewUI from 'view-design';
import VueI18n from 'vue-i18n';
import en from 'view-design/dist/locale/en-US';
import zh from 'view-design/dist/locale/zh-CN';

Vue.use(VueI18n);
Vue.use(ViewUI);
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({ i18n }).$mount('#app');
复制代码

兼容 vue-i18n@5.x

import Vue from 'vue';
import ViewUI from 'view-design';
import VueI18n from 'vue-i18n';
import en from 'view-design/dist/locale/en-US';
import zh from 'view-design/dist/locale/zh-CN';

Vue.use(VueI18n);
Vue.use(ViewUI);

Vue.config.lang = 'en-US';
Vue.locale('en-US', en);
Vue.locale('zh-CN', zh);
复制代码

使用 vue-i18n 时,也可以按需引入 iView 组件,用法与上面的示例类似。

通过 CDN 使用

#

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
<script src="//unpkg.com/view-design/dist/locale/en-US.js"></script>

<script>
    iview.lang('en-US');
</script>
复制代码

结合 vue-i18n 使用

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
<script src="//unpkg.com/view-design/dist/locale/en-US.js"></script>
<script src="//unpkg.com/view-design/dist/locale/zh-CN.js"></script>

<script>
    // you need to add Polyfill if your browser doesn't support ES2015
    Vue.locale = () => {};
    const messages = {
        en: Object.assign({ message: 'hello' }, iview.langs['en-US']),
        zh: Object.assign({ message: '你好' }, iview.langs['zh-CN'])
    };

    const i18n = new VueI18n({
      locale: 'en', // set locale
      messages // set locale messages
    })
    
    new Vue({
        el: '#app',
        i18n: i18n
    })
</script>
复制代码

支持的语言

#

iView 目前已支持以下语言:

  • 简体中文(zh-CN)
  • 繁体中文(zh-TW)
  • 维吾尔语(zh-UG)
  • 英文(en-US)
  • 土耳其语(tr-TR)
  • 西班牙语(es-ES)
  • 日语(ja-JP)
  • 俄语(ru-RU)
  • 法语(fr-FR)
  • 德语(de-DE)
  • 巴西葡萄牙语(pt-BR)
  • 葡萄牙语(pt-PT)
  • 韩语(ko-KR)
  • 越南语(vi-VN)
  • 瑞典语(sv-SE)
  • 印尼语(id-ID)
  • 乌克兰语(uk-UA)
  • 意大利语(it-IT)
  • 泰语(th-TH)
  • 印地语(hi-IN)
  • 波斯语(fa-IR)
  • 罗马尼亚语(ro-RO)
  • 希腊语(el-GR)
  • 荷兰语(nl-NL)
  • 捷克语(cs-CZ)
  • 蒙古语(mn-MN)
  • 传统蒙古语(mn-TR)
  • 芬兰语(fi-FI)
  • 阿拉伯语(ar-SA)
  • 阿拉伯语-埃及(ar-EG)
  • 丹麦语(da-DK)
  • 波兰语(pl-PL)
  • 挪威语(nb-NO)

定制主题

View UI(iVIew)默认提供了一套 UI 主题,并且可以在一定程度上定制新主题,以满足业务和品牌上的多样化视觉需求。

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

完整的变量列表可以查看 默认样式变量

然后在入口文件 main.js 内导入这个 less 文件即可:

import Vue from 'vue';
import ViewUI from 'view-design';
import '../my-theme/index.less';

Vue.use(ViewUI);
复制代码

通过安装工具修改

#

如果没有使用 webpack,可以用我们提供的工具 iview-theme 来编译。

首先需要安装主题生成工具,从 npm 全局或在项目中局部安装,以全局安装为例:

npm install iview-theme -g
复制代码

然后在业务工程里新建一个目录,用来存放主题文件,使用下面的命令初始化主题,这时会从 iView 仓库拉取最新的样式文件:

iview-theme init my-theme
复制代码

如需拉取指定版本号的 iView,使用下面的命令。(实际运行下面命令时,需将 xxx 替换成项目所使用的 iView 版本,如 “ v2.14.3 ”)

iview-theme init my-theme xxx
复制代码

最后编辑 my-theme/custom.less 文件,用命令编译即可:

cd my-theme
iview-theme build -o dist/
复制代码

最终会在指定的目录下编译为 iview.css 的文件,只需在入口处引用它就可以了,比如在 main.js 文件:

import Vue from 'vue';
import ViewUI from 'view-design';
import '../my-theme/dist/iview.css';

Vue.use(ViewUI);
复制代码
文章分类
前端
文章标签