comp-wrap

这是一个常用vue组件库，基于vue 2.0封装了web开发常用组件（纯组件，不含工具方法/增强存储/样式库）。

安装组件

npm install comp-wrap

引入组件

import compWrap from 'comp-wrap'
import 'comp-wrap/comp-wrap.css'  // 可选，组件内置样式（按 exports 映射引入）

Vue.use(compWrap)

组件列表

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

组件使用示例

BarChartPlus 柱状图组件

基础用法

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

全量配置

<bar-chart-plus 
  :seriesData="barLineChartOptions.seriesData" 
  :xAxisData="barLineChartOptions.xAxisData"
  width="400px" 
  height="300px" 
  theme="light" 
  :colorStart="['#333', 'rgba(255, 0, 0, 0.1)']"
  :colorEnd="['#fff', 'rgba(255, 0, 0, 0.9)']" 
  :colorCenter="['#999', 'rgba(255, 255, 0, 0.1)']" 
  textColor="#f0f"
  label 
  borderRadius 
  barWidth="10" 
  minSpan="50" 
  x_rotate="45" 
  y_name="金额" 
  y_axisLine 
  y_splitLine 
  y_type="value"
></bar-chart-plus>

HorChartPlus 横向图表组件

基础用法

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

全量配置

<hor-chart-plus 
  :seriesData="barLineChartOptions.seriesData" 
  :xAxisData="barLineChartOptions.xAxisData"
  width="300px" 
  height="400px" 
  theme="light" 
  :colorStart="['#333', 'rgba(255, 0, 0, 0.1)']"
  :colorEnd="['#fff', 'rgba(255, 0, 0, 0.9)']" 
  :colorCenter="['#999', 'rgba(255, 255, 0, 0.1)']" 
  textColor="#f0f"
  label 
  borderRadius 
  barWidth="30" 
  minSpan="50" 
  x_rotate="45" 
  x_axisLine 
  x_splitLine 
  y_name="金额" 
  y_type="value"
></hor-chart-plus>

LineChartPlus 折线图组件

基础配置

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

全量配置

<line-chart-plus 
  :seriesData="barLineChartOptions.seriesData" 
  :xAxisData="barLineChartOptions.xAxisData"
  width="600px" 
  height="300px" 
  theme="light" 
  :colorStart="['#333', 'rgba(255, 0, 0, 0.1)']"
  :colorEnd="['#fff', 'rgba(255, 0, 0, 0.9)']" 
  :colorCenter="['#999', 'rgba(255, 255, 0, 0.1)']" 
  textColor="#f0f"
  label 
  smooth 
  step 
  symbol="emptyCircle" 
  symbolSize="10" 
  minSpan="50" 
  x_rotate="45" 
  y_name="金额" 
  y_axisLine 
  y_splitLine 
  y_type="value"
></line-chart-plus>

PieChartPlus 饼图组件

圆心内容通过普通插槽自定义：组件只负责把内容定位到饼图圆心（center_x/center_y），不向插槽传递任何数据，要显示什么、怎么算，完全由业务方自行处理后再传进来。

基础用法（实心饼，无圆心内容）

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

环形 + 圆心插槽（业务方自行准备内容并传入）

<pie-chart-plus 
  :seriesData="pieChartOptions.seriesData" 
  width="400" 
  height="400" 
  theme="light" 
  :color="['#f00', '#0f0', '#00f']" 
  :radius="['45%', '70%']" 
  center_x="50%" 
  center_y="50%" 
  :legend="{ orient: 'horizontal', bottom: '2%', left: 'center' }" 
  label 
  borderWidth="2" 
  roseType="radius"
>
  <!-- 业务方自己算好的值，直接写进插槽里的 div -->
  <div class="ring-center">
    <span class="ring-center__label">统计量</span>
    <span class="ring-center__value">{{ total }}</span>
  </div>
</pie-chart-plus>

/* 业务方自行处理成圆形 div */
.ring-center {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(238, 102, 102, 0.08);
  border: 2px solid rgba(238, 102, 102, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

说明

• radius 默认 ['0%', '75%'] 为实心饼；圆心插槽建议配合环形（如 ['45%', '70%']）使用，否则内容会盖在饼上。
• 圆心插槽层默认 pointer-events: none，不拦截饼图的 hover/点击；若插槽内容需要交互，给内部元素单独设置 pointer-events: auto 即可。
• 圆心内容始终跟随 center_x/center_y，改动圆心位置不会错位。
• 组件不向插槽传递数据，业务方自行计算要显示的内容后传入即可。

MapMarkerListView 地图标记列表组件

<template>
  <div class="map-demo">
    <map-marker-list-view 
      :markerList="markerList"
      :mapConfig="mapConfig"
      @marker-click="handleMarkerClick">
    </map-marker-list-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mapConfig: {
        zoom: 12,
        center: [116.397428, 39.90923]
      },
      markerList: [
        { id: 1, position: [116.397428, 39.90923], title: '天安门', icon: '/marker1.png' },
        { id: 2, position: [116.405285, 39.904989], title: '北京站前' },
        { id: 3, position: [116.443709, 39.914167], title: '东直门' }
      ]
    }
  },
  methods: {
    handleMarkerClick(item) {
      console.log('点击标记：', item)
    }
  }
}
</script>

MapPointPickerDialog 地图点选择对话框组件

<template>
  <div>
    <el-button @click="visible = true">选择地点</el-button>
    <map-point-picker-dialog 
      :visible.sync="visible" 
      mode="point" 
      :in-point="currentPoint" 
      @confirm="handlePointMapConfirm">
    </map-point-picker-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      currentPoint: null
    }
  },
  methods: {
    handlePointMapConfirm(point) {
      console.log('选中的地点坐标：', point)
      // point: { lng, lat, address }
    }
  }
}
</script>

InputPlus 增强型输入框组件

<template>
  <div>
    <!-- 基础用法 -->
    <input-plus
      v-model="form.name"
      placeholder="请输入姓名"
      maxlength="20"
    ></input-plus>

    <!-- 金额输入（禁止负数 + 2 位小数） -->
    <input-plus
      v-model="form.price"
      type="number"
      :accept-minus="false"
      :decimal-limit="2"
      placeholder="请输入金额"
    ></input-plus>

    <!-- 支持负数 -->
    <input-plus
      v-model="form.temperature"
      type="number"
      :accept-minus="true"
      :decimal-limit="1"
      placeholder="温度"
    ></input-plus>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        price: '',
        temperature: ''
      }
    }
  }
}
</script>

联系方式

• 邮箱：[email protected]
• 微信：tcheng8866