zonst-vue-com

zonst-vue-com

公共组件的抽离集合，该库中所涉及的有关element-ui组件的使用均基于@2.3.9。

使用方法

1. 安装

# 安装
npm i zonst-vue-com
# 或者
# yarn add zonst-vue-com

2. 注册

这里注意需要在element-ui之后注册，为了减少打包体积，没有将使用到的element-ui组件打包进本项目。

会在注册本组件时对element-ui挂载到Vue.prototype上的$ELEMENT做判断，如果没有该原型属性，则会警告提示，并且不予安装。 如果项目里使用到了 @1.x 版本 element-ui，建议手动给Vue.prototype挂载$ELEMENT属性再注册该组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import zonstVueCom from 'zonst-vue-com'
import 'zonst-vue-com/style/zonst-vue-com.css'  // 如果有全局样式的话需要引入

Vue.config.productionTip = false

// 注意：一定放在 element 以后注册，否则检测不通过不会进行安装
Vue.use(element)
   .use(zonstVueCom)

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

如果是像热更后台 element-ui为 1.x 版本使用，建议使用按需加载只导入支持该版本的组件：

安装babel-plugin-import：

npm i -D babel-plugin-import

配置babelrc 或者 babel.config.js 相关字段：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
+    ['import', {
+      libraryName: 'zonst-vue-com',
+      libraryDirectory: 'lib',
+      camel2DashComponentName: false,
+      camel2UnderlineComponentName: false
+    }, 'zonst-vue-com']
  ]
}

在main.js按需导入支持 1.x 版本的组件：

import Vue from 'vue'
import ElementUI from 'element-ui' //引入UI
import 'element-ui/lib/theme-default/index.css'
import { XTabLazy } from 'zonst-vue-com'
import 'zonst-vue-com/style/zonst-vue-com.css'  // 如果有全局样式的话需要引入

// 需要手动挂载 $ELEMENT 到原型上
Vue.prototype.$ELEMENT = {
  version: '1.4.2'
}

Vue
  .use(ElementUI)
  .use(XTabLazy)

之后正常使用。

各组件的具体使用方法请查看各自的文档。

包含的组件

未特殊说明均基于element-ui@2.3.9

• XTabLazy：实现el-tabs的懒加载，适配element-ui的1.x版本
  • 文档
• XDatePicker：包含常用快捷日期段选择的日期选择器
  • 文档
• XDatePickerLimit：指定天数范围内才能选择日期（范围外的日期不可选择）的日期选择器
  • 文档

本项目开发文档

• 文档

测试结果文档(2020-12-04)

• 文档