# "comp-wrap" 简介
这是一个常用vue组件库，基于vue 2.0封装了web开发常用组件、常用方法、常用样式......

## 安装组件

- npm install comp-wrap

##  引入组件
 ```
 import compWrap from 'comp-wrap'
  Vue.use(compWrap, {
    namespace: 'project_platform_',
    injectReset: false,
    injectStyle: false
  })
 ```

-  namespace: 命名空间，用于隔离不同项目或模块的 Storage 和 Cookie 数据。
-  injectReset: 是否注入normalize.css, 一份样式重置文件，确保跨浏览器样式一致性。
-  injectStyle: 是否注入全局样式，一份基于4/8倍数的样式枚举类和常用样式，方便快速布局。

## 组件说明
- BarChartPlus	增强型柱状图组件，支持多种图表配置和交互功能。
- HorChartPlus	增强型横向图表组件，适用于数据横向展示场景。
- LineChartPlus	增强型折线图组件，支持动态数据更新和自定义样式。
- PieChartPlus	增强型饼图组件，支持数据占比展示和交互操作。
- MapMarkerListView	地图标记列表视图组件，用于展示地图标记点信息。
- MapPointPickerDialog	地图点选择对话框组件，支持地图点位选取功能。
- InputPlus	增强型输入框组件，修复了原生 input 的部分问题（如 maxlength 失效）。
- FilePreview	文件预览组件，支持图片、PDF 等多种文件格式的预览功能。

 ```
    <bar-chart-plus 
      :seriesData="barLineChartOptions.seriesData"
      :xAxisData="barLineChartOptions.xAxisData"
    ></bar-chart-plus>

    <pie-chart-plus 
      :seriesData="pieChartOptions.seriesData"
    ></pie-chart-plus>

    <map-marker-list-view 
      :markerList="markerList">
    ></map-marker-list-view>

    <map-point-picker-dialog 
      :visible.sync="visible" 
      :mode="mode" 
      :in-point="inPoint" 
      @confirm="handlePointMapConfirm">
    </map-point-picker-dialog>

    <input-plus
      v-model="form.price"
      type="number"
      maxlength="10"
      :accept-minus="false"
      :decimal-limit="2"
    ></input-plus>

    <file-preview ref="filePreview"></file-preview> 
    filePreview(file) {
      this.$refs.filePreview.open(file.fileUrl, file.fileName)
    } 
 ```

## 方法说明
 - Vue.prototype.$tools	提供通用工具方法集合，如日期格式化、字符串处理等。
 - Vue.prototype.$localStoragePlus  增强型本地存储工具，支持命名空间隔离。
 - Vue.prototype.$sessionStoragePlus	增强型会话存储工具，支持命名空间隔离。
 - Vue.prototype.$cookiePlus 增强型 Cookie 操作工具，支持命名空间隔离。

这些工具方法也挂载到了全局对象 window 上，可以直接通过 window.tools、window.localStoragePlus 等方式访问。

## 样式说明

- 设计风格：0/4/8/12/16/(20)/24/(32) 4/8倍数非线性
- [p, t/r/b/l], [m, t/r/b/l], gap, 枚举[4/8倍数——0/4/8/12/16/20/24/32]
- radius枚举[radius-25/50-p, 4/8倍数——0/4/8/12/16/20/24/32]
- text(font-size)[10, 12, 14, 16, 18, 20, 22, 24]
- lh-x-x(line-height)枚举[0.8, 1, 1.2, 1.5, 1.8, 2]
- z(z-index)枚举[0, 10...50]
- flex枚举[none——定尺寸不伸缩, auto——内容自适应, full——占满, 1——纯比例分配, 2, 3]
- order枚举[first(-1), 1, 2, 3, last(999)] *-
- border, border-t/r/b/l
- border-x(border-width)枚举(2, 3, 4)————覆盖border宽度
- border-gray-x(border-color)枚举(1-9)————覆盖border颜色