快速上手

安装

安装依赖

FddContract 依赖以下库，你必须安装并引入才能使用。

库	说明
[email protected]open in new window	[email protected]
element-uiopen in new window	UI 库
vue-lazyloadopen in new window	vue 懒加载

yarn add vue element-ui vue-lazyload

安装组件

FddContract 需要使用公司内部源安装

yarn add fdd-contract --registry=http://npm.fabigbig.com

引入

引入库

plugin.ts

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import FddContract from 'fdd-contract'

/** 依赖：懒加载组件 */
Vue.use(VueLazyload, {
  attempt: 1,
  observer: true
})

/** 依赖：FddUI */
Vue.use(ElementUI)

/** 安装合同控件 */
Vue.use(FddContract)

// 更改全局配置
FddContract.config.scrollButtonVisibleDistance = 200

全局配置参考

引入样式

WARNING

FddContract 的样式已包含图标字体 base64，可能会引起打包后样式丢失

移动到样式文件中引入可解决该问题

lib.scss

@import '~fdd-contract/dist/style.css';

兼容

通常来说，打包 polyfills 应当是最终使用你的库的应用的责任(参考open in new window)。

因此，为了避免 polyfills 重复打包导致体积过大，公共库并没有内置 polyfills。

在 Vue Cli 构建的应用中，你需要这样配置来兼容旧的浏览器：

vue.config.js

module.exports = {
  // 需要 babel 处理兼容的依赖
  transpileDependencies: ['fdd-contract']
}