# zonst-vue-com

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

Latest version **1.1.0** (published 2021-07-28) · 0 weekly downloads

## Install

```sh
npm install zonst-vue-com
pnpm add zonst-vue-com
yarn add zonst-vue-com
bun add zonst-vue-com
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2021-07-28 |
| First published | 2020-12-05 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 262.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | zonst |

## Links

- npm: https://www.npmjs.com/package/zonst-vue-com
- npm.io page: https://npm.io/package/zonst-vue-com

## Recent versions

- 1.1.0 (latest) — 2021-07-28
- 1.0.1 — 2021-01-23
- 1.0.0 — 2020-12-05

## README

## zonst-vue-com

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



### 使用方法

#### 1. 安装

```shell
# 安装
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`属性再注册该组件

```javascript
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`：
```bash
npm i -D babel-plugin-import
```

配置`babelrc` 或者 `babel.config.js` 相关字段：
```javascript
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 版本的组件：
```javascript

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版本
  - [文档](/packages/XTabLazy/README.md)
- `XDatePicker`：包含常用快捷日期段选择的日期选择器
  - [文档](/packages/XDatePicker/README.md)
- `XDatePickerLimit`：指定天数范围内才能选择日期（范围外的日期不可选择）的日期选择器
  - [文档](/packages/XDatePickerLimit/README.md)

### 本项目开发文档
- [文档](/docs/development_doc.md)


### 测试结果文档(2020-12-04)
- [文档](/docs/test_report.md)

---
_Source: https://npm.io/package/zonst-vue-com · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._